/* Responsive layer for the funnel app.
   The design kit (design/styles.css + _ds_bundle.js) is brand law and is not
   edited here: this file only adds layout utilities and narrow-viewport
   overrides on top of it, so a kit re-sync never conflicts with the app. */

:root {
  --app-max: 980px;
  /* The brand signature's semantic colour (5.9, request 86): brand orange on a
     dark ground, the accessible dark orange of the same palette on a light
     ground (5.9:1 on white; the bright orange is 2.2:1 there). One token pair,
     used wherever "לינדר פיננסים" stands alone as the brand. */
  --brand-orange-on-dark: var(--linder-orange, #F29A40);
  --brand-orange-on-light: var(--linder-orange-500, #9B4F2E);
}
/* The standalone brand name. Always at least 19px bold, so that on navy the
   3.9:1 of orange on blue is read as large text (WCAG 1.4.3). */
.l-brand-name { color: var(--brand-orange-on-dark); font-weight: bold; }
.l-brand-name.is-on-light { color: var(--brand-orange-on-light); }

/* --- Focus visibility ---------------------------------------------------- */
/* The kit clears outlines and defines no focus state for buttons or links, so
   keyboard users had nothing to follow (WCAG 2.4.7). Restored here rather than
   in the kit, so a re-sync cannot drop it again. :focus-visible keeps mouse
   clicks clean. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--linder-orange);
  outline-offset: 2px;
}

/* On the navy hero the orange ring would sit on a dark ground; keep it light. */
.l-hero a:focus-visible,
.l-hero button:focus-visible {
  outline-color: #fff;
}

/* --- Touch targets ------------------------------------------------------- */
/* Anything tappable gets at least 44px of height. Inline text links inside a
   paragraph are excluded: padding there would break the line box. */

button,
a[href^="tel:"],
.l-linkbtn,
header a {
  min-height: 44px;
}

header a {
  display: inline-flex;
  align-items: center;
}

a[href^="tel:"],
.l-linkbtn {
  display: inline-flex;
  align-items: center;
}

/* Checkbox rows: the label is the real tap target, the box itself is 22px. */
.l-check {
  min-height: 44px;
  align-items: center;
  padding: 2px 0;
}

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

.l-grid {
  display: grid;
  gap: 14px;
}
.l-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* --- Result: the two levels ---------------------------------------------- */
/* The whole mortgage and one loan file are different questions, and before
   this they were one scroll in identical styling: the same six section
   headings, once per loan. Two tabs mark which level you are on; the grid
   under the second one is what lets you compare loans without opening any. */

.l-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 22px;
}

.l-tab {
  font: inherit;
  font-size: 19px;
  font-weight: bold;
  color: var(--gray-500, #6b7280);
  background: none;
  border: none;
  /* Sits on the container's own 2px rule, so the active tab reads as attached
     to its panel rather than as a floating chip. */
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
}

.l-tab.is-on {
  color: var(--linder-navy);
  border-bottom-color: var(--linder-orange);
}

.l-back {
  font: inherit;
  font-size: 17px;
  font-weight: bold;
  color: var(--linder-navy);
  background: none;
  border: none;
  padding: 0 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.l-back:hover { text-decoration: underline; }

/* Shared /r/<id> result: logo + a real personal-area link (not history.back). */
/* ========================= The brand mark ================================ */
/* Four headers show the Linder logo and each used to size it with a rule of
   its own, which is how they drifted to 72 / 54 / 46 / 46px. The mark now
   reads one custom property and each surface sets the step it wants, so a
   change lands everywhere or nowhere. Sizes raised about 13% on 1.9.
   The source PNG is 835x384, so every step below sits far inside its own
   resolution and the mark is never upscaled. */
:root {
  /* One mark at one size on every header at any given width: home, check
     route, personal area and the shared result all read the same three steps
     (2.9, request 47). The per-header names below are kept as aliases so no
     header can be given a private size again. */
  --logo-wide: 81px;   /* desks above 1080px */
  --logo-mid: 70px;    /* 801 to 1080px      */
  --logo-phone: 52px;  /* up to 800px        */
  --logo-any: var(--logo-wide);
  --logo-home: var(--logo-any);
  --logo-home-mid: var(--logo-any);
  --logo-home-sm: var(--logo-any);
  --logo-check: var(--logo-any);
  --logo-check-sm: var(--logo-any);
  --logo-account: var(--logo-any);
  --logo-account-sm: var(--logo-any);
  --logo-shared: var(--logo-any);
}
@media (max-width: 1080px) { :root { --logo-any: var(--logo-mid); } }
@media (max-width: 800px) { :root { --logo-any: var(--logo-phone); } }

/* height drives the box and the width follows it, so the file keeps its own
   proportions at whichever step is in force. */
.l-brandmark {
  height: var(--logo-h, var(--logo-check));
  width: auto;
  display: block;
  object-fit: contain;
}

.l-shared-head {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.l-shared-head-start {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.l-shared-head { --logo-h: var(--logo-shared); }
.l-shared-head .l-note { margin: 0; }

.l-loan-card {
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: right;
  background: #fff;
  border: 1px solid var(--gray-200);
  /* Sharp corners, no shadow: the kit's rule, and it keeps the card reading as
     one of a set rather than as a floating object. */
  border-radius: 0;
  padding: 20px;
  cursor: pointer;
}

.l-loan-card:hover { border-color: var(--linder-navy); }

.l-loan-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.l-loan-card-name {
  font-size: 20px;
  font-weight: bold;
  color: var(--linder-navy);
}

.l-loan-card-score {
  font-family: var(--font-numeric);
  font-weight: 900;
  font-size: 26px;
  direction: ltr;
}

.l-loan-card-score-of {
  font-size: 14px;
  font-weight: bold;
}

.l-loan-card-bank {
  margin: 0;
  /* Two lines maximum: a bank name plus a Hebrew filename can otherwise push
     every card in the row to a different height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.l-loan-card-figures {
  display: flex;
  gap: 26px;
  margin-top: 6px;
}

.l-loan-card-fig {
  display: block;
  font-family: var(--font-numeric);
  font-weight: 900;
  font-size: 21px;
  direction: ltr;
  text-align: right;
  color: var(--linder-navy);
}

.l-loan-card-verdict {
  margin-top: 8px;
  font-size: 17px;
  font-weight: bold;
}

.l-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.l-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.l-stack > * + * { margin-top: 12px; }

/* Wide content must scroll inside itself, never push the page sideways. */
.l-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.l-hero-title {
  font-size: clamp(33px, 5.6vw, 58px);
  font-weight: 800;
  color: var(--linder-navy);
  line-height: 1.12;
  margin: 0;
}
.l-title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  color: var(--linder-navy);
  line-height: 1.15;
  margin: 0;
}
.l-subtitle {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 100;
  line-height: 1.4;
  margin: 10px 0 0;
}
.l-section-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: bold;
  color: var(--linder-navy);
  margin: 0 0 12px;
}
.l-eyebrow {
  font-size: 17px;
  letter-spacing: normal;
  color: var(--linder-orange-500, var(--linder-orange));
  font-weight: bold;
  margin-bottom: 10px;
}

/* --- ADHD-friendly focus: one job, time left, next action --------------- */
/* Working memory is the scarce resource. The strip restates where we are
   and what this screen wants, so a tab-switch does not force a re-read. */
.l-focus {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-inline-start: 4px solid var(--linder-orange);
  padding: 12px 16px;
  margin-bottom: 22px;
}
.l-focus-meta {
  font-size: 16px;
  font-weight: bold;
  color: var(--linder-navy);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
}
.l-focus-job {
  font-size: 17px;
  font-weight: 100;
  color: var(--gray-700);
  margin-top: 4px;
  line-height: 1.35;
}
.l-win {
  background: var(--surface-tint, #F8FFFF);
  border-inline-start: 4px solid var(--linder-green);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 100;
  color: var(--linder-navy);
}
.l-field-why {
  font-size: 15px;
  font-weight: 100;
  color: var(--gray-700);
  margin-top: 4px;
  line-height: 1.35;
}
.l-hero-lead {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 100;
  line-height: 1.4;
  margin: 16px 0 0;
  max-width: 34em;
  color: #fff;
  opacity: 0.92;
}
/* The five hero lines. One tick each, no card, no rule, no background: the
   point is a fast scan, and anything heavier both slows the read and pushes
   the CTA under the fold on a phone. */
.l-hero-points {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-width: 34em;
  /* The two columns every row is built from, so the tick axis and the text
     axis cannot drift between rows. */
  --hero-tick: 18px;
  --hero-tick-gap: 10px;
  /* The width the centred block is GIVEN on a phone. Wide enough that the
     longest point stays on one line at the mobile size, and fixed, so the
     block does not resize when a word is edited. */
  --hero-points-col: 20em;
  font-size: clamp(16px, 1.85vw, 19px);
}
/* One fixed grid per row, not a flex line: a tick column of one width on the
   right, a fixed gap, and a single text column. Every tick therefore sits on
   one vertical axis and every line of text starts at the same right edge,
   whatever the line is. Grid is also what makes the hanging indent correct:
   a line that wraps stays inside the text column and can never run back under
   the tick, which is what a flex row allowed. */
.l-hero-points li {
  display: grid;
  grid-template-columns: var(--hero-tick) minmax(0, 1fr);
  column-gap: var(--hero-tick-gap);
  align-items: start;
  padding: 4px 0;
  color: #fff;
  font-size: clamp(16px, 1.85vw, 19px);
  font-weight: 100;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.l-hero-points .l-home-side-icon {
  width: var(--hero-tick);
  height: var(--hero-tick);
  /* Centred on the FIRST line rather than on the whole cell, so a two line
     point keeps its tick beside the line it belongs to. */
  margin-block-start: calc((1.35em - var(--hero-tick)) / 2);
  color: var(--linder-orange);
}
.l-body { font-size: clamp(17px, 1.9vw, 21px); font-weight: 100; line-height: 1.4; }
.l-note { font-size: 17px; font-weight: 100; color: var(--gray-700); line-height: 1.4; }

.l-linkbtn {
  border: none;
  background: none;
  color: var(--linder-navy);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  padding: 0;
}

.l-stat-value {
  font-family: var(--font-numeric);
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 44px);
  color: var(--linder-navy);
  direction: ltr;
  line-height: 1.05;
}
.l-stat-label { font-size: 17px; font-weight: 100; margin-top: 6px; }

/* --- Narrow viewports ---------------------------------------------------- */

@media (max-width: 900px) {
  .l-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three cards used to jump straight from one column to three at 720px,
     leaving ~215px each. Two columns is the readable middle. */
  .l-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .l-grid-2,
  .l-grid-3,
  .l-grid-4 { grid-template-columns: minmax(0, 1fr); }

  /* Keep the logo and the phone together on the first row and give the step
     rail a scrolling row of its own, so the header stays two rows instead of
     three and the form's submit button stays reachable. These are the old
     shell header's rules; the site header (.l-home-header) that now sits in
     the same shell on the check route keeps its own grid, so it is excluded
     here and looks the same as on the home page. */
  .l-shell header:not(.l-home-header) {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px !important;
  }
  .l-shell header:not(.l-home-header) > nav {
    order: 3;
    flex: 1 0 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .l-shell header:not(.l-home-header) > nav button {
    font-size: 17px !important;
    padding: 0 7px 3px !important;
  }
  .l-shell header:not(.l-home-header) > nav div[style*="width: 24px"] {
    width: 12px !important;
  }
  .l-shell main {
    padding: 24px 16px 48px !important;
  }
  .l-row > * { min-width: 0; }
}

@media (max-width: 480px) {
  .l-shell header:not(.l-home-header) img:not(.l-brandmark) { height: 38px !important; }
  .l-row { gap: 10px; }
  /* Two Hebrew tab labels plus a count do not fit a narrow phone. They stay on
     one line and the row scrolls, rather than wrapping into something that no
     longer reads as a pair of tabs. */
  .l-tabs { overflow-x: auto; }
  .l-tab { font-size: 17px; padding: 10px 12px; }
  /* The card's two figures sit side by side down to here; below it they would
     collide, so they stack. */
  .l-loan-card { padding: 16px; }
  .l-loan-card-figures { gap: 18px; }
}

/* At 320px the four-field details form pushed its own submit button below the
   fold. Tighten the vertical rhythm just at that size. */
@media (max-width: 360px) {
  .l-shell main { padding: 16px 12px 40px !important; }
  .l-title { font-size: 24px; }
  .l-subtitle { font-size: 17px; margin-top: 6px; }
  .l-shell .l-grid { gap: 10px; }
  .l-check { font-size: 16px; }
}

/* --- Wide screens -------------------------------------------------------- */
/* The content cap left 51-68% of a 1920-2560px screen empty. Widen the column
   and let the type grow a little rather than stranding the page in the middle. */

/* The personal area's content column (5.9, request 81): from 1200px the page
   uses more of the screen, so the sidebar and the content read as one grid
   instead of a narrow strip between wide margins. */
@media (min-width: 1200px) {
  .l-home-page.l-home-page { --app-max: min(1240px, calc(100vw - 96px)); }
}
@media (min-width: 1600px) {
  :root { --app-max: 1200px; }
  /* Doubled class: the base `.l-home-page { --app-max: 1120px }` sits LATER
     in this file, so a single class here silently loses the cascade and the
     widening never applied. */
  .l-home-page.l-home-page { --app-max: 1360px; }
  .l-home-page.is-office { --app-max: min(1680px, calc(100vw - 48px)); }
  /* The office desk is wider than the customer tabs, but re-centering the
     wider box made the sidebar jump ~300px on every tab switch. Anchor the
     inline-start (right, RTL) edge where the customer layout puts it and
     let the desk grow leftward only. !important beats main's inline style. */
  .l-home-page.is-office main,
  .l-home-page.is-office .l-home-hero-inner {
    max-width: min(1680px, calc((100% + 1280px) / 2 - 24px)) !important;
    margin-inline-start: calc((100% - 1280px) / 2) !important;
    margin-inline-end: auto !important;
  }
  .l-shell main { max-width: 1100px !important; }
  .l-body { font-size: 22px; }
}

/* Buttons should never be cut off on a small screen. */
.l-cta button,
.l-cta a { max-width: 100%; }

/* The hero CTA sits on navy. The kit's Button swaps orange to navy on hover,
   which made the primary action vanish exactly as the pointer reached it.
   Pin both states here; the kit sets these inline, so !important is required. */
.l-cta-hero button {
  background: var(--linder-orange) !important;
  /* Navy, not white: white on #F29A40 measures 2.21:1 and fails AA even for
     large text, which needs 3:1. Navy on the same orange measures 3.9:1 and
     the label is 19px bold, so it passes as large text. The brand orange
     itself is unchanged. */
  color: var(--linder-navy) !important;
  border: 2px solid transparent !important;
}
.l-cta-hero button:hover,
.l-cta-hero button:focus-visible {
  background: #fff !important;
  color: var(--linder-navy) !important;
}

/* --- Comparison bars ----------------------------------------------------- */

.l-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr 76px;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
@media (max-width: 560px) {
  .l-bar-row {
    grid-template-columns: 1fr 68px;
  }
  .l-bar-row .l-bar-track { grid-column: 1 / -1; }
}
.l-bar-track { background: var(--gray-200); height: 24px; }
.l-bar-fill { height: 100%; }
/* Inside the personal area between 800 and 1023px the main column sits beside
   the sidebar and a two-up pair is ~224px a side: the bar row's own minimum
   (label, gap, value) is wider than that and its value spilled 1px past the
   left edge of the page. One column for the pair there; the phone and the wide
   desk are unchanged. */
@media (min-width: 800px) and (max-width: 1023.98px) {
  .l-home-main .l-pair { grid-template-columns: minmax(0, 1fr); }
}

/* --- Waiting-screen headlines -------------------------------------------- */

/* Counts down the seven seconds a headline is shown, so the change of headline
   has a visible run-up instead of arriving out of nowhere. Restarted per
   headline by keying the element on the index. */
@keyframes l-news-tick {
  from { width: 100%; }
  to { width: 0%; }
}

/* Someone who has asked their system not to animate gets the headlines without
   the bar moving; the rotation itself still happens. */
@media (prefers-reduced-motion: reduce) {
  [style*="l-news-tick"] { animation: none !important; width: 100% !important; }
}

/* --- Marketing home ------------------------------------------------------ */

/* Green as TEXT. The brand green #74C166 measures 2.2:1 on white, so it is
   kept for fills (gauge bands, swatches, rules) and this darker ink, 7.1:1,
   is used wherever green has to be read as words. */
:root { --linder-green-ink: #2C6424; }

.l-home {
  min-height: 100vh;
  background: #fff;
  font-family: var(--font-display);
  color: var(--linder-navy);
}
/* The one site header (2.9, request 50), on the home page, the check route
   and the personal area alike: a white bar across the screen with a thin navy
   rule under it. The inline padding is what centres the content: it grows
   with the viewport so the mark and the controls sit inside a 1120px column
   in the middle of the page and never touch the edges. */
.l-home-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 12px max(20px, calc((100vw - 1120px) / 2));
  background: #fff;
  border-bottom: 2px solid var(--linder-navy);
  position: relative;
}
.l-home-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  width: 100%;
}
.l-home-brand-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  /* The two ends of the desk row share the room the centred links leave, so
     the links sit on the page's own centre once there is room for both ends
     (about 1200px and up), and stay balanced between the ends below that
     (8.9, request 91). */
  flex: 1 1 0;
  min-width: max-content;
}
/* Sticky on a desk, where a tall page means the primary action would otherwise
   scroll away. NOT on a phone: there the bar would eat a fifth of a short
   viewport for the whole visit. */
@media (min-width: 801px) {
  .l-home-header {
    position: sticky;
    top: 0;
    z-index: 40;
    /* The bar carries a 72px mark and a 44px control row; 8px of breathing
       room keeps it a bar rather than a band. */
    padding-block: 8px;
  }
  /* A sticky bar hides whatever an in-page jump scrolls to unless the root
     reserves its height. Since 8.9 (request 90) the bar is one row again:
     8px + the 81px mark + 8px = 97px on a wide desk, and the offset sits a
     little under it. The 801 to 1080 band, whose mark is 70px, sets its own. */
  html { scroll-padding-top: 106px; }
  .l-sec[id] { scroll-margin-top: 106px; }
  /* The personal-area button is the phone's; on a desk "האזור האישי" is an
     ordinary item in the section row (8.9, request 90). */
  .l-hd-btn.l-hd-phone-only { display: none; }
}
.l-home-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-width: 0;
}
/* 25% up from the previous 46px. Large enough to read as the brand, short
   enough that the bar stays a bar. */
.l-home-brand { --logo-h: var(--logo-home); }
.l-home-brand img {
  width: auto;
  display: block;
  /* The width/height attributes on the element reserve the box before the PNG
     arrives; this keeps the rendered size driven by the height above. */
  aspect-ratio: 835 / 384;
}
.l-home-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 0;
  min-width: max-content;
}
/* Five home-page section links, RTL, sitting in the header's one row between
   the mark and the actions and centred in whatever room the two ends leave
   (8.9, request 90). Quiet text links since 8.9 (request 91): no rule between
   them, no frame and no box around them, even gaps, and a thin orange
   underline that marks the current section and the hovered one. Desk only; a
   phone uses the compact menu instead of squeezing the five titles into a
   row. */
.l-hd-sections {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 0 1 auto;
  box-sizing: border-box;
}
.l-hd-section-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--linder-navy);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}
.l-hd-section-link::after {
  content: '';
  position: absolute;
  inset-inline: 10px;
  bottom: 7px;
  height: 2px;
  background: transparent;
}
.l-hd-section-link:hover::after,
.l-hd-section-link:focus-visible::after,
.l-hd-section-link[aria-current="true"]::after {
  background: var(--linder-orange);
}
.l-hd-section-link[aria-current="true"] {
  color: var(--linder-orange);
}
.l-hd-section-link:focus-visible {
  outline: 3px solid var(--linder-orange);
  outline-offset: 2px;
}
.l-hd-btn.l-hd-menu-toggle { display: none; }
.l-hd-menu-panel { display: none; }
.l-hd-menu-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
}
.l-hd-menu-bars span {
  display: block;
  height: 2px;
  background: currentColor;
}
/* The five header controls share one definition, so height, corners, glyph
   size and inner spacing are identical whether the control is a <button> or an
   <a>. Square corners and no shadow, per the brand rules. */
.l-hd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 2px solid var(--linder-navy);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  color: var(--linder-navy);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.l-hd-btn .l-home-side-icon,
.l-hd-btn .l-act-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: currentColor;
}
.l-hd-btn.is-primary {
  background: var(--linder-orange);
  border-color: var(--linder-orange);
  /* Same measurement as the hero CTA: white on this orange is 2.21:1. */
  color: var(--linder-navy);
}
.l-hd-btn.is-primary:hover,
.l-hd-btn.is-primary:active {
  background: var(--linder-navy);
  border-color: var(--linder-navy);
  /* The ground turns navy on hover, so the label has to turn white with it. */
  color: #fff;
}
.l-hd-btn.is-secondary:hover,
.l-hd-btn.is-secondary:active,
.l-hd-btn.is-contact:hover,
.l-hd-btn.is-contact:active {
  background: var(--linder-navy);
  color: #fff;
}
/* Contact controls carry less visual weight than the two decisions beside
   them: a hairline instead of the 2px rule, same box, same height. */
.l-hd-btn.is-contact {
  border-width: 1px;
  border-color: var(--gray-300);
  font-weight: normal;
  padding: 0 12px;
}
.l-hd-btn.is-contact:hover,
.l-hd-btn.is-contact:active { border-color: var(--linder-navy); }
.l-hd-btn:focus-visible {
  outline: 3px solid var(--linder-orange);
  outline-offset: 2px;
}
.l-hd-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 8px;
  flex-wrap: nowrap;
  flex: none;
}
/* Header contacts are icons only, at every width: the phone, WhatsApp and
   mail share one 44px plate, and the number/address live in the aria-label
   rather than as a second copy of the same fact. */
.l-hd-contact .l-contact-btn {
  width: 44px;
  min-width: 44px;
  padding: 0;
}
.l-hd-contact .l-hd-label { display: none; }
.l-hd-label { direction: inherit; }
.l-hd-label bdi { direction: ltr; unicode-bidi: isolate; }
/* Less air above and below the hero since 8.9 (request 91): 40px on a phone,
   64px on a wide desk (was 54 to 97). */
.l-hero {
  position: relative;
  overflow: hidden;
  background: var(--linder-navy);
  color: #fff;
  padding: clamp(40px, 5.2vw, 64px) 20px;
}
.l-hero-wash {
  position: absolute;
  inset-inline-end: -9%;
  bottom: -28%;
  width: min(66vw, 760px);
  opacity: 0.13;
  pointer-events: none;
}
.l-hero-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
  gap: 40px 56px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}
.l-hero-copy { text-align: start; }
.l-hero-eyebrow { color: var(--linder-orange); }

/* Brand line above the headline: the firm and its promise, one quiet line.
   Words stay white on the navy band (orange at this size falls under AA);
   the separator alone carries the accent. */
/* Two parts, one mark, one axis. `align-items: center` rather than baseline:
   the mark is a 0.95em bar, and mixing a baseline row with a centred bar left
   it sitting three pixels below the words. Both parts are the same size, so
   centring them is also their shared baseline. */
.l-hero-brandline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin: 0 0 14px;
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 100;
  line-height: 1.3;
  color: #fff;
}
.l-hero-brandline b { font-weight: bold; font-size: max(1em, 19px); }
.l-hero-brandline > * {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* Flex, not inline text: as inline-blocks the separators sat low on the
   baseline and read as stray commas between the phrases, and a wrap could
   strand one at the end of a line. As flex items they stay centred on the row
   and wrap with their text. */
/* Three items of equal weight on one axis. */
.l-hero-reassure-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 100;
  line-height: 1.3;
  color: #fff;
  opacity: 0.9;
}
.l-hero-reassure-line > * {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* The brand font ships no glyph for "|" and only a hairline "\00B7", so every
   mark is drawn as a flat orange rule instead of a typed character. It is a
   pseudo-element on the part that FOLLOWS it, not an element between parts:
   as a sibling a wrap could leave the mark alone at the start of a line, and
   there is no way to hide it from CSS once it is there. */
.l-hero-brandline > * + *::before,
.l-hero-reassure-line > * + *::before {
  content: '';
  flex: none;
  width: 2px;
  height: 0.95em;
  background: var(--linder-orange);
}
.l-hero-title span {
  color: var(--linder-orange);
  font-weight: 100;
}
.l-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.l-hero-actions > span {
  font-size: 17px;
  font-weight: 100;
}
.l-hero-reassure {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.l-hero-reassure-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 16px;
  font-weight: 100;
  line-height: 1.2;
}
.l-hero-reassure-item + .l-hero-reassure-item {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.28);
}
.l-hero-reassure-item img {
  width: 18px;
  height: auto;
  flex-shrink: 0;
}
.l-hero-reassure-item b {
  color: var(--linder-orange);
  font-weight: bold;
}
.l-hero-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  text-align: center;
  animation: l-tagline-enter 0.95s ease-out both;
}
.l-hero-tagline-rays {
  width: 52px;
  height: auto;
  flex-shrink: 0;
  transform-origin: 100% 100%;
  animation: l-tagline-rays 6.5s ease-in-out 0.25s infinite;
}
.l-hero-tagline p {
  margin: 0;
  font-size: clamp(17px, 2.4vw, 22px);
  line-height: 1.25;
  font-weight: 100;
  animation: l-tagline-float 5.5s ease-in-out 0.95s infinite;
}
.l-hero-tagline b {
  font-weight: bold;
}
.l-hero-tagline-dot {
  display: inline-block;
  color: var(--linder-orange);
  animation: l-tagline-dot 2.4s ease-in-out infinite;
}
.l-hero-tagline-accent {
  display: inline-block;
  color: var(--linder-orange);
  font-weight: bold;
  animation: l-tagline-accent 3.2s ease-in-out infinite;
}
.l-hero-back {
  font-size: 18px;
  font-weight: 100;
  margin-top: 20px;
}

.l-account-signin {
  display: flex;
  align-items: stretch;
  border: 3px solid var(--linder-indigo);
  background: #fff;
  overflow: hidden;
}
.l-account-signin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: var(--linder-navy);
  color: #fff;
  flex-shrink: 0;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.22);
}
.l-account-signin-rays {
  width: 44px;
  height: auto;
  flex-shrink: 0;
  transform-origin: 100% 100%;
  animation: l-tagline-rays 6.5s ease-in-out infinite;
}
.l-account-signin-brand b {
  display: block;
  font-size: 19px;
  line-height: 1.2;
}
.l-account-signin-brand span {
  display: block;
  font-size: 15px;
  font-weight: 100;
  opacity: 0.9;
  margin-top: 2px;
}
.l-account-signin-perks {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.l-account-signin-perks li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 14px 18px;
  text-align: center;
  border-inline-start: 1px solid var(--gray-300);
}
.l-account-signin-perks b {
  color: var(--linder-navy);
  font-size: 15px;
}
.l-account-signin-perks span {
  font-size: 16px;
  font-weight: 100;
  color: var(--gray-700);
}
.l-account-signin-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  background: var(--surface-tint);
  flex-shrink: 0;
  border-inline-start: 1px solid var(--gray-300);
  min-width: 240px;
}
.l-account-auth-error {
  margin-bottom: 18px;
  padding: 12px 16px;
  border-inline-start: 4px solid var(--linder-orange);
  background: #fff;
  border-top: 1px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
  border-inline-end: 1px solid var(--gray-300);
  font-size: 18px;
  font-weight: 100;
  color: var(--gray-700);
}

.l-home-hero {
  background: transparent;
  color: var(--linder-navy);
}
.l-home-hero-inner {
  max-width: var(--app-max);
  margin: 0 auto;
  padding: 12px 20px 16px;
}
/* Greeting on the page background, immediately under the navy brand band,
   start-aligned (right in RTL). The user menu sits at the inline end and
   does not share the greeting's colour or sit inside the navy strip. */
.l-home-hero-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.l-home-hero-copy { grid-column: 1; min-width: 0; text-align: start; }
.l-hero-gear-wrap { position: relative; grid-column: 2; justify-self: end; }
/* The compact account strip (5.9, request 83): one quiet action beside the
   greeting, sign-out when connected, the way in when not. */
.l-acct-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--linder-navy);
  background: #fff;
  color: var(--linder-navy);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.l-acct-btn .l-home-side-icon { width: 20px; height: 20px; color: var(--linder-navy); }
.l-acct-btn:hover { border-color: var(--linder-orange); color: var(--linder-orange-500); }
.l-acct-btn:hover .l-home-side-icon { color: var(--linder-orange-500); }
.l-acct-btn:focus-visible { outline: 2px solid var(--linder-orange); outline-offset: 2px; }
.l-acct-btn.is-in { background: var(--linder-navy); color: #fff; }
.l-acct-btn.is-in .l-home-side-icon { color: #fff; }
.l-acct-btn.is-in:hover { background: var(--linder-orange); border-color: var(--linder-orange); color: var(--linder-navy); }
.l-acct-btn.is-in:hover .l-home-side-icon { color: var(--linder-navy); }
/* One line of text under the logo. At 26px on a 320px phone it takes about
   275px of the 288 available, so the line holds on every phone width. */
.l-home-hero-title {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--linder-navy);
}
.l-home-hero-hello {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--linder-navy);
  overflow-wrap: anywhere;
  text-align: start;
}
/* The fixed title under the greeting (5.9, request 82): a line, not a second
   heading, so every panel still has exactly one h2 of its own. */
.l-home-hero-home { margin: 4px 0 0; font-size: 18px; font-weight: 100; color: var(--gray-700); text-align: start; }
/* The desk-only "פעולות" and "הגדרות" sidebar items; the phone's raised
   middle button and its bottom bar are their twins (7.9, request 88). */
.l-actions-panel .l-mnav-actions { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.l-actions-panel .l-drawer-row { width: 100%; text-align: start; font: inherit; }
@media (max-width: 799.98px) { .l-home-side-item.l-desk-only { display: none; } }
/* The office desk keeps the navy title block and the centred three-column
   row: that surface is not the customer greeting. */
.l-home-page.is-office .l-home-hero {
  background: var(--linder-navy);
  color: #fff;
}
.l-home-page.is-office .l-home-hero-bar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.l-home-page.is-office .l-home-hero-copy { grid-column: 2; text-align: center; }
.l-home-page.is-office .l-hero-gear-wrap { grid-column: 3; }
.l-home-page.is-office .l-home-hero-title { color: #fff; }
.l-home-hero-phone {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  direction: ltr;
}
.l-office-link-on-navy,
.l-linkbtn-on-navy {
  color: #fff;
  border-color: #fff;
}
.l-office-link-on-navy:hover,
.l-linkbtn-on-navy:hover {
  color: var(--linder-orange);
  border-color: var(--linder-orange);
}
.l-home-page { --app-max: 1120px; }
.l-home-layout {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.l-home-nav { min-width: 0; }
.l-home-nav-toggle { display: none; }
.l-home-side {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding-block-end: 2px;
}
.l-home-side-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  white-space: nowrap;
  font: inherit;
  font-size: 18px;
  font-weight: 100;
  color: var(--gray-700);
  background: #fff;
  border: none;
  border-inline: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.l-home-side-item:hover {
  color: var(--linder-navy);
  border-inline-color: var(--linder-navy);
}
.l-home-side-item.is-active {
  background: var(--linder-navy);
  color: #fff;
  font-weight: 800;
  border-inline-color: var(--linder-navy);
}
.l-home-side-item.is-active:hover { color: #fff; }
.l-home-side-item.is-active:focus-visible { outline-color: #fff; }
.l-home-side-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--linder-navy);
}
.l-home-side-item.is-active .l-home-side-icon { color: var(--linder-orange); }
.l-home-side-item.is-special {
  color: var(--linder-navy);
  font-weight: 800;
  border-inline-color: var(--linder-orange);
}
.l-home-side-item.is-special .l-home-side-icon { color: var(--linder-orange); }
.l-home-side-item.is-special:hover {
  color: var(--linder-navy);
  border-inline-color: var(--linder-orange);
}
.l-home-side-item.is-special.is-active {
  background: var(--linder-navy);
  color: #fff;
  border-inline-color: var(--linder-orange);
}
.l-home-side-item.is-special.is-active .l-home-side-icon { color: var(--linder-orange); }
.l-home-side-rule {
  width: 0;
  align-self: stretch;
  border: 0;
  border-inline-start: 2px solid var(--gray-200);
  margin-inline: 4px;
}
.l-home-main { min-width: 0; flex: 1; }
.l-home-main .l-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.l-home-main .l-section-title::before {
  content: "";
  width: 6px;
  height: 1.05em;
  background: var(--linder-orange);
  flex-shrink: 0;
}
@media (max-width: 799.98px) {
  .l-home-page { overflow-x: clip; }
  .l-home-layout { overflow: visible; }
  .l-home-nav {
    position: relative;
    z-index: 5;
  }
  .l-home-nav-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 10px 14px;
    font: inherit;
    text-align: start;
    color: var(--linder-navy);
    background: #fff;
    border: 0;
    border-inline-start: 4px solid var(--linder-orange);
    cursor: pointer;
  }
  .l-home-nav-toggle:hover { color: var(--linder-navy); }
  .l-home-nav-toggle.is-open {
    border-block-end: 2px solid var(--gray-200);
  }
  .l-home-nav-burger {
    position: relative;
    width: 22px;
    height: 16px;
    flex-shrink: 0;
  }
  .l-home-nav-burger span {
    position: absolute;
    inset-inline: 0;
    height: 2px;
    background: currentColor;
  }
  .l-home-nav-burger span:nth-child(1) { top: 0; }
  .l-home-nav-burger span:nth-child(2) { top: 7px; }
  .l-home-nav-burger span:nth-child(3) { bottom: 0; }
  .l-home-nav-toggle.is-open .l-home-nav-burger span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }
  .l-home-nav-toggle.is-open .l-home-nav-burger span:nth-child(2) { opacity: 0; }
  .l-home-nav-toggle.is-open .l-home-nav-burger span:nth-child(3) {
    bottom: auto;
    top: 7px;
    transform: rotate(-45deg);
  }
  .l-home-nav-toggle-text {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1px;
    flex: 1;
    min-width: 0;
  }
  .l-home-nav-kicker {
    font-size: 13px;
    font-weight: 800;
    color: var(--linder-orange);
  }
  .l-home-nav-toggle.is-open .l-home-nav-kicker { color: var(--linder-orange); }
  .l-home-nav-current {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .l-home-side {
    display: none;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding: 0;
    position: static;
    width: auto;
    max-width: none;
    background: #fff;
  }
  .l-home-side.is-open {
    display: flex;
  }
  .l-home-side-item { width: 100%; white-space: normal; }
  .l-home-side-rule {
    width: 100%;
    height: 0;
    align-self: auto;
    border-inline-start: 0;
    border-top: 2px solid var(--gray-200);
    margin: 8px 0;
  }
}

@media (min-width: 800px) {
  .l-home-layout {
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
  }
  .l-home-nav {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 16px;
    display: flex;
    align-self: stretch;
  }
  .l-home-side {
    flex-direction: column;
    width: 260px;
    overflow: visible;
    flex: 1;
    min-height: calc(100vh - 220px);
  }
  .l-home-side-item { width: 100%; }
  .l-home-side-rule {
    width: 100%;
    height: 0;
    align-self: auto;
    border-inline-start: 0;
    border-top: 2px solid var(--gray-200);
    margin: 8px 0;
  }
  /* No foot (7.9, request 88): the five destinations are one group at the top. */
}

@media (prefers-reduced-motion: no-preference) {
  .l-home-nav-burger span {
    transition: transform 0.16s ease, opacity 0.16s ease, top 0.16s ease;
  }
}
.l-office-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  color: var(--linder-navy);
  text-decoration: none;
  border-inline: 2px solid var(--linder-navy);
}
.l-office-link:hover { color: var(--linder-orange); border-color: var(--linder-orange); }
.l-checks-page { display: flex; flex-direction: column; gap: 16px; }
.l-checks-head {
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 16px 18px 14px;
}
.l-checks-head .l-section-title { margin: 0 0 12px; }
.l-check-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.l-check-filter {
  appearance: none;
  font: inherit;
  font-size: 16px;
  font-weight: 100;
  background: #fff;
  color: var(--linder-navy);
  border: 1px solid var(--gray-300);
  padding: 8px 14px;
  min-height: 44px;
  cursor: pointer;
  border-radius: 0;
  /* Icon plus label, one uniform glyph size across every chip. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.l-check-filter .l-act-icon,
.l-check-filter .l-home-side-icon { width: 22px; height: 22px; flex-shrink: 0; }
/* The chosen filter inverts to navy; its glyph flattens to white with it. */
.l-check-filter.is-on {
  background: var(--linder-navy);
  color: #fff;
  border-color: var(--linder-navy);
  font-weight: 800;
}
.l-checks-list { display: flex; flex-direction: column; gap: 16px; }
.l-checks-empty {
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 20px 18px;
  margin: 0;
}
.l-mortgage-hero {
  padding: 28px 24px;
}
.l-mortgage-hero-kicker {
  font-size: 16px;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.72);
}
.l-mortgage-hero-balance {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 4px;
}
.l-mortgage-hero-note,
.l-mortgage-hero-label {
  font-size: 16px;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.72);
}
.l-mortgage-hero-value {
  font-size: 22px;
  font-weight: 800;
  margin-top: 4px;
}
.l-mortgage-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 16px;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.82);
}
.l-saving-callout {
  margin-top: 16px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--linder-orange) 12%, #fff);
  border: 1px solid var(--linder-orange);
}
.l-mortgage-card-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.l-mortgage-card-bar .l-mortgage-card-head,
.l-mortgage-card-bar .l-mortgage-loan-head {
  flex: 1;
  min-width: 0;
}
/* A quiet destructive action: text-only at rest so it never competes with the
   primary CTAs, turning to the danger tone (deep orange, the palette's error
   color) only on hover/focus. Deletion itself still goes through ConfirmDelete. */
.l-delete-btn {
  flex-shrink: 0;
  align-self: center;
  margin: 0;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--gray-700);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 100;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  /* Glyph over label, sized to the bottom bar's rhythm so both action rows in
     the product read as one system: big glyph, small quiet label. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.15;
}
.l-delete-btn:hover {
  color: var(--linder-orange-500);
  background: color-mix(in srgb, var(--linder-orange-500) 8%, #fff);
}
/* Standalone (not in a card bar): a regular bordered button, glyph first,
   full-size label. The column layout is for the narrow end caps only. */
.l-delete-btn.is-inline {
  flex-direction: row;
  gap: 10px;
  padding: 10px 18px;
  font-size: 18px;
  background: #fff;
  border: 1px solid var(--gray-300);
  color: var(--linder-orange-500);
}
.l-delete-btn.is-inline .l-act-icon { width: 22px !important; height: 22px !important; }
.l-delete-btn.is-inline:hover { border-color: var(--linder-orange-500); }
.l-delete-btn:focus-visible {
  outline: 2px solid var(--linder-navy);
  outline-offset: -2px;
}
/* Inside a card bar the button becomes a full-height end cap at the inline
   end, split from the expand toggle by a hairline so the destructive action
   reads as its own zone and is harder to hit by accident. */
.l-mortgage-card-bar .l-delete-btn {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  min-width: 68px;
  border-inline-start: 1px solid var(--gray-200);
}
.l-confirm {
  border: 2px solid var(--linder-navy);
  background: #fff;
  padding: 14px 16px;
  border-radius: 0;
}
.l-confirm-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--linder-navy);
  margin-bottom: 8px;
}
.l-confirm-body {
  font-size: 17px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.l-mortgage-card-head {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: start;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.l-mortgage-card-head .l-mortgage-card-main {
  padding: 16px 18px;
}
.l-mortgage-card-head:hover { background: var(--surface-soft); }
.l-mortgage-card-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--linder-navy);
}
/* The count line: context under the bank name, above the money. */
.l-mortgage-card-sub {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 100;
  color: var(--gray-700);
  line-height: 1.3;
}
.l-mortgage-card-main { min-width: 0; flex: 1; }
.l-mortgage-card-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.l-mortgage-card-fact-label {
  font-size: 15px;
  font-weight: 100;
  color: var(--gray-700);
}
.l-mortgage-card-fact-value {
  font-family: var(--font-numeric);
  font-size: 22px;
  font-weight: 800;
  color: var(--linder-navy);
  margin-top: 4px;
  line-height: 1.15;
}
.l-mortgage-card-fact.is-secondary .l-mortgage-card-fact-value {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 100;
  color: var(--gray-700);
}
@media (max-width: 620px) {
  .l-mortgage-card-facts { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  /* On the narrowest phones the card bar kept the summary and the delete
     control on one nowrap row, which squeezed the figures column to 106px
     while its own two columns needed 140. The actions drop to their own row
     instead, and the numbers get the full card width. */
  .l-mortgage-card-bar { flex-wrap: wrap; }
  .l-mortgage-card-bar .l-mortgage-card-head,
  .l-mortgage-card-bar .l-mortgage-loan-head { flex: 1 1 100%; }
  .l-mortgage-card-bar .l-delete-btn { flex: 1 1 100%; }
}
/* Same chrome as .l-delete-btn in the card bar (44px, 16px type, 18px
   inline pad) so פירוט/סגירה and מחיקה sit as a matching pair of end caps.
   Navy instead of the delete gray/orange, so expand stays a navigation
   action and delete stays the quiet destructive one. */
.l-mortgage-card-toggle {
  flex-shrink: 0;
  align-self: stretch;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.15;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0 18px;
  border-inline-start: 1px solid var(--gray-200);
  font-family: var(--font-display);
  font-weight: 100;
  color: var(--linder-navy);
  min-height: 44px;
  min-width: 68px;
}
.l-mortgage-card-body {
  padding: 0 18px 18px;
  background: var(--surface-soft);
  border-top: 1px solid var(--gray-200);
}
.l-mortgage-loans {
  background: #fff;
  border: 1px solid var(--gray-200);
}
.l-mortgage-loan-head {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: start;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.l-mortgage-loan-head .l-mortgage-card-main {
  padding: 14px 16px;
}
.l-mortgage-loan-head:hover { background: var(--surface-soft); }
.l-mortgage-loan-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--linder-navy);
}
.l-mortgage-loan-body {
  padding: 0 16px 16px;
  background: var(--surface-soft);
  border-top: 1px solid var(--gray-200);
}
.l-mortgage-loan .l-mortgage-card-facts {
  margin-top: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.l-mortgage-loan .l-mortgage-card-fact-value { font-size: 20px; }
@media (max-width: 620px) {
  .l-mortgage-loan .l-mortgage-card-facts { grid-template-columns: 1fr 1fr; }
}
.l-check-card {
  background: #fff;
  border: 1px solid var(--gray-200);
}
.l-check-card-head {
  padding: 16px 18px 14px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--gray-200);
}
.l-check-head-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--linder-navy);
  line-height: 1.3;
}
.l-check-head-rec {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 100;
  color: var(--gray-700);
  line-height: 1.4;
}
.l-check-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--gray-200);
}
.l-check-stat {
  padding: 10px 14px;
  border-inline-end: 1px solid var(--gray-200);
}
.l-check-stat:last-child { border-inline-end: none; }
.l-check-stat-label {
  font-size: 14px;
  font-weight: 100;
  color: var(--gray-700);
}
.l-check-stat-value {
  font-family: var(--font-numeric);
  font-size: 20px;
  font-weight: 800;
  color: var(--linder-navy);
  line-height: 1.25;
}
.l-check-head-note {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 100;
  color: var(--gray-700);
}
.l-check-head-note.is-old { color: var(--linder-orange-500); }
.l-check-files {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
}
.l-check-files-label {
  font-size: 15px;
  font-weight: 100;
  color: var(--gray-700);
}
.l-check-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 2px solid var(--linder-navy);
  background: #fff;
}
.l-check-foot-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.l-check-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.l-check-card-result {
  padding: 16px 18px 18px;
  background: var(--surface-soft);
  border-top: 1px solid var(--gray-200);
}
.l-doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.l-doc-actions-btns { gap: 6px; }
.l-doc-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 8px;
  border: 2px solid var(--linder-navy);
  background: #fff;
  color: var(--linder-navy);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}
.l-doc-action svg,
.l-doc-action .l-act-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.l-doc-action:focus-visible {
  outline: 2px solid var(--linder-orange);
  outline-offset: 2px;
}
.l-doc-action-primary {
  background: var(--linder-navy);
  color: #fff;
  border-color: var(--linder-navy);
}
.l-doc-action-primary:hover {
  background: var(--linder-orange);
  border-color: var(--linder-orange);
  color: var(--linder-navy);
}
.l-doc-action-accent {
  background: var(--linder-orange);
  color: var(--linder-navy);
  border-color: var(--linder-orange);
}
.l-doc-action-accent:hover {
  background: var(--linder-navy);
  border-color: var(--linder-navy);
  color: #fff;
}
.l-doc-action-sky {
  background: var(--linder-sky);
  color: var(--linder-navy);
  border-color: var(--linder-sky);
}
.l-doc-action-sky:hover {
  background: var(--linder-navy);
  border-color: var(--linder-navy);
  color: #fff;
}
.l-doc-action-secondary:hover {
  color: var(--linder-orange);
  border-color: var(--linder-orange);
}
.l-doc-action-danger {
  border-color: var(--gray-300);
  color: var(--gray-700);
  background: #fff;
  font-weight: 100;
}
.l-doc-action-danger:hover {
  color: var(--linder-orange-500);
  border-color: var(--linder-orange-500);
  background: color-mix(in srgb, var(--linder-orange-500) 8%, #fff);
}
.l-doc-action:disabled {
  opacity: 0.55;
  cursor: default;
}
.l-doc-edit { min-width: 220px; flex: 1; }
.l-home-doc-list { display: flex; flex-direction: column; gap: 12px; }
.l-home-doc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--gray-200);
}
.l-home-doc-copy { min-width: 0; flex: 1; }
.l-home-doc-title {
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: bold;
  line-height: 1.35;
  color: var(--linder-navy);
}
.l-home-doc-file {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 100;
  color: var(--gray-700);
  line-height: 1.35;
  word-break: break-word;
}
.l-home-doc-why {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 100;
  color: var(--linder-navy);
  line-height: 1.4;
}
.l-check-head-why {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 100;
  color: var(--linder-navy);
  line-height: 1.4;
}
.l-file-preview-why {
  background: #fff;
  border: 1px solid var(--linder-navy);
  padding: 12px 14px;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 100;
  color: var(--linder-navy);
  line-height: 1.4;
}
.l-home-doc-block {
  background: var(--surface-soft);
  border: 1px solid var(--gray-200);
}
.l-home-doc-block.is-open { border-color: var(--linder-navy); }
.l-home-doc-block.is-uncertain { border-color: var(--gray-300); }
.l-home-doc-block .l-home-doc-row {
  background: transparent;
  border: none;
}
.l-file-preview { padding: 0 14px 16px; border-top: 1px solid var(--gray-200); }
.l-file-miss { padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.l-file-miss-block {
  background: #fff;
  border: 2px solid var(--linder-navy);
  padding: 14px 16px;
}
.l-file-miss-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: bold;
  color: var(--linder-navy);
  margin-bottom: 10px;
}
.l-file-miss-facts { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.l-file-miss-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}
.l-file-miss-row dt {
  font-size: 15px;
  font-weight: 100;
  color: var(--gray-700);
}
.l-file-miss-row dd {
  margin: 0;
  font-size: 17px;
  font-weight: bold;
  color: var(--linder-navy);
  text-align: start;
}
.l-file-miss-why {
  margin: 0;
  font-size: 17px;
  font-weight: 100;
  color: var(--gray-700);
  line-height: 1.45;
}
.l-file-preview-scope { padding-top: 12px; }
.l-file-preview-loan { padding-top: 4px; }
.l-file-preview-loan > div { margin-bottom: 8px; }
.l-file-preview .l-stat-value { font-size: clamp(22px, 3.2vw, 36px); }
.l-file-preview-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 14px;
}
.l-file-preview-fact {
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 12px 14px;
}
.l-file-preview-fact-label {
  font-size: 15px;
  font-weight: 100;
  color: var(--gray-700);
}
.l-file-preview-fact-value {
  font-family: var(--font-numeric);
  font-size: 22px;
  font-weight: 800;
  color: var(--linder-navy);
  margin-top: 4px;
  line-height: 1.15;
}
.l-file-preview-fact.is-secondary .l-file-preview-fact-value {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 100;
  color: var(--gray-700);
}
.l-file-preview-status {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff;
  border-inline-start: 4px solid var(--linder-orange);
  color: var(--linder-navy);
  font-weight: bold;
}
.l-file-preview-status.is-keep { border-inline-start-color: var(--linder-navy); }
.l-file-preview-status.is-worth { border-inline-start-color: var(--linder-orange); }
.l-file-preview-meter { margin-top: 14px; }
.l-file-preview-meter-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  color: var(--gray-700);
}
.l-file-preview-meter-num {
  font-family: var(--font-numeric);
  font-size: 22px;
  font-weight: 800;
  color: var(--linder-navy);
}
.l-file-preview-meter-track {
  margin-top: 8px;
  height: 8px;
  background: #fff;
  border: 1px solid var(--gray-200);
}
.l-file-preview-meter-bar {
  height: 100%;
  background: var(--linder-orange);
}
@media (max-width: 720px) {
  .l-home-doc-row { flex-wrap: wrap; align-items: flex-start; }
  .l-home-doc-copy { flex: 1 1 100%; }
  /* Once the row wraps, the four file buttons get a line of their own — but
     .l-doc-actions is flex-shrink: 0, so it kept its 329px max-content width and
     hung 103px past the card on a 320px phone. Letting it shrink lets its own
     flex-wrap do the work and the buttons fall onto a second line. */
  .l-doc-actions { flex-shrink: 1; min-width: 0; }
  .l-file-preview-facts { grid-template-columns: 1fr 1fr; }
  .l-check-stats { grid-template-columns: 1fr 1fr; }
  .l-check-stat { border-inline-end: 1px solid var(--gray-200); }
  .l-check-stat:nth-child(2n) { border-inline-end: none; }
  .l-check-stat:nth-child(n+3) { border-top: 1px solid var(--gray-200); }
  .l-check-foot { flex-direction: column; align-items: stretch; }
  .l-check-foot-main { justify-content: flex-start; }
}
.l-check-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 19px;
  line-height: 1.35;
  cursor: pointer;
  min-height: 44px;
}
.l-check-label input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--linder-navy);
}

.l-results-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.l-results-cost-value {
  font-family: var(--font-numeric);
  font-weight: 900;
  font-size: 26px;
  color: var(--linder-navy);
  direction: ltr;
  text-align: left;
}

.l-result-teaser {
  position: relative;
  background: #fff;
  color: var(--linder-navy);
  border: 3px solid var(--linder-indigo);
  padding: 24px;
  transform: rotate(-1.5deg);
}
.l-result-teaser-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  font-size: 20px;
  font-weight: bold;
}
.l-result-teaser-top img {
  width: 82px;
  height: auto;
}
.l-result-question {
  font-family: var(--font-numeric);
  font-size: clamp(92px, 12vw, 150px);
  font-weight: 900;
  line-height: 0.8;
  color: var(--linder-orange);
  margin: 30px 0 26px;
}
/* The report preview names the score and what it checks, then lists what the
   report contains. No verdict words: the preview is not the answer. */
.l-result-head {
  padding: 14px 0 10px;
  border-top: 1px solid var(--gray-300);
  text-align: center;
}
.l-result-head b {
  display: block;
  color: var(--linder-navy);
  font-size: 20px;
  line-height: 1.2;
}
.l-result-head span {
  display: block;
  margin-top: 2px;
  color: var(--gray-700);
  font-size: 16px;
  font-weight: 100;
}
.l-result-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.l-result-lines li {
  padding: 9px 0;
  border-top: 1px solid var(--gray-300);
  color: var(--linder-navy);
  font-size: 17px;
  line-height: 1.3;
  overflow-wrap: break-word;
}
.l-result-seal {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 12px;
  background: #EDF6EA;
  color: #2C6424;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.3;
}
/* What the score is a score of, between its name and its explanation. */
.l-score-subtitle {
  margin: 6px 0 0;
  color: var(--linder-navy);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.l-rays { display: block; width: 100%; height: auto; }
.l-rays-fan {
  transform-origin: 0% 100%;
  animation: l-rays-breathe 9s ease-in-out infinite;
}
.l-rays-spin { width: min(220px, 70vw); margin-inline: auto; }
.l-rays-spin .l-rays-fan { animation-duration: 3.2s; }

/* ---- the six sections below the hero -------------------------------------
   One shell, one rhythm. Backgrounds alternate plain / tint down the page and
   the closing panel is the only dark one, so a reader never meets two blocks
   of the same colour in a row. */
.l-sec { padding: clamp(26px, 3.1vw, 40px) 20px; }
.l-sec.is-plain { background: #fff; }
.l-sec.is-tint { background: var(--surface-tint, #F8FFFF); }
.l-sec.is-ink { background: var(--linder-navy); color: #fff; }
.l-sec-inner {
  max-width: 1120px;
  margin: 0 auto;
}
/* A readable measure for the section's own words. In px on purpose: 46em
   here resolved against a 26px font, which is wider than the section itself,
   so the line length was never actually limited. */
.l-sec-head {
  max-width: 700px;
  margin: 0 auto clamp(16px, 1.9vw, 24px);
  text-align: center;
}
.l-sec-head:has(.l-sec-lead.is-statement) { margin-bottom: clamp(20px, 2.4vw, 30px); }
.l-sec-eyebrow {
  margin: 0 0 4px;
  color: var(--linder-orange-500, var(--linder-orange));
  font-size: 19px;
  font-weight: bold;
  line-height: 1.25;
}
.l-sec.is-ink .l-sec-eyebrow { color: var(--linder-orange); }
.l-sec-title {
  margin: 0;
  color: var(--linder-navy);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.l-sec.is-ink .l-sec-title { color: #fff; }
.l-sec-lead {
  margin: 9px auto 0;
  max-width: 44em;
  color: var(--gray-700);
  font-size: 19px;
  font-weight: 100;
  line-height: 1.5;
}
.l-sec.is-ink .l-sec-lead { color: #fff; opacity: 0.92; }
/* An opening line that carries the section rather than just introducing it:
   sized and weighted between the H2 above it and the card text below, on a
   narrower measure so it stays comfortable to read. */
.l-sec-lead.is-statement {
  margin-top: 11px;
  max-width: 36em;
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: normal;
  line-height: 1.6;
  color: var(--gray-700);
}

/* Four short items across on a desk, matching the services and anchor rows,
   so the three card sections read as one family. */
.l-outcome-body { flex: 1; }

/* --- the closing panel ----------------------------------------------------
   One soft light behind the headline gives the ending some weight without a
   card, a shadow or an animation. Pure CSS, no extra element to paint. */
.l-sec-close {
  position: relative;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(242, 154, 64, 0.22) 0%, rgba(242, 154, 64, 0) 62%),
    var(--linder-navy);
  padding-block: clamp(48px, 6vw, 76px);
}
/* The footer is the SAME navy and follows immediately, so this panel's bottom
   padding and the footer's top padding stack into one tall void with no edge to
   read: measured at 82px on a phone and 110px on a desk. The panel keeps its
   top padding (it separates two different colours) and gives most of the bottom
   back, so the join reads as one normal gap. */
.l-sec-close { padding-bottom: clamp(16px, 2.2vw, 28px); }
/* One brand rule across the top edge, the same orange the eyebrow uses. */
.l-sec-close::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--linder-orange);
}
.l-sec-close .l-sec-action { margin-top: clamp(22px, 2.6vw, 30px); }

/* The four secondary actions on the dark panel, in ONE grid: four equal
   columns on a desk, a true two by two on a phone. Equal rows keep both rows
   the same height even when one label wraps. */
.l-sec-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  max-width: 720px;
  margin: clamp(20px, 2.4vw, 26px) auto 0;
}
/* The header's button, inverted for a navy ground: it keeps the height, the
   square corners, the glyph size and the padding, and changes only colour. */
.l-hd-btn.is-onink {
  width: 100%;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  font-weight: normal;
}
.l-hd-btn.is-onink .l-home-side-icon { color: #fff; }
.l-hd-btn.is-onink:hover,
.l-hd-btn.is-onink:active {
  background: #fff;
  border-color: #fff;
  color: var(--linder-navy);
}
.l-hd-btn.is-onink:hover .l-home-side-icon,
.l-hd-btn.is-onink:active .l-home-side-icon { color: var(--linder-navy); }
.l-hd-btn.is-onink:focus-visible {
  outline: 3px solid var(--linder-orange);
  outline-offset: 3px;
}

@media (max-width: 800px) {
  /* Two by two rather than four squeezed across a phone. Each cell is still a
     full 44px target and the labels stay readable. */
  .l-sec-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 420px;
  }
  .l-hd-btn.is-onink { font-size: 17px; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .l-hd-btn.is-onink { transition: none; }
}

/* --- the shared contact row -----------------------------------------------
   One definition for the four office actions wherever they appear. Every
   button keeps the 44px height and the square corners of the header controls;
   only the colour changes between a light surface and the navy panels. */
.l-contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.l-contact-btn { flex: 0 0 auto; }
.l-contacts.is-onink {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
  margin: 12px auto 0;
}
.l-contacts.is-onink .l-contact-btn {
  width: 100%;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  font-weight: normal;
}
.l-contacts.is-onink .l-contact-btn .l-home-side-icon { color: #fff; }
.l-contacts.is-onink .l-contact-btn:hover,
.l-contacts.is-onink .l-contact-btn:active {
  background: #fff;
  border-color: #fff;
  color: var(--linder-navy);
}
.l-contacts.is-onink .l-contact-btn:hover .l-home-side-icon,
.l-contacts.is-onink .l-contact-btn:active .l-home-side-icon { color: var(--linder-navy); }
/* Inside the mobile menu the row stacks two by two. */
.l-contacts.is-drawer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.l-contacts.is-drawer .l-contact-btn { width: 100%; font-size: 17px; padding: 0 10px; }
/* On the result screen the row sits under the call button, centred. */
.l-contacts.is-plain {
  justify-content: center;
  margin-top: 14px;
}
@media (max-width: 800px) {
  /* Two by two, and the same cap on both, so the block stays centred and the
     four buttons stay one size. */
  .l-sec-actions,
  .l-contacts.is-onink {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 420px;
  }
  .l-sec-actions .l-hd-btn,
  .l-contacts.is-onink .l-contact-btn { font-size: 17px; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .l-contact-btn { transition: none; }
}

/* Section 3: four trust anchors, same card rhythm as the services row. */
.l-anchors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
}
.l-anchor {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
  padding: 22px 18px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-top: 3px solid var(--linder-orange);
}
/* The glyph box, whatever ends up inside it. A missing PNG falls back to an
   inline svg of its own size, which put one title 10px above the other two;
   sizing the slot rather than the image keeps the three baselines level. */
.l-anchor > :first-child {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  object-fit: contain;
}
.l-anchor h3 {
  margin: 0;
  color: var(--linder-navy);
  font-size: 21px;
  line-height: 1.2;
  overflow-wrap: break-word;
}
/* One measure for all three, so a shorter line still centres on the same
   column width and the block reads as one row rather than three ragged ones. */
.l-anchor p {
  margin: 0;
  max-width: 30ch;
  margin-inline: auto;
  color: var(--gray-700);
  font-size: 17px;
  font-weight: 100;
  line-height: 1.45;
  overflow-wrap: break-word;
}

/* A single quiet line under a section's content. */
.l-sec-note {
  margin: 24px auto 0;
  max-width: 44em;
  text-align: center;
  color: var(--gray-700);
  font-size: 18px;
  font-weight: 100;
}
/* The one action a section may carry, always centred under its content. */
.l-sec-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 2.4vw, 28px);
}
.l-sec.is-ink { position: relative; overflow: hidden; }

/* The personal-area list is the section's content, so it is centred and
   capped rather than sitting in a two-column split. */

.l-sec .l-faq-box { max-width: 900px; margin-inline: auto; }

@media (max-width: 1080px) {
  .l-outcomes,
  /* Three items do not divide into two columns without an orphan, so the
     row stays whole until it becomes a single column below. */
  .l-anchors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 800px) {
  .l-outcomes,
  /* One column, on exactly the personal area's axes: the office asked for the
     two containers to line up, so no width cap of its own here. */
  .l-anchors { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .l-sec { padding-inline: 16px; }
  .l-sec-head { margin-bottom: 20px; }
  .l-sec-lead { font-size: 18px; }
}
.l-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
}
.l-route-stop {
  position: relative;
  padding: 22px 22px 24px;
}
.l-route-stop + .l-route-stop {
  border-inline-start: 1px solid var(--gray-300);
}
.l-route-stop img {
  width: 78px;
  height: auto;
  margin-bottom: 10px;
}
/* The step numerals sit on white. Brand orange #F29A40 on white measures
   2.21:1; the darker stop of the same brand gradient, #9B4F2E, measures
   5.91:1 and passes AA for normal text. The accent colour is unchanged
   everywhere it sits on navy. */
.l-route-number {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-end: 24px;
  font-family: var(--font-numeric);
  font-weight: 900;
  font-size: 44px;
  color: var(--linder-orange-500, var(--linder-orange));
  line-height: 0.9;
}
.l-route-stop h3 {
  margin: 0 0 8px;
  color: var(--linder-navy);
  font-size: 24px;
}
.l-route-stop p {
  margin: 0;
  color: var(--gray-700);
  font-size: 19px;
  font-weight: 100;
  line-height: 1.45;
}
.l-route-note {
  display: flex;
  align-items: baseline;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--surface-tint, #F8FFFF);
  border-inline-start: 5px solid var(--linder-orange);
  font-size: 18px;
}
.l-route-note span { font-weight: 100; }
/* Four tiles, two by two, every one the same height whatever its text length:
   the row stretches and each card fills it. */
.l-outcomes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
}
.l-outcome {
  display: flex;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-top: 3px solid var(--linder-navy);
}
.l-outcome-num {
  font-family: var(--font-numeric);
  color: var(--linder-orange-500, var(--linder-orange));
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  flex: none;
}
.l-outcome-body { min-width: 0; }
.l-outcome-body .l-act-icon { margin-bottom: 8px; }
.l-outcome h3 { margin: 0 0 4px; color: var(--linder-navy); font-size: 22px; line-height: 1.2; overflow-wrap: break-word; }
.l-outcome p { margin: 0; color: var(--gray-700); font-size: 17px; font-weight: 100; line-height: 1.4; overflow-wrap: break-word; }
/* The personal-area preview tiles and sign-in card (7.9, request 87) are
   styled at the end of the file, with the enquiry panel. */
/* Six services, three across, same card system as the tiles above. */
/* --- report preview -------------------------------------------------------
   The shape of the finished report, with no figures in it. Every value is a
   neutral bar, so nothing here can read as a promised amount. Flat surfaces,
   square corners, no gradient and no animation: it should look like a
   financial document, not like an advert for one. */
.l-demo { margin: 0; }
.l-demo-frame {
  max-width: 560px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-top: 3px solid var(--linder-navy);
  padding: 18px 20px 20px;
}
.l-demo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
}
.l-demo-doc { color: var(--linder-navy); font-size: 19px; font-weight: bold; }
.l-demo-tag {
  padding: 3px 9px;
  background: var(--surface-tint, #F8FFFF);
  border: 1px solid var(--linder-navy);
  color: var(--linder-navy);
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}
.l-demo-score { padding: 14px 0 12px; text-align: center; }
.l-demo-score b { display: block; color: var(--linder-navy); font-size: 20px; line-height: 1.2; }
.l-demo-score span { display: block; margin-top: 2px; color: var(--gray-700); font-size: 16px; font-weight: 100; }
/* The band strip the real gauge draws, without a number on it. */
.l-demo-gauge { display: flex; gap: 3px; margin: 10px auto 0; max-width: 260px; }
.l-demo-gauge i { flex: 1; height: 8px; }
.l-demo-gauge i:nth-child(1) { background: var(--linder-orange); }
.l-demo-gauge i:nth-child(2) { background: var(--linder-navy); }
.l-demo-gauge i:nth-child(3) { background: var(--linder-sky, #40C7F4); }
.l-demo-gauge i:nth-child(4) { background: var(--linder-green, #74C166); }
.l-demo-fields { margin: 0; padding: 0; }
.l-demo-fields > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--gray-200);
}
.l-demo-fields dt { color: var(--linder-navy); font-size: 17px; }
.l-demo-fields dd { margin: 0; }
/* A placeholder, deliberately not a number. */
.l-demo-bar { display: block; height: 10px; background: var(--gray-200); }
.l-demo-bar.is-wide { width: 108px; }
.l-demo-bar.is-mid { width: 78px; }
.l-demo-bar.is-narrow { width: 52px; }
.l-demo-verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200);
}
.l-demo-chip {
  padding: 5px 10px;
  background: var(--surface-tint, #F8FFFF);
  border: 1px solid var(--gray-300);
  color: var(--linder-navy);
  font-size: 15px;
}
.l-demo-cap {
  margin: 12px auto 0;
  max-width: 560px;
  color: var(--gray-700);
  font-size: 15px;
  font-weight: 100;
  line-height: 1.45;
  text-align: center;
}

/* --- mobile action bar ----------------------------------------------------
   Phone only, one action, and only while no real check button is on screen.
   It respects the safe area and the page reserves its height at the end, so it
   never covers the footer. */
.l-mobar { display: none; }
@media (max-width: 800px) {
  .l-mobar {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--gray-300);
    transform: translateY(110%);
    transition: transform 0.2s ease;
  }
  .l-mobar.is-on { transform: translateY(0); }
  .l-mobar-btn {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    background: var(--linder-orange);
    border: 2px solid var(--linder-orange);
    border-radius: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: bold;
    cursor: pointer;
  }
  .l-mobar-btn:active { background: var(--linder-navy); border-color: var(--linder-navy); }
  .l-mobar-btn:focus-visible { outline: 3px solid var(--linder-navy); outline-offset: 2px; }
  /* Room at the very end so the bar can never sit on the last footer row. */
}
@media (prefers-reduced-motion: reduce) {
  .l-mobar { transition: none; }
}

/* --- the two blocks read as different things ------------------------------
   The personal area is a product you own: navy-topped tiles, like the report.
   The office services are work the firm does for you: orange-topped cards. */
.l-area-tile { border-top-color: var(--linder-navy); }
.l-service { border-top-color: var(--linder-orange); }

.l-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
}
/* The qualifier is part of the card and readable: same colour as the body
   text, marked with a short brand rule, never shrunk into fine print. */
.l-service-note {
  margin: 0 0 4px;
  color: var(--gray-700);
  font-size: 15px;
  font-weight: normal;
  line-height: 1.4;
  border-inline-start: 3px solid var(--linder-orange);
  padding-inline-start: 9px;
  overflow-wrap: break-word;
}
/* Column layout with the action pushed to the bottom, so four cards with
   different text lengths still line their buttons up on one row. */
.l-service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-top: 3px solid var(--linder-orange);
}
.l-service h3 {
  margin: 0;
  color: var(--linder-navy);
  font-size: 22px;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.l-service p {
  margin: 0 0 6px;
  color: var(--gray-700);
  font-size: 17px;
  font-weight: 100;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.l-service > button { margin-top: auto; }

/* --- shared service form -------------------------------------------------- */
.l-svc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
  text-align: start;
}
.l-svc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 18px;
  color: var(--linder-navy);
}
.l-svc-field input {
  min-height: 46px;
  box-sizing: border-box;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 0;
  font: inherit;
  font-size: 19px;
  color: var(--linder-navy);
}
.l-svc-field input:focus-visible {
  outline: 2px solid var(--linder-orange);
  outline-offset: 1px;
}

/* --- teaser foot: the one personal-area entry in the opening area --------- */
.l-teaser-area {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-300);
}
.l-teaser-area p {
  margin: 0 0 12px;
  color: var(--gray-700);
  font-size: 16px;
  font-weight: 100;
  line-height: 1.35;
}

.l-faq-box {
  background: #fff;
  border-top: 2px solid var(--linder-navy);
  border-bottom: 2px solid var(--linder-navy);
  padding: 0 20px;
}
.l-faq-list { font-family: var(--font-display); }
.l-faq-item + .l-faq-item { border-top: 1px solid var(--gray-200); }
.l-faq-heading { margin: 0; font: inherit; font-weight: inherit; }
.l-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 68px;
  box-sizing: border-box;
  padding: 14px 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--linder-navy);
  text-align: start;
  cursor: pointer;
}
.l-faq-q {
  flex: 1;
  min-width: 0;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.25;
  overflow-wrap: break-word;
  transition: color 0.2s ease;
}
.l-faq-trigger:hover .l-faq-q,
.l-faq-item.is-open .l-faq-q { color: var(--linder-orange); }
.l-faq-trigger:focus-visible {
  outline: 2px solid var(--linder-orange);
  outline-offset: 2px;
}
/* Sharp square, no radius and no shadow: the plus turns into a minus by
   rotating one bar out of the way when the row opens. */
.l-faq-mark {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--linder-navy);
  background: #fff;
  transition: background-color 0.24s ease, border-color 0.24s ease;
}
.l-faq-mark i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: var(--linder-navy);
  transition: transform 0.24s ease, background-color 0.24s ease;
}
.l-faq-mark i:last-child { transform: rotate(90deg); }
.l-faq-item.is-open .l-faq-mark {
  background: var(--linder-orange);
  border-color: var(--linder-orange);
}
.l-faq-item.is-open .l-faq-mark i { background: #fff; }
.l-faq-item.is-open .l-faq-mark i:last-child { transform: rotate(0deg); }
/* 0fr to 1fr animates the real content height without measuring it in JS.
   visibility keeps a closed answer out of the tab order and the a11y tree:
   delayed on close so it stays visible while collapsing, immediate on open. */
.l-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.l-faq-item.is-open .l-faq-panel { grid-template-rows: 1fr; }
.l-faq-panel > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s 0.28s;
}
.l-faq-item.is-open .l-faq-panel > div {
  visibility: visible;
  transition: visibility 0s 0s;
}
.l-faq-a {
  margin: 0;
  padding: 0 0 22px;
  max-width: 62ch;
  color: var(--gray-700);
  font-size: 19px;
  font-weight: 100;
  line-height: 1.55;
  overflow-wrap: break-word;
}
@media (min-width: 801px) and (max-width: 1080px) {
  .l-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Narrow desks: the three contact controls stay 44px icon squares, same as
     a wide desk (8.9, request 89). The group never splits into rows. */
  .l-home-brand { --logo-h: var(--logo-home-mid); }
  .l-hd-btn { font-size: 18px; padding: 0 12px; }
  .l-hd-btn.l-contact-btn { width: 44px; min-width: 44px; padding: 0; }
  .l-hd-btn.l-contact-btn .l-hd-label { display: none; }
  .l-hd-contact { flex-wrap: nowrap; flex: none; }
  .l-hd-section-link { font-size: 15px; padding: 0 8px; }
  /* 8px + the 70px mark + 8px = 86px bar. */
  html { scroll-padding-top: 96px; }
  .l-sec[id] { scroll-margin-top: 96px; }
}
/* The narrowest desks (801 to 960): tighter type and gaps for the check and
   the contact icons (8.9, request 90). */
@media (min-width: 801px) and (max-width: 960px) {
  .l-home-header { padding-inline: 16px; }
  .l-home-header-top { gap: 10px; }
  .l-hd-section-link { font-size: 14px; padding: 0 6px; }
  .l-hd-btn.is-primary { font-size: 16px; padding: 0 10px; gap: 0; }
  .l-hd-btn.is-primary .l-act-icon { display: none; }
  .l-hd-contact { margin-inline-start: 0; gap: 6px; }
}
/* Since the section names are the sections' own full names (8.9, request
   91), the five links need about 560px, which the row between the mark and
   the actions no longer has under 1040px. There the links take a centred row
   of their own under the mark row, each still a 44px target (tablets are
   touch screens), so nothing is crushed and nothing scrolls sideways; the bar
   is 8 + 70 + 44 + 8 = 130px plus the rule, and the section offset follows
   it. Wide desks keep the one row. */
@media (min-width: 801px) and (max-width: 1040px) {
  .l-home-header-top { flex-wrap: wrap; row-gap: 0; }
  .l-hd-sections { order: 3; flex: 1 1 100%; width: 100%; }
  html { scroll-padding-top: 140px; }
  .l-sec[id] { scroll-margin-top: 140px; }
}
@media (max-width: 800px) {
  .l-faq-box { padding: 0 16px; }
  .l-faq-trigger { min-height: 60px; gap: 14px; }
  .l-faq-q { font-size: 19px; }
  .l-faq-mark { width: 27px; height: 27px; }
  .l-faq-a { font-size: 18px; padding-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .l-faq-panel,
  .l-faq-panel > div,
  .l-faq-mark,
  .l-faq-mark i,
  .l-faq-q { transition: none; }
}
/* --- Mobile bottom navigation (banking-app style) ------------------------ */
/* Hidden on desktop; below 800px it replaces the hamburger sidebar. Five
   slots: four destinations and, in the middle, the one deliberate round shape
   in the product, the raised "פעולות" button (27.8; restored 3.9, request 68). */

.l-mnav, .l-mnav-overlay { display: none; }

@media (max-width: 799.98px) {
  .l-home-nav { display: none; }
  /* The room the fixed bottom bar needs is the footer's own bottom reserve
     (.l-home-footer, in the 800px block): the footer ends every personal
     area page since 2.9 (request 53), so the page adds no strip of its own. */
  .l-home-page { padding-bottom: 0; }

  .l-mnav {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    background: #fff;
    border-top: 1px solid var(--gray-300);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  /* The fixed bar plus the raised button need more room at the foot of the
     personal area than the home page's action bar does: the footer's last
     row must never sit under either. */
  .l-home-page .l-home-footer { padding-bottom: calc(22px + 104px + env(safe-area-inset-bottom, 0px)); }
  /* Settings on the phone is the bar's, once (3.9, request 68): the user
     menu's settings row, a personal-link visitor's empty user menu and the
     in-content "להגדרות" jumps are the desk's. */
  .l-drawer-row.l-desk-only { display: none; }
  .l-hero-gear-wrap.is-phone-idle { display: none; }
  .l-set-jump { display: none; }
  .l-mnav-item {
    appearance: none;
    background: none;
    border: 0;
    border-top: 3px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px 2px;
    min-height: 52px;
    font: inherit;
    font-size: 12.5px;
    color: var(--gray-700);
    cursor: pointer;
  }
  /* The labels are the desk's own names, whole (2.9, request 59). A long
     name ("הבדיקות והדוחות שלי") breaks at a space onto a second line, never
     inside a word, and every label reserves two lines so the glyphs above
     them stay on one row. The narrowest phones read the bar a point smaller. */
  .l-mnav-item { justify-content: flex-start; }
  .l-mnav-item span {
    display: block;
    white-space: normal;
    overflow-wrap: normal;
    text-align: center;
    line-height: 1.1;
    min-height: 2.2em;
  }
  @media (max-width: 340px) {
    .l-mnav-item { font-size: 11.5px; }
  }
  .l-mnav-item.is-active {
    color: var(--linder-navy);
    font-weight: 800;
    border-top-color: var(--linder-orange);
  }
  /* The middle slot: a navy disc raised above the bar, the glyph flattened to
     white on it, and its label on the same baseline as the four around it. */
  .l-mnav-fab-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: 2px;
  }
  .l-mnav-fab {
    appearance: none;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    padding: 0;
    border-radius: 50%;
    background: var(--linder-navy);
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
  }
  .l-mnav-fab { color: #fff; }
  .l-mnav-fab-glyph { display: block; }
  .l-mnav-fab:focus-visible { outline: 3px solid var(--linder-orange); outline-offset: 2px; }
  .l-mnav-fab[aria-expanded="true"] { border-color: var(--linder-orange); }
  .l-mnav-fab-label {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.1;
    min-height: 2.2em;
    text-align: center;
    color: var(--linder-navy);
  }
  @media (max-width: 340px) {
    .l-mnav-fab-label { font-size: 11.5px; }
  }
  /* The actions sheet: a short list of rows in the user menu's own language
     (plate, label, one quiet note, forward chevron). */
  .l-mnav-actions { display: flex; flex-direction: column; }
  .l-mnav-actions .l-drawer-row { margin-bottom: 10px; }
  .l-mnav-empty { margin: 0 0 10px; font-size: 16px; font-weight: 100; color: var(--gray-700); line-height: 1.45; }

  .l-mnav-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(16, 44, 74, 0.55);
    align-items: flex-end;
  }
  .l-mnav-sheet {
    background: var(--surface-soft, #F6F6F4);
    width: 100%;
    max-height: 82vh;
    overflow-y: auto;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .l-mnav-sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  .l-mnav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .l-mnav-card {
    appearance: none;
    background: #fff;
    border: 1px solid var(--gray-300);
    padding: 18px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 116px;
    font: inherit;
    font-size: 16px;
    color: var(--linder-navy);
    text-align: center;
    cursor: pointer;
  }
  .l-mnav-card.is-active {
    border: 2px solid var(--linder-orange);
    font-weight: 800;
  }
  /* Every card in the sheet is the same card: one glyph, one label, one
     colour. A filled navy tile among white ones read as a different kind of
     thing and buried its own icon. */
  a.l-mnav-card { text-decoration: none; }

  /* --- Compact mobile header ------------------------------------------- */
  .l-home-hero-inner { padding: 12px 16px 14px; }
  .l-home-hero-title { font-size: 26px; }
  .l-home-hero-hello { font-size: 22px; }
  /* On a phone the office title still needs the full width to stay centred,
     so the gear takes a row of its own. The customer greeting is start-
     aligned and shares the row with the gear. */
  .l-home-page.is-office .l-home-hero-bar { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .l-home-page.is-office .l-hero-gear-wrap { grid-column: 1; grid-row: 1; justify-self: end; }
  .l-home-page.is-office .l-home-hero-copy { grid-column: 1; grid-row: 2; width: 100%; }
}

/* --- Modal marks --------------------------------------------------------- */
/* One glyph at the top of a dialog says what kind of moment this is before
   the title is read. No plate: the transparent artwork stands on its own. */

.l-modal-mark {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.l-modal-callnow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 16px;
  font-weight: 800;
  color: var(--linder-navy);
  text-decoration: none;
  min-height: 44px;
}
.l-modal-callnow:hover { color: var(--linder-orange-500); }

/* A phone number inside a sentence: isolated so the digits keep their order,
   and unbreakable so "02-6313838" never splits across two lines. */
.l-phone-inline {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  display: inline-block;
}

/* --- Danger zone --------------------------------------------------------- */
/* A field tinted with the palette's deep orange (the kit's error tone) and a
   solid edge in it: the one place in the personal area where an action cannot
   be undone, and it has to read that way before the button is considered. */

.l-danger-zone {
  margin-top: 18px;
  padding: 22px 24px;
  background: color-mix(in srgb, var(--linder-orange-500) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--linder-orange-500) 45%, #fff);
  border-inline-start: 6px solid var(--linder-orange-500);
}
.l-danger-title { color: var(--linder-orange-500) !important; }
.l-danger-title::before { background: var(--linder-orange-500) !important; }

/* Side drawer, banking-app style: full height, over a dimmed page, entering
   from the edge the gear sits on. */
@keyframes l-drawer-in {
  from { transform: translateX(-24px); opacity: 0.6; }
  to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .l-drawer { animation: none; }
}
/* The drawer opens on who you are: a navy plate with the initial, the name,
   and how this session is authenticated. */
.l-drawer-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gray-700);
  padding: 16px 8px 6px;
}
.l-drawer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  appearance: none;
  background: #fff;
  border: 1px solid var(--gray-200);
  margin-bottom: 8px;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  color: var(--linder-navy);
  text-align: start;
  text-decoration: none;
  padding: 12px;
  min-height: 60px;
  cursor: pointer;
}
.l-drawer-row:hover { border-color: var(--linder-navy); }
.l-drawer-row.is-accent { border-inline-start: 4px solid var(--linder-orange); }
.l-drawer-row.is-quiet {
  color: var(--gray-700);
  font-weight: 400;
  background: none;
  border-style: dashed;
  margin-top: 16px;
}
.l-drawer-rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.l-drawer-note {
  font-size: 13.5px;
  font-weight: 100;
  color: var(--gray-700);
  line-height: 1.35;
}
.l-drawer-plate {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--surface-tint, #F8FFFF);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
}
.l-drawer-plate .l-home-side-icon { width: 22px; height: 22px; color: var(--linder-navy); }
.l-drawer-chev { color: var(--gray-300); flex-shrink: 0; }
.l-drawer-row:hover .l-drawer-chev { color: var(--linder-orange); }
.l-drawer-foot {
  margin-top: 20px;
  padding: 14px 8px 0;
  border-top: 1px solid var(--gray-200);
  font-size: 14px;
  font-weight: 800;
  color: var(--linder-navy);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.l-act-icon { flex-shrink: 0; }
/* On a filled navy/orange button the glyph's navy turns white and its orange
   accent stays orange (an exact colour-matrix filter defined inline in App).
   Browsers without url() filters on HTML fall back to a flat white glyph. */
.l-act-icon.is-on-fill,
.l-check-filter.is-on .l-act-icon { filter: brightness(0) invert(1); filter: url(#l-onfill); }
/* The matrix is written for sRGB values; the SVG default (linearRGB) would
   turn the glyph violet. */
#l-onfill, #l-onfill feColorMatrix { color-interpolation-filters: sRGB; }

.l-savings-strip { min-height: 51px; }
.l-savings-counter {
  background: var(--linder-navy);
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: 100;
}
.l-savings-counter b { color: var(--linder-orange); font-weight: 800; }

.l-home-footer {
  padding: 30px 20px 14px;
  background: var(--linder-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 100;
}
/* The footer as one centred unit (8.9, request 91; content unchanged since
   5.9, request 84), top to bottom: the brand name in the brand orange with the
   slogan under it, the title "יצירת קשר", one centred row of the four icon
   actions, then a thin rule and the quiet base line with the address and the
   legal documents. One column, centred, on a desk and on a phone alike;
   nothing at the two ends, nothing boxed. About 250px on a desk. */
.l-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 1120px;
  margin-inline: auto;
  min-width: 0;
  text-align: center;
}
.l-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.l-footer-firm { font-size: 26px; font-weight: bold; color: var(--brand-orange-on-dark); line-height: 1.15; }
.l-footer-slogan { font-size: 16px; color: #fff; }
.l-footer-contact { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.l-footer-contact-title { margin: 0; font-size: 18px; font-weight: bold; line-height: 1.2; color: #fff; }
/* Four equal cells, always one row, centred: the same icon size, the same
   plate, the same label, on a phone and on a desk. */
.l-footer-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}
.l-footer-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 68px;
  padding: 2px 2px;
  color: #fff;
  text-decoration: none;
}
.l-footer-act-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}
.l-footer-act-icon .l-home-side-icon { width: 20px; height: 20px; color: #fff; }
.l-footer-act-label { font-size: 14px; line-height: 1.2; white-space: nowrap; }
.l-footer-act:hover .l-footer-act-icon { border-color: var(--linder-orange); }
.l-footer-act:hover .l-footer-act-icon .l-home-side-icon, .l-footer-act:hover .l-footer-act-label { color: var(--linder-orange); }
/* The quiet base line: the address and the four legal links on one centred
   row under a thin rule; on a narrow screen the links drop to their own
   centred line under the address. */
.l-footer-base {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 22px;
  width: 100%;
  max-width: 1120px;
  margin: 6px auto 0;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.l-footer-where { margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 8px; min-height: 44px; font-size: 14.5px; color: rgba(255, 255, 255, 0.9); }
.l-footer-where bdi { unicode-bidi: isolate; }
.l-footer-legal {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
}
.l-footer-legal a { font-size: 13.5px; color: rgba(255, 255, 255, 0.85); text-decoration: underline; text-underline-offset: 3px; }
.l-footer-sep { color: rgba(255, 255, 255, 0.45); }
/* Every footer link keeps a 44px touch target; padding does the lifting and on
   the solid navy band it is invisible. */
.l-home-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 2px 0;
  color: #fff;
  overflow-wrap: anywhere;
}
.l-home-footer a:hover { color: var(--linder-orange); }
.l-home-footer a:focus-visible {
  outline: 2px solid var(--linder-orange);
  outline-offset: 2px;
}
.l-home-footer .l-footer-act { padding: 2px 2px; }

.l-focus {
  display: flex;
  gap: 12px;
  align-items: center;
}
.l-focus-art {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}
.l-focus-copy { min-width: 0; }

.l-win-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.l-win-art {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.l-discover {
  position: relative;
  width: min(280px, 80vw);
  margin: 8px auto 0;
}
.l-discover .l-rays {
  position: absolute;
  inset-inline-start: -18%;
  bottom: -8%;
  width: 70%;
  opacity: 0.95;
}
.l-discover-card {
  width: 100%;
  height: auto;
  display: block;
  animation: l-float 4.2s ease-in-out infinite;
}
.l-stage-now { animation: l-stage-pulse 1.4s ease-in-out infinite; }

@keyframes l-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes l-rays-breathe {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(7deg); }
}
@keyframes l-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes l-stage-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes l-tagline-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
@keyframes l-tagline-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes l-tagline-rays {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(10deg) scale(1.07); }
}
@keyframes l-tagline-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes l-tagline-accent {
  0%, 100% { color: var(--linder-orange); }
  50% { color: #F5AE6A; }
}

@media (max-width: 800px) {
  .l-home-header {
    padding-inline: 16px;
  }
  .l-hd-sections { display: none; }
  .l-sec[id] { scroll-margin-top: 12px; }
  .l-hd-btn.l-hd-menu-toggle {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    flex: none;
    /* Centred between the mark and the contact pair (8.9, request 91). */
    grid-column: 2 / 4;
    grid-row: 1;
    justify-self: center;
  }
  .l-hd-btn.l-hd-phone-only { display: inline-flex; }
  .l-hd-menu-toggle.is-open {
    background: var(--linder-navy);
    color: #fff;
  }
  /* The open menu: the five section names centred, one under the other,
     each a full-width 48px target with a hairline between them; no frame
     around the list (8.9, request 91). */
  .l-home-header.is-menu-open .l-hd-menu-panel {
    display: block;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 41;
    background: #fff;
    border-bottom: 2px solid var(--linder-navy);
    padding: 4px 16px 10px;
  }
  .l-hd-sections-mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 420px;
    margin-inline: auto;
  }
  .l-hd-sections-mobile .l-hd-section-link {
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 10px 8px;
    font-size: 17px;
    white-space: normal;
    border-bottom: 1px solid var(--gray-200, #eee);
    text-align: center;
  }
  .l-hd-sections-mobile .l-hd-section-link::after { display: none; }
  .l-hd-sections-mobile .l-hd-section-link:last-child { border-bottom: 0; }
  .l-home-header-actions { gap: 10px; }
  .l-home-header .l-linkbtn { font-size: 16px; }
  .l-home-phone { font-size: 17px; }
  .l-hero-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }
  /* On one column the copy has no facing element to align against, so the
     headline, the sentence and the button centre on the page instead of
     hugging the right edge. Content and order are untouched. */
  .l-hero-copy { text-align: center; }
  .l-hero-copy .l-cta,
  .l-hero-copy .l-row { justify-content: center; }
  .l-result-teaser {
    width: min(100%, 410px);
    box-sizing: border-box;
    margin-inline: auto;
  }
  .l-route {
    grid-template-columns: minmax(0, 1fr);
  }
  .l-outcomes { grid-auto-rows: auto; }
  /* TWO rows on a phone, and only two, symmetric (8.9, request 91).
     Row 1: the mark at the inline start, the compact section menu toggle
     centred, the two contact glyphs (phone, WhatsApp; the mail is the
     footer's, 8.9 request 90) at the inline end.
     Row 2: the two decisions, each exactly half the width.
     Four tracks: two equal outer tracks and two 22px inner tracks. The
     toggle spans the two inner tracks (44px plus one gap, centred in it);
     each decision spans an outer track and its inner neighbour, so the two
     halves are equal. The contact group is a fixed two-column grid, so it
     cannot wrap. */
  .l-home-header {
    padding: 10px 16px 12px;
  }
  .l-home-header-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px 22px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    align-items: center;
  }
  .l-home-brand-cell { grid-column: 1; grid-row: 1; min-width: 0; }
  .l-home-brand { --logo-h: var(--logo-home-sm); flex: 1 1 auto; max-width: 100%; }
  .l-home-brand img { max-width: 100%; }
  /* The pair sits in the last track, at the inline end, on the same edge as
     "אזור אישי" below it, and FILLS that track: two equal cells, one gap, so
     the group's outer edge lands on the button's outer edge at every width
     (since request 91 the button also covers the inner track beside it, so
     the pair is one track narrower than the button). */
  .l-hd-contact {
    grid-column: 4;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
    width: 100%;
    gap: 8px;
    margin-inline-start: 0;
    flex-wrap: nowrap;
  }
  .l-home-header-actions { display: contents; }
  .l-home-header-actions > .l-hd-btn {
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }
  .l-home-header-actions > .l-hd-btn:nth-of-type(1) { grid-column: 1 / 3; }
  .l-home-header-actions > .l-hd-btn:nth-of-type(2) { grid-column: 3 / 5; }
  /* Icon-only contacts on a phone: labels would never fit beside the mark,
     and each button keeps its aria-label and its 44px target. The cell is
     half the column, and 44px is its floor: at 320px the half measures 65,
     so the floor is never reached. */
  .l-hd-contact .l-contact-btn {
    width: 100%;
    min-width: 44px;
    padding: 0;
  }
  .l-hd-contact .l-hd-label { display: none; }
  .l-hd-btn { font-size: 18px; padding: 0 12px; }
  .l-outcomes,
  .l-services { grid-template-columns: minmax(0, 1fr); }
  /* The same centred unit on a phone, a little tighter: the brand, the
     contact title and the four icons in one equal row, then the rule, the
     address and the legal line under it. Nothing scrolls sideways. */
  .l-home-footer { padding: 28px 16px calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 15px; }
  .l-footer-inner { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .l-footer-brand { align-items: center; text-align: center; }
  .l-footer-firm { font-size: 23px; }
  .l-footer-slogan { font-size: 15px; }
  .l-footer-contact { align-items: center; width: 100%; }
  .l-footer-actions { gap: 8px; max-width: 360px; }
  .l-footer-base { flex-direction: column; align-items: center; gap: 0; margin-top: 4px; }
  .l-footer-where { justify-content: center; text-align: center; }
  .l-footer-legal { justify-content: center; font-size: 13px; }
  /* The 64px at the foot is room for a fixed bottom bar (the home page's
     action bar, the personal area's navigation). The check route has none. */
  .l-check-shell .l-home-footer { padding-bottom: 22px; }

  .l-footer-line { gap: 6px; padding: 6px 0; }
  .l-footer-line .l-home-side-icon { width: 16px; height: 16px; }
  .l-route-stop + .l-route-stop {
    border-inline-start: none;
    border-top: 1px solid var(--gray-300);
  }
  .l-route-stop { padding-inline: 18px; }
  .l-hero-tagline {
    flex-direction: column;
    gap: 10px;
    padding: 16px 12px;
  }
  .l-hero-tagline-rays { width: 42px; }
  .l-hero-tagline p { font-size: clamp(16px, 4.5vw, 20px); }
  .l-account-signin { flex-direction: column; }
  .l-account-signin-brand { justify-content: center; border-inline-end: none; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
  .l-account-signin-perks { flex-direction: column; }
  .l-account-signin-perks li {
    border-inline-start: none;
    border-top: 1px solid var(--gray-300);
    padding: 12px 18px;
  }
  .l-account-signin-action {
    border-inline-start: none;
    border-top: 1px solid var(--gray-300);
    min-width: 0;
    padding: 20px;
  }
}

.l-topup-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.l-topup-chart { margin-top: 22px; }
.l-topup-chart-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--linder-navy);
}
.l-topup-rail {
  position: relative;
  height: 28px;
  background: var(--gray-200);
  overflow: hidden;
}
.l-topup-rail-used {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--linder-navy);
}
.l-topup-tick {
  position: absolute;
  inset-block: 0;
  width: 2px;
  margin-inline-start: -1px;
  background: var(--linder-orange);
}
.l-topup-now {
  position: absolute;
  inset-block: 0;
  width: 2px;
  margin-inline-start: -1px;
  background: #fff;
}
.l-topup-scale {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 100;
  color: var(--gray-700);
}
.l-topup-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.l-topup-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.l-topup-bar-label,
.l-topup-bar-amt {
  font-weight: 800;
  color: var(--linder-navy);
}
.l-topup-bar-amt { font-variant-numeric: tabular-nums; }
.l-topup-bar-track {
  height: 16px;
  margin-block: 6px;
  background: var(--gray-200);
}
.l-topup-bar-fill {
  height: 100%;
  background: var(--linder-navy);
}
@media (max-width: 520px) {
  .l-topup-stats { grid-template-columns: 1fr; gap: 10px; }
}

.l-insure-block { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.l-insure-block-title { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--linder-navy); }
.l-insure-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.l-insure-hero-month { color: var(--linder-orange-500); }
.l-insure-hero .l-stat-value bdi { unicode-bidi: plaintext; }
.l-insure-known { margin-top: 10px; }
.l-insure-none { margin: 0; }
.l-insure-part-per { font-family: var(--font-display); font-size: 15px; font-weight: 100; color: var(--gray-700); margin-inline-start: 6px; }
.l-insure-part-sum.is-unknown { font-family: var(--font-display); font-size: 17px; font-weight: 100; color: var(--gray-700); direction: rtl; }
.l-insure-part-sum bdi { unicode-bidi: plaintext; }
.l-insure-missing { padding-top: 16px; padding-bottom: 0; margin-bottom: 0; border-top: 1px solid var(--gray-200); border-bottom: 0; margin-top: 18px; }
.l-insure-missing-list { margin: 0; padding-inline-start: 20px; font-size: 16px; font-weight: 100; color: var(--gray-700); line-height: 1.5; }
.l-insure-missing-list li + li { margin-top: 4px; }
.l-insure-parts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}
.l-insure-part-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--linder-navy);
  margin-bottom: 6px;
}
.l-insure-part-sum {
  font-family: var(--font-numeric);
  font-weight: 900;
  font-size: clamp(26px, 3.6vw, 36px);
  color: var(--linder-navy);
  line-height: 1.05;
  margin-bottom: 6px;
}
@media (max-width: 700px) {
  .l-insure-hero,
  .l-insure-parts { grid-template-columns: 1fr; }
}

.l-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  background: rgba(16, 76, 139, 0.42);
  cursor: pointer;
}
.l-modal {
  position: fixed;
  z-index: 63;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(28rem, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: fit-content;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border: 2px solid var(--linder-navy);
  padding: 24px;
}
.l-modal:focus { outline: none; }
.l-modal:focus-visible { outline: 3px solid var(--linder-orange); outline-offset: 2px; }
.l-modal-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--linder-navy);
  line-height: 1.25;
}
.l-modal-body {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 100;
  line-height: 1.45;
  color: var(--gray-700);
}
.l-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.l-modal-error {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 100;
  color: var(--gray-700);
}
.l-modal-error a { color: var(--linder-navy); }

@media (prefers-reduced-motion: reduce) {
  .l-rays-fan,
  .l-discover-card,
  .l-stage-now,
  .l-hero-tagline,
  .l-hero-tagline-rays,
  .l-hero-tagline p,
  .l-hero-tagline-dot,
  .l-hero-tagline-accent,
  .l-account-signin-rays { animation: none !important; }
}

.l-check-shell {
  min-height: 100vh;
  background: var(--surface-soft);
  font-family: var(--font-display);
}
/* The opening band under the site header on the home page, the check route
   and the personal area (4.9): the check route's brand row (.l-hero-brandline,
   with its drawn orange mark between the name and the slogan), centred on
   one line on the same navy. One short band, never a second header. At 320px
   the row is about 215 of the 288px available, so it holds one line on every
   phone. */
.l-brand-opening {
  background: var(--linder-navy);
  padding: 14px 16px;
  font-family: var(--font-display);
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
}
.l-brand-opening .l-hero-brandline {
  justify-content: center;
  margin: 0;
  max-width: 100%;
}
/* Home page only: the check route's light break under the navy band, drawn
   once between the band and the navy hero. Height is .l-check-main's
   padding-top; colour is the home page's white. Not used on /check or
   /account, where the page background already is that break. */
.l-brand-seam {
  height: 40px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
  flex-shrink: 0;
}
.l-check-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

@media (max-width: 520px) {
  .l-check-main { padding: 28px 16px 48px; }
  .l-brand-seam { height: 28px; }
}

/* --- Result: the answer first, then the table ---------------------------- */
/* The shared vocabulary (engine/present.js) decides the words and the tone;
   the styles below only lay them out. One vertical rhythm (--result-gap) for
   every block, pairs of cards always the same height, tone carried by colour
   plus a glyph plus a word, numbers LTR and tabular. */

.l-result { --result-gap: 20px; display: flex; flex-direction: column; gap: var(--result-gap); margin-bottom: 34px; }
.l-result-heading { margin: 0 0 12px; }
.l-card-title { margin: 0 0 12px; }
.l-card-note { margin: 12px 0 0; }
.l-card-fill { height: 100%; box-sizing: border-box; }

/* Two cards, same height, stacked on a phone. */
.l-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--result-gap); align-items: stretch; }
.l-pair.is-single { grid-template-columns: minmax(0, 1fr); }
.l-pair > * { min-width: 0; }

.l-answer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.l-tone-glyph { flex: 0 0 auto; }
.l-title-with-glyph { display: flex; align-items: center; gap: 8px; }
.l-answer-headline {
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.2;
  color: var(--linder-navy);
  margin: 0 0 10px;
}
.l-answer-why { margin: 0 0 8px; }
.l-answer-saving { margin: 0 0 10px; }
.l-answer-disclaimer { margin: 6px 0 0; }

.l-figures { gap: 16px; }
.l-figures .l-figure { text-align: center; min-width: 0; padding: 4px 0; }
.l-figures .l-stat-value { overflow-wrap: anywhere; }
.l-figures-caption { margin-top: 14px; text-align: center; }
.l-num-center { direction: ltr; font-variant-numeric: tabular-nums; }

.l-num {
  direction: ltr;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.l-bar-label { font-size: 18px; font-weight: 100; }
.l-bar-value {
  font-family: var(--font-numeric);
  font-weight: 900;
  font-size: 24px;
  direction: ltr;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

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

/* The decision tag: glyph + canonical word, coloured by tone. */
.l-decision-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid currentColor;
  padding: 3px 10px;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  background: #fff;
}

/* The tracks table. The wrapper is a CSS container, so the switch to cards
   follows the width the table actually has (about 790px inside the personal
   area even on a wide desk), not the viewport. overflow-x is only a safety
   net for a browser without container queries: the page itself never scrolls
   sideways. */
/* Cards, not a table: nothing here scrolls sideways on a phone. */
.l-tracks { border: 1px solid var(--gray-300); background: #fff; container-type: inline-size; }
.l-tracks-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.l-tracks-table th {
  background: var(--linder-navy);
  color: #fff;
  font-weight: bold;
  text-align: right;
  padding: 10px 8px;
  font-size: 15px;
  white-space: nowrap;
}
.l-tracks-table th.l-num { text-align: right; }
.l-tracks-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--gray-300);
  vertical-align: middle;
}
.l-tracks-row[data-decision="STRONG_REFINANCE_CANDIDATE"] td { background: #FFF6EC; }
.l-tracks-row.is-open td { border-bottom: none; }
.l-tracks-type { display: block; font-weight: bold; color: var(--linder-navy); font-size: 18px; }
.l-tracks-sub { display: block; font-size: 15px; font-weight: 100; color: var(--gray-700); margin-top: 2px; }
.l-tracks-gap.is-over { color: var(--linder-orange-500); font-weight: bold; }
.l-tracks-gap.is-under { color: var(--gray-700); }
.l-tracks-decision { white-space: nowrap; }
.l-tracks-decision .l-tracks-more { display: block; margin-top: 6px; font-size: 15px; }
.l-tracks-note td { background: var(--surface-tint); padding: 4px 12px 14px; }
.l-tracks-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.l-tracks-legend { padding: 10px 12px; border-top: 1px solid var(--gray-300); }

/* Savings and costs, one aligned list. */
.l-savings { margin: 0; }
.l-savings-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-300);
}
.l-savings-row:last-child { border-bottom: none; }
.l-savings-row dt { font-size: 18px; font-weight: 100; margin: 0; }
.l-savings-row dd { margin: 0; font-size: 20px; font-weight: bold; color: var(--linder-navy); }
.l-savings-row.is-total dt { font-weight: bold; }
.l-savings-row.is-total dd { font-size: 24px; }
.l-savings-unknown { font-weight: 100; color: var(--gray-700); font-size: 17px; direction: rtl; }

.l-missing-list { margin: 0; padding-inline-start: 20px; }
.l-missing-list li { margin-bottom: 4px; }

/* Below about 880px of table width every row becomes a card: label on the
   right, value on the left, nothing scrolls sideways. The header row is for
   the desk only. */
@container (max-width: 880px) {
  .l-tracks { border: none; background: transparent; }
  .l-tracks-table, .l-tracks-table tbody, .l-tracks-table tr, .l-tracks-table td { display: block; width: 100%; }
  .l-tracks-table thead { display: none; }
  .l-tracks-row {
    border: 1px solid var(--gray-300);
    background: #fff;
    margin-bottom: 12px;
    box-sizing: border-box;
  }
  .l-tracks-row.is-open { margin-bottom: 0; }
  .l-tracks-row td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--gray-200);
    box-sizing: border-box;
  }
  .l-tracks-row td::before {
    content: attr(data-label);
    font-weight: 100;
    color: var(--gray-700);
    font-size: 16px;
    flex: 0 0 auto;
  }
  .l-tracks-row td.l-tracks-name {
    display: block;
    background: var(--surface-tint);
    padding: 12px 14px;
  }
  .l-tracks-row td.l-tracks-name::before { display: none; }
  .l-tracks-row td.l-num { text-align: left; }
  .l-tracks-decision { white-space: normal; }
  .l-tracks-decision .l-tracks-more { display: inline; margin: 0 0 0 12px; }
  .l-tracks-note td {
    display: block;
    border: 1px solid var(--gray-300);
    border-top: none;
    margin-bottom: 12px;
    padding: 10px 14px 14px;
    box-sizing: border-box;
  }
  .l-tracks-legend { padding: 4px 0 0; border-top: none; }
}
@media (max-width: 760px) {
  .l-result { --result-gap: 16px; }
  .l-pair { grid-template-columns: minmax(0, 1fr); }
  .l-savings-row { flex-wrap: wrap; }
  .l-savings-row dd { margin-inline-start: auto; }
  .l-answer-headline { font-size: 24px; }
  .l-bar-row { flex-wrap: wrap; }
  .l-bar-label { flex: 1 0 100%; }
  /* One button per line, comfortable to tap, never a clipped label. */
  .l-result .l-cta, .l-result .l-cta > * { width: 100%; }
}

/* The phone and mail as typed, sitting above the final button. A glance and a
   way back, deliberately not a step: the flow used to spend a whole screen
   asking the visitor to confirm fields they had just filled in. */
/* The flex version of this card, and the .l-recap-line / -item / -sep classes
   it styled, were removed on 2.9 (request 42): the markup had not used them
   for some time, and its `.l-recap .l-linkbtn { margin-inline-start: auto }`
   was still live, which is what parked "עריכת פרטים" beside the phone number.
   The card is defined once, further down this file. */

/* The two legal links have to sit inside the consent sentence, so they cannot
   become 44px blocks without breaking the line. Vertical padding on an inline
   box grows the tap area without moving any text, and the taller line box
   keeps that area from swallowing the line above it. */
.l-consent { line-height: 2.2; }
.l-consent-link {
  color: var(--linder-navy);
  /* A link inside a sentence has to be distinguishable without colour
     (WCAG 1.4.1). The underline is what does it; the offset keeps it clear of
     the Hebrew descenders. */
  text-decoration: underline;
  text-underline-offset: 3px;
  /* 13, not 11: at this line height 11 leaves the link a 41px target, and
     the standing rule is 44. The negative margin keeps the sentence on its
     own line height either way. */
  padding-block: 13px;
  margin-block: -13px;
}

/* The narrowest phones. The two header buttons share a 139px column, and the
   product's name plus a glyph needs about 170px, so the glyph used to hang 8px
   outside its button. The words are the part that has to survive: the glyph
   steps aside below 361px and returns above it. Placed at the end of the file
   deliberately, so it cannot land inside another breakpoint's block. */
@media (max-width: 360px) {
  .l-home-header-actions > .l-hd-btn {
    padding: 0 8px;
    gap: 0;
  }
  .l-home-header-actions > .l-hd-btn .l-act-icon,
  .l-home-header-actions > .l-hd-btn .l-home-side-icon {
    display: none;
  }
}

/* ========================================================================= */
/* The check route: one spacing scale (8/12/16/24/32), one content width, one */
/* card frame for all three steps. The route is meant to read as the home     */
/* page continued, so it borrows its type ramp, its navy/orange and its       */
/* square corners rather than inventing a second language.                    */
/* ========================================================================= */

.l-check-shell { --cs-1: 8px; --cs-2: 12px; --cs-3: 16px; --cs-4: 24px; --cs-5: 32px; }

/* --- The title block: identical on every step, so nothing below it jumps -- */
.l-check-intro {
  max-width: 640px;
  margin: 0 auto var(--cs-5);
  text-align: center;
}
.l-check-h1 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--linder-navy);
}
.l-check-lead {
  margin: var(--cs-2) 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 100;
  line-height: 1.45;
  color: var(--linder-navy);
}
/* Each half is its own line at every width. A block span rather than a <br>,
   so the two lines can be balanced and measured as lines. */
.l-check-lead > span { display: block; }

/* --- The stepper --------------------------------------------------------- */
.l-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-1);
  margin-top: var(--cs-4);
}
.l-step {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-1);
  min-height: 44px;
  padding: 0 var(--cs-2);
  font: inherit;
  font-size: 17px;
  font-weight: 100;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: #6B6B6B;
  white-space: nowrap;
  cursor: default;
}
.l-step-n {
  font-size: 15px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: var(--gray-300);
}
.l-step.is-reached { color: var(--linder-navy); }
.l-step.is-reached .l-step-n { color: var(--linder-orange-500); }
.l-step.is-current { font-weight: bold; border-bottom-color: var(--linder-orange); }
.l-step:not(:disabled) { cursor: pointer; }
.l-step:focus-visible { outline: 3px solid var(--linder-navy); outline-offset: 2px; }
.l-step-line {
  width: 28px;
  height: 1px;
  background: var(--gray-300);
  flex: 0 0 auto;
}

/* --- One card frame for every step --------------------------------------- */
.l-stepcard {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--cs-5);
  background: #fff;
  border: 1px solid var(--gray-200);
  box-sizing: border-box;
}
.l-stepcard-head { margin-bottom: var(--cs-4); }
.l-stepcard-title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: bold;
  color: var(--linder-navy);
  line-height: 1.2;
}
.l-stepcard-hint {
  margin: var(--cs-1) 0 0;
  font-size: 17px;
  font-weight: 100;
  line-height: 1.45;
  color: #4A4A4A;
}
/* Short lines under a step's explanation: a reassurance, and the one warning
   about the wrong document, in the muted orange the route uses for cautions. */
.l-stepcard-notes { margin-top: var(--cs-2); }
/* The small step mark above every card title (3.9, request 65): a bearing,
   not a heading, so it stays one size below the hint. */
.l-stepcard-mark {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: var(--linder-orange-500);
}
/* The one warning on the bank step as a compact row: a light plate, a thin
   rule, a small caution glyph in the muted orange, one short line. */
.l-stepcard-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  background: var(--surface-tint);
  border: 1px solid var(--gray-200);
  font-size: 15px;
  font-weight: 100;
  line-height: 1.35;
  color: #3C3C3C;
}
.l-stepcard-warn-icon { flex: none; color: var(--linder-orange-500); }
/* A second group inside the same card: a hairline and even air above it, its
   own heading a step below the card's, then the same hint style. */
.l-step-group {
  margin: 0 0 var(--cs-2);
  padding-top: var(--cs-3);
  border-top: 1px solid var(--gray-200);
}
.l-step-group-title {
  margin: 0;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: bold;
  color: var(--linder-navy);
  line-height: 1.2;
}

/* --- Step 01: 2 + 1, then the consents ----------------------------------- */
/* Three equal fields on one row (3.9, request 65), one under the other on a
   phone: the consents box below spans the same width, so the block is one
   symmetric column. */
.l-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cs-3) var(--cs-3);
}
.l-field { min-width: 0; }
.l-field-wide { grid-column: auto; }
.l-req { color: var(--linder-orange-500); }

.l-consents {
  margin-top: var(--cs-4);
  padding: var(--cs-3);
  background: var(--surface-tint);
  border: 1px solid var(--gray-200);
}
.l-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--cs-2);
  min-height: 44px;
  padding-block: 4px;
  font-size: 17px;
  font-weight: 100;
  line-height: 2.2;
  cursor: pointer;
}
.l-consent + .l-consent { margin-top: var(--cs-2); }
.l-consent input {
  width: 22px;
  height: 22px;
  margin-top: 6px;
  flex: 0 0 auto;
}
.l-consent-link {
  color: var(--linder-navy);
  /* A link inside a sentence has to be distinguishable without colour
     (WCAG 1.4.1). The underline is what does it; the offset keeps it clear of
     the Hebrew descenders. */
  text-decoration: underline;
  text-underline-offset: 3px;
  /* 13, not 11: at this line height 11 leaves the link a 41px target, and
     the standing rule is 44. The negative margin keeps the sentence on its
     own line height either way. */
  padding-block: 13px;
  margin-block: -13px;
}

.l-formerror {
  margin-top: var(--cs-3);
  padding: var(--cs-2) var(--cs-3);
  background: var(--surface-tint);
  border-inline-start: 3px solid var(--linder-orange);
  font-size: 17px;
  color: var(--linder-orange-500);
}

/* --- The step's own actions ---------------------------------------------- */
.l-stepcta {
  margin-top: var(--cs-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cs-2);
}
.l-stepcta .l-cta-main { width: 100%; max-width: 360px; justify-content: center; }
.l-stepcta-pair { gap: var(--cs-3); }

/* --- "איזה מסמך צריך?" ---------------------------------------------------- */
/* --- The bank grid: equal tiles, equal gaps, names never break the row ---- */
/* Eight tiles, no "אחר": four by two on a desk, two by four on a phone, so
   the grid is always full and symmetric (2.9, request 57). */
.l-banks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--cs-2);
}
@media (max-width: 800px) {
  /* Two tiles a row. Four tracks with each tile on two, so that if the count
     is ever odd the last tile sits centred on the middle pair at the same
     width as every other tile, instead of alone at the inline start. */
  .l-banks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .l-bank { grid-column: span 2; }
  .l-bank:last-child:nth-child(odd) { grid-column: 2 / 4; }
}
.l-bank {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: var(--cs-1) var(--cs-2);
  font: inherit;
  font-size: 16px;
  font-weight: 100;
  line-height: 1.25;
  color: var(--linder-navy);
  background: #fff;
  border: 1px solid var(--gray-300);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.l-bank:hover { background: var(--surface-tint); }
.l-bank:focus-visible { outline: 3px solid var(--linder-navy); outline-offset: 2px; }
.l-bank.is-on {
  border-color: var(--linder-navy);
  border-width: 2px;
  font-weight: bold;
  background: var(--surface-tint);
}

/* --- The guide panel, one template for every bank ------------------------ */
.l-guide {
  margin-top: var(--cs-4);
  padding: var(--cs-4);
  background: var(--surface-tint);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--linder-orange);
}
.l-guide-title {
  margin: 0 0 var(--cs-2);
  font-size: 20px;
  font-weight: bold;
  color: var(--linder-navy);
  line-height: 1.25;
}
.l-guide-doc { margin: 0 0 var(--cs-2); font-size: 17px; font-weight: 100; line-height: 1.45; }
.l-guide-doc b { font-weight: bold; }
.l-guide-warn {
  margin: 0 0 var(--cs-2);
  font-size: 16px;
  font-weight: 100;
  line-height: 1.45;
  color: var(--linder-orange-500);
}
.l-guide-blocker {
  margin: 0 0 var(--cs-2);
  padding-inline-start: var(--cs-2);
  border-inline-start: 3px solid var(--linder-orange);
  font-size: 16px;
  font-weight: 100;
  line-height: 1.45;
}
.l-guide-steps {
  margin: 0 0 var(--cs-3);
  padding-inline-start: var(--cs-4);
  display: flex;
  flex-direction: column;
  gap: var(--cs-1);
}
.l-guide-steps li { font-size: 17px; font-weight: 100; line-height: 1.45; }
.l-guide-link { margin-bottom: var(--cs-3); }
.l-guide-note { margin: 0 0 var(--cs-2); font-size: 16px; font-weight: 100; line-height: 1.45; }
.l-guide-phone {
  margin: 0;
  padding-top: var(--cs-2);
  border-top: 1px solid var(--gray-200);
  font-size: 16px;
  font-weight: 100;
}
.l-guide-num { font-weight: bold; direction: ltr; unicode-bidi: isolate; }
.l-guide-phone-note { color: #4A4A4A; }

.l-wrongdoc {
  margin-top: var(--cs-3);
  padding: var(--cs-3);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-inline-start: 4px solid var(--linder-orange);
}
.l-wrongdoc-title { margin: 0 0 var(--cs-1); font-size: 18px; font-weight: bold; color: var(--linder-navy); }
.l-wrongdoc .l-body { margin: 0 0 var(--cs-1); }

/* --- Step 03: the drop zone, the files, the recap ------------------------ */
.l-resumed {
  margin: 0 0 var(--cs-3);
  padding: var(--cs-2) var(--cs-3);
  background: var(--surface-tint);
  border: 1px solid var(--gray-200);
  font-size: 17px;
  font-weight: 100;
}
.l-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cs-1);
  width: 100%;
  padding: var(--cs-5) var(--cs-3);
  background: #fff;
  border: 2px dashed var(--gray-300);
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
}
.l-drop:hover { background: var(--surface-tint); }
.l-drop:focus-visible { outline: 3px solid var(--linder-navy); outline-offset: 2px; }
.l-drop.is-filled { background: var(--surface-tint); border-color: var(--linder-navy); }
.l-drop-icon { height: 44px; width: auto; }
.l-drop-title { font-size: 19px; font-weight: bold; color: var(--linder-navy); line-height: 1.3; }
.l-drop-note { font-size: 16px; font-weight: 100; color: #4A4A4A; }
.l-drop-input { display: none; }

.l-filelist { list-style: none; margin: var(--cs-3) 0 0; padding: 0; }
.l-file {
  display: flex;
  align-items: center;
  gap: var(--cs-2);
  padding: var(--cs-1) var(--cs-2);
  background: #fff;
  border: 1px solid var(--gray-300);
}
.l-file + .l-file { margin-top: var(--cs-1); }
.l-file-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  overflow-wrap: anywhere;
}
.l-file-size { flex: 0 0 auto; font-size: 15px; font-weight: 100; color: #4A4A4A; white-space: nowrap; }
.l-file-x {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--cs-1);
  font: inherit;
  font-size: 16px;
  background: none;
  border: none;
  color: var(--linder-orange-500);
  cursor: pointer;
}
.l-file-x:focus-visible { outline: 3px solid var(--linder-navy); outline-offset: 2px; }

.l-optional {
  margin-top: var(--cs-4);
  padding: var(--cs-3);
  background: var(--surface-tint);
  border: 1px solid var(--gray-200);
}
.l-optional-note { margin: var(--cs-1) 0 0; font-size: 16px; font-weight: 100; color: #4A4A4A; }

/* Two equal cells, then the link. Never a value on its own. */
.l-recap {
  margin-top: var(--cs-3);
  padding: var(--cs-3);
  background: #fff;
  border: 1px solid var(--gray-200);
}
/* The title on one side, the way back on the other. The edit link used to sit
   below the rows, and a stale rule floated it up beside the phone number. */
.l-recap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-2);
}
.l-recap-edit { flex: none; margin: 0; }
/* ONE grid for all three rows: each row is `display: contents`, so the icon,
   the label and the value of every row land in the same three tracks. Three
   separate grids would have sized their columns from their own content and
   left the values on three different axes, which is what the card looked
   like before. */
.l-recap-rows {
  display: grid;
  grid-template-columns: 20px auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--cs-2);
  margin: 0;
}
.l-recap-row { display: contents; }
.l-recap-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--linder-navy);
}
.l-recap-icon .l-home-side-icon { width: 18px; height: 18px; }
.l-recap-k {
  margin: 0;
  padding-block: 9px;
  font-size: 15px;
  font-weight: 100;
  line-height: 1.4;
  color: #4A4A4A;
  white-space: nowrap;
}
.l-recap-v {
  margin: 0;
  min-width: 0;
  padding-block: 9px;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--linder-navy);
  /* A long address wraps inside its own cell instead of widening the card. */
  overflow-wrap: anywhere;
}
/* The number and the address read left to right; the cell around them stays
   right to left, so every value starts on the same axis as the name. */
.l-recap-v bdi { unicode-bidi: isolate; }
/* One hairline between rows, drawn on all three cells of a row so it reads as
   a single line across the card. `display: contents` leaves the row itself
   with no box to put a border on. */
.l-recap-row + .l-recap-row > * { border-top: 1px solid var(--gray-200); }

/* --- Phones -------------------------------------------------------------- */
@media (max-width: 700px) {
  .l-stepcard { padding: var(--cs-4) var(--cs-3); }
  /* A phone reaches the main action sooner (3.9, request 65): the title
     block, the card head and the bank group all give back a step of air,
     and the brand band keeps its type but not its cushion. */
  .l-check-intro { margin-bottom: var(--cs-4); }
  .l-stepcard-head { margin-bottom: var(--cs-3); }
  .l-step-group { padding-top: var(--cs-2); }
  .l-brand-opening { padding: 8px 12px; }
  /* One field per row, full width. */
  .l-fields { grid-template-columns: minmax(0, 1fr); }
  .l-steps { gap: 2px; }
  .l-step { padding: 0 var(--cs-1); font-size: 15px; }
  .l-step-line { width: 12px; }
  .l-guide { padding: var(--cs-3); }
  .l-stepcta .l-cta-main { max-width: none; }
}

/* The narrowest phones: two bank tiles still fit, but the step labels do not
   sit beside their numbers, so the stepper keeps the numbers and drops to a
   tighter rhythm rather than wrapping into three ragged lines. */
@media (max-width: 380px) {
  .l-step { font-size: 14px; gap: 4px; }
  .l-step-n { font-size: 13px; }
  .l-step-line { width: 8px; }
  .l-bank { font-size: 15px; min-height: 52px; }
}

/* The gate notice on the details step, and the line under its button. */
.l-gate {
  margin: 0 0 var(--cs-3);
  padding: var(--cs-2) var(--cs-3);
  background: var(--surface-tint);
  border-inline-start: 3px solid var(--linder-orange);
  font-size: 17px;
  font-weight: 100;
  color: var(--linder-navy);
}
/* The guide's foot: the call centre and the bank's own site, one row on a
   desktop and a stack on a phone, so neither reads as the primary action. */
.l-guide-foot {
  margin-top: var(--cs-3);
  padding-top: var(--cs-2);
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-2);
  flex-wrap: wrap;
}
.l-guide-foot .l-guide-phone {
  margin: 0;
  padding-top: 0;
  border-top: none;
  flex: 1 1 260px;
  min-width: 0;
}
.l-guide-sites {
  display: flex;
  align-items: center;
  gap: var(--cs-1);
  flex-wrap: wrap;
}
.l-banksite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-1);
  min-height: 44px;
  padding: 0 var(--cs-2);
  font-size: 16px;
  font-weight: 100;
  color: var(--linder-navy);
  background: #fff;
  border: 1px solid var(--gray-300);
  text-decoration: none;
  white-space: nowrap;
}
.l-banksite:hover { background: var(--surface-tint); }
.l-banksite:focus-visible { outline: 3px solid var(--linder-navy); outline-offset: 2px; }

@media (max-width: 700px) {
  /* Full width, stacked, so a thumb never has to hit a half-row. A long bank
     name must wrap rather than push the button past the card: nowrap on a
     320px phone is what made the guide foot overflow. */
  .l-guide-foot { flex-direction: column; align-items: stretch; }
  .l-guide-foot .l-guide-phone { flex: 0 0 auto; }
  .l-guide-sites { flex-direction: column; align-items: stretch; min-width: 0; }
  .l-banksite {
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
    padding-block: var(--cs-1);
  }
}

/* --- Step 02: the question, then the answer ------------------------------ */
.l-ask {
  margin-top: var(--cs-4);
  padding: var(--cs-4);
  background: var(--surface-tint);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--linder-orange);
  text-align: center;
}
.l-ask-q {
  margin: 0 0 var(--cs-3);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: bold;
  color: var(--linder-navy);
  line-height: 1.3;
}
/* Two equal cells, not a button beside a link: same width, same height, same
   gap, and each option keeps its own glyph. One column on a phone, in the
   order the question asks them. */
.l-ask-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Equal in both directions: side by side the cells share one row, stacked
     they share one row height, so a label that wraps on a 360px phone does
     not leave its twin shorter. */
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--cs-3);
  margin-inline: auto;
}
/* The pair fills the box (604px inside the card on a desk, so 294px a cell),
   and the cells keep 16px of side air instead of the kit's 28px: the labels
   are centred, so the air is only air, and "לא, תראו לי איך מוציאים" needs
   265px to hold one line. The kit sets its padding inline, hence !important. */
.l-ask-actions .l-ask-choice {
  width: 100%;
  min-height: 52px;
  padding-inline: 16px !important;
  justify-content: center;
  text-align: center;
}
/* Two columns only where a cell can still hold its label on one line. Inside
   the card the row is the viewport minus 164px, so at 740px a cell is 280px
   and the longer label (265px) holds; below that the pair stacks, one full
   width cell under the other, in the order the question asks them. */
@media (max-width: 740px) {
  .l-ask-actions { grid-template-columns: minmax(0, 1fr); }
}

/* --- Step 03: the chosen bank, the upload block, the confirmation -------- */
.l-picked {
  display: flex;
  align-items: center;
  gap: var(--cs-2);
  flex-wrap: wrap;
  margin-bottom: var(--cs-4);
  padding: var(--cs-2) var(--cs-3);
  background: var(--surface-tint);
  border: 1px solid var(--gray-200);
}
.l-picked-k { font-size: 15px; font-weight: 100; color: #4A4A4A; }
.l-picked-v { font-size: 17px; font-weight: bold; color: var(--linder-navy); }
.l-picked .l-linkbtn { margin-inline-start: auto; }

.l-block { margin-bottom: var(--cs-4); }
.l-fielderr {
  margin: var(--cs-2) 0 0;
  font-size: 16px;
  color: var(--linder-orange-500);
}

.l-authority {
  margin-top: var(--cs-3);
  padding: var(--cs-3);
  background: var(--surface-tint);
  border: 1px solid var(--gray-200);
}
/* One row: the box, one small gap, the sentence. A grid rather than the flex
   row the details-form consents use, so a sentence that wraps stays in its own
   column and never runs back under the box.
   The shared .l-consent carries line-height 2.2, which the details form needs
   to give its inline links a 44px target. This sentence has no link, and at
   2.2 the row opened a band of empty space around a single line, so it is
   scoped back to a normal reading line height here. */
.l-authority .l-consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  /* The label keeps its 44px height because it is the click target, but the
     row sits in the middle of it rather than at the top, so a one line
     sentence does not leave a band of empty space under itself.
     align-CONTENT, not align-items: the box must stay level with the FIRST
     line when the sentence wraps, not drift to the middle of two lines. */
  align-content: center;
  gap: var(--cs-2);
  line-height: 1.5;
  padding-block: 0;
}
/* Centred on the FIRST line rather than on the whole row. */
.l-authority .l-consent input { margin-top: calc((1.5em - 22px) / 2); }

/* The recap is a card that says what it is for. */
.l-recap-title { margin: 0; font-size: 18px; font-weight: bold; color: var(--linder-navy); line-height: 1.3; }
.l-recap-lead {
  margin: var(--cs-1) 0 var(--cs-2);
  font-size: 16px;
  font-weight: 100;
  color: #4A4A4A;
  line-height: 1.45;
}

@media (max-width: 700px) {
  /* The pair is a grid now and stacks at 560px on its own; only the picked
     bank row still needs its start margin dropped here. */
  .l-picked .l-linkbtn { margin-inline-start: 0; }
}

/* The WhatsApp mark, wherever it appears. It is drawn rather than generated,
   so it takes its colour from the control around it instead of the icon
   pack's fill matrix. */
.l-wa-mark {
  display: block;
  flex: 0 0 auto;
  color: currentColor;
}
.ds-button.is-filled .l-wa-mark,
.l-cta-main .l-wa-mark { color: #fff; }

/* ---- The personal area's opening summary ------------------------------- */
/* Where the mortgage stands, in one glance, on the same 8/12/16/24/32 rhythm
   and the same square, shadowless card language as the rest of the site. It
   only ever renders figures the engine actually produced. */
.l-acct-sum {
  max-width: var(--app-max);
  margin: 0 auto 24px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--linder-orange);
  box-sizing: border-box;
}
.l-acct-sum-meta {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 100;
  color: #4A4A4A;
}
.l-acct-sum-line {
  margin: 0 0 16px;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: bold;
  line-height: 1.25;
  color: var(--linder-navy);
}
.l-acct-sum-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.l-acct-sum-cell {
  min-width: 0;
  padding: 12px;
  background: var(--surface-tint);
  border: 1px solid var(--gray-200);
}
.l-acct-sum-cell dt {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 100;
  color: #4A4A4A;
  line-height: 1.3;
}
.l-acct-sum-cell dd {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: var(--linder-navy);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.l-acct-sum-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.l-acct-sum-actions .l-linkbtn { min-height: 44px; }
/* The one "next action" area under the figures (3.9, request 66): a small
   label, at most two buttons, and one quiet link to the full list. */
.l-acct-next {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}
.l-acct-next-label {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--linder-orange-500);
}
.l-acct-sum-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 16px; }
/* A section title one step below the page's own, for the rows under the card. */
.l-section-sub { font-size: 20px; margin-top: 24px; }

/* On a phone the four figures read as two rows of two, and the primary action
   takes the full width the way the rest of the app's buttons do. */
@media (max-width: 700px) {
  .l-acct-sum { padding: 16px; margin-bottom: 20px; }
  .l-acct-sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-acct-sum-actions { flex-direction: column; align-items: stretch; }
  .l-acct-sum-actions .l-acct-sum-cta { width: 100%; justify-content: center; }
  .l-acct-sum-actions .l-linkbtn { text-align: center; }
}

/* ---- Sign in with a one-time code -------------------------------------- */
/* Same card language as the rest of the area, and sized so a phone can work
   through it one field at a time. */
.l-codelogin {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--linder-navy);
  box-sizing: border-box;
}
.l-codelogin-title {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--linder-navy);
}
.l-codelogin-note { margin: 0; font-size: 16px; font-weight: 100; color: #4A4A4A; line-height: 1.45; }
.l-codelogin-cta { width: 100%; justify-content: center; }
.l-codelogin-resend { min-height: 44px; align-self: flex-start; }
.l-codelogin-err { margin: 0; font-size: 16px; color: var(--linder-orange-500); }

/* An inline link inside a sentence that is nonetheless a real way in. Vertical
   padding grows the tap area to 44px without moving the line it sits on. */
.l-inline-cta {
  color: var(--linder-navy);
  text-decoration: underline;
  padding-block: 12px;
  margin-block: -12px;
}
.l-inline-cta:focus-visible { outline: 3px solid var(--linder-navy); outline-offset: 2px; }

/* ---- Track cards --------------------------------------------------------- */
/* One card per track. Closed it identifies the track and shows the two numbers
   that place it; open it shows only what the engine actually produced. The
   nine column table this replaced had to scroll sideways on a phone and filled
   its empty cells with the word "unknown". */
.l-tracks { display: flex; flex-direction: column; gap: 12px; }
.l-track {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-top: 3px solid var(--gray-300);
}
.l-track[data-decision="STRONG_REFINANCE_CANDIDATE"] { border-top-color: var(--linder-orange); }
.l-track[data-decision="REQUIRES_REVIEW"] { border-top-color: var(--gray-500, #767676); }
.l-track-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 14px 16px;
  font: inherit;
  text-align: start;
  background: none;
  border: none;
  cursor: pointer;
}
.l-track-head:hover { background: var(--surface-tint); }
.l-track-head:focus-visible { outline: 3px solid var(--linder-navy); outline-offset: -3px; }
.l-track-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.l-track-name { font-size: 18px; font-weight: bold; color: var(--linder-navy); line-height: 1.25; }
.l-track-sub { font-size: 15px; font-weight: 100; color: #4A4A4A; }
.l-track-facts { display: flex; gap: 16px; flex: 0 0 auto; }
.l-track-fact { display: flex; flex-direction: column; gap: 2px; }
.l-track-k { font-size: 14px; font-weight: 100; color: #4A4A4A; white-space: nowrap; }
.l-track-v {
  font-size: 17px; font-weight: bold; color: var(--linder-navy);
  direction: ltr; unicode-bidi: isolate; text-align: start;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.l-track-chev { flex: 0 0 auto; font-size: 15px; font-weight: 100; color: var(--linder-navy); text-decoration: underline; }
.l-track-panel { padding: 0 16px 16px; border-top: 1px solid var(--gray-200); }
.l-track-tag { margin: 12px 0; }
.l-track-rows { margin: 0 0 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.l-track-row { display: flex; justify-content: space-between; gap: 8px; min-width: 0; padding: 6px 0; border-bottom: 1px solid var(--gray-200); }
.l-track-row dt { margin: 0; font-size: 15px; font-weight: 100; color: #4A4A4A; }
.l-track-row dd {
  margin: 0; font-size: 16px; color: var(--linder-navy);
  direction: ltr; unicode-bidi: isolate; text-align: start;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.l-track-note { margin: 0; font-size: 16px; font-weight: 100; line-height: 1.45; color: #4A4A4A; }
.l-tracks-legend { margin-top: 4px; }

@media (max-width: 700px) {
  /* The two head numbers move under the name rather than squeezing beside it,
     and the detail list becomes one column. Nothing scrolls sideways. */
  .l-track-head { flex-wrap: wrap; gap: 8px 12px; }
  .l-track-id { flex: 1 1 100%; }
  .l-track-facts { flex: 1 1 auto; gap: 20px; }
  .l-track-chev { flex: 0 0 auto; }
  .l-track-rows { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Processing: real job stages -------------------------------------- */
.l-processing { text-align: center; padding-top: 12px; }
.l-processing-intro { text-align: right; max-width: 620px; margin: 0 auto 8px; }
.l-processing-title { margin: 20px 0 26px; }
.l-progress {
  display: inline-flex;
  flex-direction: column;
  gap: 14px;
  text-align: right;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 100%;
}
.l-progress-step {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 22px;
  font-weight: 100;
  color: var(--gray-300);
}
.l-progress-step.is-done { color: var(--linder-green); }
.l-progress-step.is-active { color: var(--linder-navy); font-weight: bold; }
.l-progress-mark { width: 24px; display: inline-block; text-align: center; flex: none; }
.l-progress-label { min-width: 0; }
.l-processing-news { max-width: 620px; margin: 0 auto; }
.l-processing-stalled {
  max-width: 620px;
  margin: 24px auto 0;
  padding: 16px;
  text-align: right;
  border: 1px solid rgba(242, 154, 64, 0.55);
  background: #fff8f0;
}
.l-processing-stalled-title {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--linder-navy, #104C8B);
}
.l-processing-stalled-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.l-processing-stalled-cta button { min-height: 44px; }
.l-processing-help { text-decoration: none; }
.l-processing-jobid { margin-top: 10px; }
@media (max-width: 480px) {
  .l-progress { display: flex; width: 100%; }
  .l-progress-step { font-size: 18px; }
  .l-processing-stalled-cta { flex-direction: column; align-items: stretch; }
  .l-processing-stalled-cta button { width: 100%; justify-content: center; }
}

/* ---- Result: delivery summary and next steps --------------------------- */
.l-delivery-rows { list-style: none; margin: 12px 0 0; padding: 0; }
.l-delivery-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #16283c;
}
.l-delivery-row.is-wait { color: #5b6b7d; }
.l-delivery-mark { flex: none; width: 20px; text-align: center; color: var(--linder-green); }
.l-delivery-row.is-wait .l-delivery-mark { color: var(--gray-300); }
.l-delivery-cta { margin-top: 16px; }
.l-delivery-cta button { min-height: 44px; }

.l-next-steps {
  margin: 12px 0 0;
  padding-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #16283c;
}
.l-next-cta { margin-top: 18px; }
.l-next-cta button { min-height: 44px; }
.l-next-confirm-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.l-next-done { margin: 0; font-weight: 700; color: var(--linder-green); }
.l-next-error { margin: 10px 0 0; color: var(--linder-orange-500); }
@media (max-width: 480px) {
  .l-next-confirm-cta { flex-direction: column; align-items: stretch; }
  .l-next-confirm-cta button { width: 100%; justify-content: center; }
  .l-delivery-cta button { width: 100%; justify-content: center; }
}

/* A single-line news headline is still a 44px tap target. */
.l-news-title { display: flex; align-items: center; min-height: 44px; }
/* So are the previous/next arrows: a 20px glyph with 6px of padding was not. */
.l-news-nav { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---- Service enquiry panel -------------------------------------------- */
/* Appended at the end of the file: inserting a rule inside an existing @media
   block once closed it early and moved the mobile layout to a wrong
   breakpoint. */
.l-svc-modal { width: min(34rem, calc(100vw - 32px)); }
.l-svc-eyebrow {
  margin: 0 0 4px;
  color: var(--linder-orange-500, var(--linder-orange));
  font-size: 16px;
  font-weight: bold;
  text-align: start;
}
.l-svc-modal .l-modal-title,
.l-svc-modal .l-modal-body { text-align: start; }
.l-svc-modal .l-modal-body { margin-bottom: 14px; }
/* Two fields to a row where there is room, one on a phone. */
.l-svc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.l-svc-field-wide { grid-column: 1 / -1; }
.l-svc-field textarea {
  box-sizing: border-box;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 0;
  font: inherit;
  font-size: 18px;
  line-height: 1.4;
  color: var(--linder-navy);
  resize: vertical;
  min-height: 62px;
}
.l-svc-field textarea:focus-visible {
  outline: 2px solid var(--linder-orange);
  outline-offset: 1px;
}
.l-svc-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 100;
  line-height: 1.45;
  color: var(--gray-700);
  cursor: pointer;
}
.l-svc-consent input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--linder-navy);
}
/* The same treatment the check form's consent links use: the hit area grows
   to 44px through padding, and the negative margin keeps the sentence on its
   own line height. An inline link inside running text cannot be made 44px
   tall any other way without breaking the paragraph. */
.l-svc-consent a {
  color: var(--linder-navy);
  font-weight: normal;
  /* 13, not 11: at this line height 11 leaves the link a 41px target, and
     the standing rule is 44. The negative margin keeps the sentence on its
     own line height either way. */
  padding-block: 13px;
  margin-block: -13px;
}
.l-svc-modal .l-modal-actions { margin-top: 4px; }
.l-svc-modal .l-modal-actions button { min-height: 44px; }
/* The three direct channels, under a rule so they read as an alternative to
   the form rather than as more form. */
.l-svc-contact {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-300);
  text-align: start;
}
.l-svc-contact-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: bold;
  color: var(--linder-navy);
}
.l-svc-contact-row { justify-content: flex-start; }
.l-svc-contact-row .l-contact-btn { min-height: 44px; }
@media (max-width: 520px) {
  .l-svc-fields { grid-template-columns: minmax(0, 1fr); }
  .l-svc-modal .l-modal-actions { flex-direction: column; align-items: stretch; }
  .l-svc-modal .l-modal-actions button { width: 100%; justify-content: center; }
}

/* ---- Opening and closing symmetry ------------------------------------- */
/* Measured, not guessed: at 320-768 the hero sat on a 20px gutter while every
   section below it dropped to 16px, the hero sentence was flush to the right
   edge of a centred column (58px off its axis at 768), and the closing panel
   stacked three different widths (head 700, button wrapper 1120, actions 720)
   on one centre. Nothing here changes content or order.
   Appended at the end of the file on purpose: inserting a rule inside an
   existing @media block once closed it early. */

/* The closing panel is one column (5.9, request 84: short, one primary call,
   one quiet secondary link, no contact row). The title, the sentence, the main
   button and the secondary line share the same edges as every other section
   head on the site, and the panel takes far less height than before. */
.l-sec-close { --close-col: 700px; }
.l-sec.is-ink.l-sec-close { padding: 26px 20px 22px; }
.l-sec-close .l-sec-eyebrow { margin-bottom: 6px; }
.l-sec-close .l-sec-title { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; }
.l-sec-close .l-sec-head,
.l-sec-close .l-sec-action,
.l-sec-close .l-sec-close-secondary {
  max-width: var(--close-col);
  margin-inline: auto;
}
.l-sec-close .l-sec-head { margin-bottom: 14px; }
/* The column is the measure now, and a line on a dark ground gets a little
   more air between rows. */
.l-sec-close .l-sec-lead {
  max-width: none;
  line-height: 1.5;
  margin-bottom: 0;
}
.l-sec-close-secondary { margin: 8px auto 0; text-align: center; font-size: 17px; color: #fff; opacity: 0.92; }
.l-linkbtn-on-ink { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; min-height: 44px; padding-inline: 4px; }
.l-linkbtn-on-ink:hover { color: var(--linder-orange); }
.l-linkbtn-on-ink:focus-visible { outline: 2px solid var(--linder-orange); outline-offset: 2px; }

@media (max-width: 800px) {
  /* Same gutter as .l-sec, so the opening block sits on the page's axis. */
  .l-hero { padding-inline: 16px; }
  /* One measure for the whole opening column: headline, sentence, list,
     button, reassurance line and the illustration under them stop being four
     different widths. `width: 100%` is required: auto margins on a grid item
     otherwise shrink it to fit its content, which collapsed the column to
     304px on a tablet. */
  .l-hero { --hero-col: 612px; }
  .l-hero-copy {
    width: 100%;
    max-width: var(--hero-col);
    margin-inline: auto;
  }
  .l-hero-split > .l-result-teaser { width: min(100%, var(--hero-col)); }
  /* A capped block inside a centred column still needs to be told to centre;
     without this the sentence hugged the inline start. */
  .l-hero-lead,
  .l-hero-reassure-line { margin-inline: auto; }
}

/* ---- Hero on one column: the list, the brand line, the reassurance ------ */
/* Measured before the change at 320-768: the list was `display: inline-block`,
   so its width was shrink-to-fit on whichever point happened to be longest
   (210px), and the reassurance line was a full width flex packed to flex-start,
   so it sat flush right while the title, the sentence and the button above it
   were centred. Appended at the end of the file on purpose: inserting a rule
   inside an existing @media block once closed it early and moved the whole
   mobile layout to the wrong breakpoint. */

@media (max-width: 800px) {
  /* A width the block is GIVEN, not one it derives from its longest line: the
     ticks and the right edge of the text then stay on the same axis whatever
     the wording is, and the block itself is centred under the sentence above. */
  .l-hero-copy .l-hero-points {
    display: block;
    width: 100%;
    max-width: var(--hero-points-col);
    margin-inline: auto;
    text-align: start;
  }
  /* Centred like everything else in the column. It was the one block still
     packed to the inline start, which is what made it read as hanging off the
     right edge under a centred button. */
  .l-hero-copy .l-hero-reassure-line { justify-content: center; }
}

/* The narrowest phones: three items and two marks leave about five pixels of
   slack on a 320px screen, which reads as crammed. Two and one, deliberately,
   rather than whatever a wrap happens to produce. The mark on the item that
   starts the second row is dropped: a mark belongs between two items on one
   line, never at the head of a line. */
@media (max-width: 380px) {
  .l-hero-reassure-line {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    row-gap: 6px;
  }
  .l-hero-reassure-line > :last-child {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .l-hero-reassure-line > :last-child::before { display: none; }
}

/* ---- Skip link --------------------------------------------------------- */
/* Off screen until it takes focus, then a real control at the top of the
   viewport. Not display:none and not visibility:hidden: either would take it
   out of the tab order, which is the whole point of it. */
.l-skip {
  position: absolute;
  /* Pinned to the inline start rather than centred: a centred pill has to be
     translated by half its own width, and at 320px that put its box outside
     the viewport even while it was off screen. */
  inset-inline-start: 16px;
  transform: translateY(-120%);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--linder-navy);
  color: #fff;
  font: inherit;
  font-size: 17px;
  text-decoration: none;
  border: 2px solid #fff;
}
.l-skip:focus {
  transform: translateY(8px);
  outline: 3px solid var(--linder-orange);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .l-skip { transition: none; }
}

/* ---- The header contact trio on the narrowest phones -------------------- */
/* The trio fills the same column as "אזור אישי" below it. Three 44px targets
   need 132px, and half of a 320px screen minus the gutters and the column gap
   is 139px, so an 8px gap would push the outer cells 3px past the column edge
   and break the very alignment this column exists for. The gap gives way, not
   the target size and not the edges. Above 344px the column is wide enough for
   the full 8px gap, which is where the base rule takes over.
   Appended at the end of the file on purpose: inserting a rule inside an
   existing @media block once closed it early. */
@media (max-width: 344px) {
  .l-hd-contact { gap: 3px; }
}

/* ---- The "where does the result go" card on the narrowest phones -------- */
/* At 320px the value column was 146px and an ordinary twenty character
   address broke into three lines with a single orphaned letter on the last
   one. The column buys back its width from the gaps, the glyph and the card
   padding rather than from the type size, which stays readable.
   Appended at the end of the file on purpose: inserting a rule inside an
   existing @media block once closed it early. */
@media (max-width: 400px) {
  .l-recap { padding: var(--cs-2); }
  .l-recap-rows {
    grid-template-columns: 18px auto minmax(0, 1fr);
    column-gap: var(--cs-1);
  }
  .l-recap-icon .l-home-side-icon { width: 16px; height: 16px; }
  .l-recap-k { font-size: 14px; }
  .l-recap-v { font-size: 16px; }
}

/* ---- The disclosure at the foot of the result --------------------------- */
/* One step down from body text and never below 14px, on the same axis as the
   result content around it. #3C3C3C on the tint measures 10.89:1, which is
   well clear of AA; a lighter grey would not be.
   Appended at the end of the file on purpose: inserting a rule inside an
   existing @media block once closed it early. */
.l-disclosure {
  margin-bottom: var(--cs-4, 24px);
  padding: var(--cs-3, 16px);
  background: var(--surface-tint, #F8FFFF);
  border: 1px solid var(--gray-200, #E3E5E8);
  border-top: 3px solid var(--linder-navy, #104C8B);
}
.l-disclosure-title {
  margin: 0 0 var(--cs-1, 8px);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: .02em;
  color: var(--linder-navy, #104C8B);
}
.l-disclosure-body {
  margin: 0;
  font-size: 15px;
  font-weight: 100;
  line-height: 1.55;
  color: var(--gray-700, #3C3C3C);
}

/* ---- Delivery rows: the label and, when a provider refused, a way back ---- */
/* Appended at the end of the file on purpose: inserting a rule inside an
   existing @media block once closed it early. */
.l-delivery-label { min-width: 0; }
.l-delivery-retry {
  margin-inline-start: auto;
  flex: none;
  min-height: 44px;
  padding-inline: 8px;
  font-size: 16px;
}

/* ==== Personal area, rebuilt 3.9 (request 67) ============================ */

/* --- Sidebar: the services group and its three sub-items ----------------- */
.l-home-side-item.is-open:not(.is-active) {
  color: var(--linder-navy);
  border-inline-color: var(--linder-navy);
}
.l-home-subnav {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface-soft);
  border-inline-start: 2px solid var(--linder-orange);
}
.l-home-side-item.is-sub {
  font-size: 17px;
  min-height: 44px;
  padding-inline-start: 34px;
  background: transparent;
  border-inline-start-color: transparent;
}
.l-home-side-item.is-sub .l-home-side-icon { width: 18px; height: 18px; }
.l-home-side-item.is-sub.is-active { background: var(--linder-navy); color: #fff; }

/* --- "המשכנתא שלי" -------------------------------------------------------- */
.l-mg-page { display: flex; flex-direction: column; gap: 0; }
.l-mg { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.l-mg + .l-mg { padding-top: 8px; border-top: 2px solid var(--gray-200); }
.l-mg-block-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--linder-navy);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.l-mg-block-count { font-size: 15px; font-weight: 100; color: var(--gray-700); }

/* The snapshot: a navy card, the balance first, then four figures. */
.l-mg-snap {
  background: var(--linder-navy);
  color: #fff;
}
.l-mg-snap-head { padding: 22px 24px 18px; }
.l-mg-snap-kicker { font-size: 16px; font-weight: 100; color: rgba(255, 255, 255, 0.78); }
.l-mg-snap-balance {
  font-family: var(--font-numeric);
  font-size: clamp(34px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  margin-top: 4px;
  direction: ltr;
  text-align: start;
  unicode-bidi: isolate;
}
.l-mg-snap-meta {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
}
.l-mg-snap-link {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.l-mg-snap-link:hover { color: var(--linder-orange); }
.l-mg-snap-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.l-mg-snap-cell {
  min-width: 0;
  padding: 14px 18px 16px;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.18);
}
.l-mg-snap-cell:last-child { border-inline-end: none; }
.l-mg-snap-cell dt { margin: 0 0 4px; font-size: 15px; font-weight: 100; color: rgba(255, 255, 255, 0.78); line-height: 1.3; }
.l-mg-snap-cell dd {
  margin: 0;
  font-family: var(--font-numeric);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.l-mg-snap-cell dd bdi { unicode-bidi: plaintext; display: inline-block; }
.l-mg-snap-cell.is-unknown dd { font-family: var(--font-display); font-size: 17px; font-weight: 100; color: rgba(255, 255, 255, 0.82); }
.l-mg-snap-sub { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 14px; font-weight: 100; color: rgba(255, 255, 255, 0.78); }

/* Alerts: one row each, an orange edge, title and the fact behind it. */
.l-mg-alerts, .l-mg-tracks {
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 18px 20px 16px;
}
.l-mg-alert-none { margin: 0; font-size: 17px; font-weight: 100; color: var(--gray-700); }
.l-mg-alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.l-mg-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--linder-orange) 10%, #fff);
  border-inline-start: 4px solid var(--linder-orange);
}
.l-mg-alert.is-missing {
  background: var(--surface-soft);
  border-inline-start-color: var(--gray-300);
}
.l-mg-alert-title { font-size: 17px; font-weight: 800; color: var(--linder-navy); }
.l-mg-alert-text { font-size: 17px; font-weight: 100; color: var(--gray-700); }

/* --- "מועדים חשובים במשכנתה" (5.9, request 81) ---------------------------- */
.l-dates { background: #fff; border: 1px solid var(--gray-200); padding: 18px 20px 16px; }
.l-dates-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.l-dates-table th, .l-dates-table td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--gray-200); vertical-align: top; font-size: 16px; line-height: 1.35; }
.l-dates-table th { font-weight: 100; color: var(--gray-700); font-size: 14.5px; }
.l-dates-table td { color: var(--linder-navy); font-weight: 800; }
.l-dates-table td.is-name { font-weight: 800; }
.l-dates-table td.is-na, .l-dates-table td.is-unknown { font-weight: 100; color: var(--gray-700); }
.l-dates-table td bdi { unicode-bidi: plaintext; }
.l-dates-sub { display: block; font-size: 14px; font-weight: 100; color: var(--gray-700); }
.l-dates-upcoming-title { margin: 8px 0 6px; font-size: 16px; font-weight: 800; color: var(--linder-navy); }
.l-dates-upcoming { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.l-dates-upcoming li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 12px; background: var(--surface-soft); border-inline-start: 4px solid var(--gray-300); font-size: 16px; }
.l-dates-upcoming li.is-soon { background: color-mix(in srgb, var(--linder-orange) 10%, #fff); border-inline-start-color: var(--linder-orange); }
.l-dates-upcoming .l-dates-when { font-weight: 800; color: var(--linder-navy); font-family: var(--font-numeric); unicode-bidi: plaintext; }
.l-dates-upcoming .l-dates-what { font-weight: 100; color: var(--gray-700); }
.l-dates-soon-tag { font-size: 13px; font-weight: 800; color: var(--linder-orange-500); }
.l-dates-note { margin: 6px 0 0; font-size: 15px; font-weight: 100; color: var(--gray-700); line-height: 1.4; }
@media (max-width: 700px) {
  .l-dates { padding: 14px 14px 12px; }
  .l-dates-table thead { display: none; }
  .l-dates-table tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid var(--gray-200); }
  .l-dates-table td { border: 0; padding: 2px 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
  .l-dates-table td::before { content: attr(data-label) ": "; font-weight: 100; color: var(--gray-700); font-size: 14px; }
  .l-dates-table td.is-name::before { content: none; }
  .l-dates-table td.is-name { font-size: 17px; }
}

/* The files pointer on "המשכנתא שלי" (5.9, request 81): one secondary action
   to the checks and reports, no file cards on this page. */
.l-files-pointer { display: flex; flex-direction: column; gap: 12px; }
.l-files-pointer .l-cta { margin: 0; }

/* The tracks accordion, closed by default: name, four figures, the toggle. */
.l-trk { border-top: 1px solid var(--gray-200); }
.l-trk-head {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 2.6fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  min-height: 56px;
}
.l-trk-head:hover .l-trk-name, .l-trk.is-open .l-trk-name { color: var(--linder-navy); }
.l-trk-head:focus-visible { outline: 2px solid var(--linder-orange); outline-offset: 2px; }
.l-trk-name { font-size: 18px; font-weight: 800; color: var(--linder-navy); display: flex; flex-direction: column; gap: 2px; }
.l-trk-loan { font-size: 14px; font-weight: 100; color: var(--gray-700); }
.l-trk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.l-trk-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.l-trk-stat-label { font-size: 13.5px; font-weight: 100; color: var(--gray-700); line-height: 1.2; }
.l-trk-stat-value {
  font-family: var(--font-numeric);
  font-size: 17px;
  font-weight: 800;
  color: var(--linder-navy);
  /* A number runs LTR, a Hebrew reading ("240 חודשים (20 שנים)") runs RTL:
     the first strong character decides, so no Hebrew word is ever flipped. */
  unicode-bidi: plaintext;
  text-align: start;
  overflow-wrap: anywhere;
}
.l-trk-stat.is-unknown .l-trk-stat-value { font-family: var(--font-display); font-weight: 100; color: var(--gray-700); font-size: 15px; }
/* The open/close control: a navy outlined pill with its word and a chevron
   that turns when the row is open. Visible at every width, never a bare mark. */
.l-trk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 10px 0 6px;
  border: 1.5px solid var(--linder-navy);
  color: var(--linder-navy);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  justify-self: end;
}
.l-trk-toggle-chev { transition: transform 0.15s ease; }
.l-trk.is-open .l-trk-toggle { background: var(--linder-navy); color: #fff; }
.l-trk.is-open .l-trk-toggle-chev { transform: rotate(180deg); }
.l-trk-head:hover .l-trk-toggle { border-color: var(--linder-orange); }
@media (prefers-reduced-motion: reduce) { .l-trk-toggle-chev { transition: none; } }
.l-trk-body {
  margin: 0;
  padding: 4px 4px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
.l-trk-row { min-width: 0; padding: 10px 12px; background: var(--surface-soft); border: 1px solid var(--gray-200); }
.l-trk-row dt { margin: 0 0 3px; font-size: 14px; font-weight: 100; color: var(--gray-700); }
.l-trk-row dd { margin: 0; font-size: 17px; font-weight: 800; color: var(--linder-navy); overflow-wrap: anywhere; }
.l-trk-row dd bdi { unicode-bidi: isolate; }
.l-trk-row.is-unknown dd { font-weight: 100; color: var(--gray-700); }

/* The personal area's track rows (4.9, request 76). Every track is one
   horizontal line, RTL: name at the start, five "label: value" cells in one
   fixed order, the labelled pill at the end, a thin rule between tracks and
   no card. The list is a grid and every row a subgrid of it, so a column is
   the same width in every track and the cells line up top to bottom. A cell
   keeps its label and value on one line (flex row, the label never breaks);
   only a value wider than its whole column wraps between its own words.
   Three shapes of the same markup, by width:
   - 1600px and up (the main column is ~900px): one real line, seven columns.
   - 1200 to 1599 (main column ~750px, too narrow for the term reading): the
     name and the pill on the first line, the five cells on the second, in
     five subgrid columns that stay aligned across tracks.
   - under 1200: a compact card-row, name and pill first, the cells a
     wrapping run underneath in the same order; a pair is never split. */
.l-mg-tracks.is-rows { padding: 16px 20px 6px; }
.l-mg-tracks.is-rows .l-trk-list {
  display: grid;
  grid-template-columns: minmax(0, auto) repeat(5, minmax(0, auto)) auto;
  column-gap: 14px;
}
.l-mg-tracks.is-rows .l-trk { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; border-top: 0; }
.l-mg-tracks.is-rows .l-trk + .l-trk { border-top: 1px solid var(--gray-200); }
.l-mg-tracks.is-rows .l-trk-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 0 16px;
  padding: 10px 0;
  min-height: 56px;
}
.l-mg-tracks.is-rows .l-trk-head:hover { background: var(--surface-soft); }
.l-mg-tracks.is-rows .l-trk-cells { display: contents; }
.l-mg-tracks.is-rows .l-trk-name { font-size: 18px; }
.l-mg-tracks.is-rows .l-trk-body { grid-column: 1 / -1; padding: 4px 0 16px; }
.l-trk-cell {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
.l-trk-cell-k { font-size: 14.5px; font-weight: 100; color: var(--gray-700); white-space: nowrap; }
.l-trk-cell-v {
  font-family: var(--font-numeric);
  font-size: 17px;
  font-weight: 800;
  color: var(--linder-navy);
  unicode-bidi: plaintext;
  text-align: start;
  min-width: 0;
}
.l-trk-cell.is-unknown .l-trk-cell-v { font-family: var(--font-display); font-weight: 100; color: var(--gray-700); font-size: 14px; }
.l-mg-tracks.is-rows .l-trk-toggle { min-height: 44px; }
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .l-mg-tracks.is-rows .l-trk-list { grid-template-columns: repeat(5, minmax(0, auto)); }
  .l-mg-tracks.is-rows .l-trk-head { grid-template-rows: auto auto; row-gap: 2px; padding: 8px 0 10px; }
  .l-mg-tracks.is-rows .l-trk-name { grid-column: 1 / 5; grid-row: 1; }
  .l-mg-tracks.is-rows .l-trk-toggle { grid-column: 5; grid-row: 1; }
  .l-mg-tracks.is-rows .l-trk-cell { grid-row: 2; }
}
@media (max-width: 1199.98px) {
  .l-mg-tracks.is-rows .l-trk-list { display: block; }
  .l-mg-tracks.is-rows .l-trk { display: block; }
  .l-mg-tracks.is-rows .l-trk-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name toggle" "cells cells";
    gap: 6px 12px;
    padding: 10px 0;
    min-height: 0;
  }
  .l-mg-tracks.is-rows .l-trk-name { grid-area: name; }
  .l-mg-tracks.is-rows .l-trk-toggle { grid-area: toggle; }
  .l-mg-tracks.is-rows .l-trk-cells { display: flex; flex-wrap: wrap; grid-area: cells; gap: 4px 18px; min-width: 0; }
  .l-mg-tracks.is-rows .l-trk-cell { flex: 0 1 auto; }
}
/* A browser without subgrid gets the compact card-row at every width. */
@supports not (grid-template-columns: subgrid) {
  .l-mg-tracks.is-rows .l-trk-list { display: block; }
  .l-mg-tracks.is-rows .l-trk { display: block; }
  .l-mg-tracks.is-rows .l-trk-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas: "name toggle" "cells cells";
    gap: 6px 12px;
    padding: 10px 0;
    min-height: 0;
  }
  .l-mg-tracks.is-rows .l-trk-name { grid-area: name; }
  .l-mg-tracks.is-rows .l-trk-toggle { grid-area: toggle; }
  .l-mg-tracks.is-rows .l-trk-cells { display: flex; flex-wrap: wrap; grid-area: cells; gap: 4px 18px; min-width: 0; }
  .l-mg-tracks.is-rows .l-trk-cell { flex: 0 1 auto; grid-row: auto; }
}
@media (max-width: 700px) {
  .l-mg-tracks.is-rows { padding: 12px 14px 4px; }
  .l-mg-tracks.is-rows .l-trk-cells { gap: 3px 14px; }
}
/* 320 to 360: the longest term reading ("359 חודשים (29 שנים ו-11 חודשים)")
   must still hold one line inside its cell, so the block's side padding and
   the value size come down a step. */
@media (max-width: 360px) {
  .l-mg-tracks.is-rows { padding-inline: 10px; }
  .l-mg-tracks.is-rows .l-trk-cell-v { font-size: 15px; }
}

.l-mg-empty { background: #fff; border: 1px solid var(--gray-200); border-top: 3px solid var(--linder-orange); padding: 20px 22px; }
.l-mg-empty-title { font-size: 20px; font-weight: 800; color: var(--linder-navy); margin-bottom: 6px; }

@media (max-width: 700px) {
  .l-mg-snap-head { padding: 18px 16px 14px; }
  .l-mg-snap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-mg-snap-cell { padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .l-mg-snap-cell:nth-child(2n) { border-inline-end: none; }
  .l-mg-snap-cell:nth-last-child(-n+2) { border-bottom: none; }
  .l-mg-snap-cell dd { font-size: 20px; }
  .l-mg-alerts, .l-mg-tracks { padding: 14px 14px 12px; }
  .l-trk-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name chev" "stats stats"; row-gap: 8px; }
  .l-trk-name { grid-area: name; }
  .l-trk-stats { grid-area: stats; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-trk-toggle { grid-area: chev; }
  .l-trk-body { grid-template-columns: minmax(0, 1fr); }
}

/* Designed result section titles: one orange mark, no extra icons. */
.l-result-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  color: var(--linder-navy);
  line-height: 1.2;
}
.l-result-h::before {
  content: "";
  width: 6px;
  height: 1.05em;
  background: var(--linder-orange);
  flex-shrink: 0;
}
.l-result-h .l-mg-block-count { font-size: 15px; font-weight: 100; color: var(--gray-700); }
.l-advice {
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 18px 20px 16px;
  margin: 0 0 20px;
}
.l-advice-score { margin-bottom: 16px; }
.l-advice-explain {
  text-align: center;
  margin: 10px 0 4px;
  font-weight: 800;
  color: var(--linder-navy);
}
.l-advice-caption { text-align: center; }
.l-result-files { padding-inline: 0; margin: 0 0 20px; }
.l-done .l-result-h { font-size: clamp(26px, 3.2vw, 34px); }

/* --- Short completion after a check -------------------------------------- */
.l-done { max-width: 720px; }
.l-done-headline {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: var(--linder-navy);
  line-height: 1.35;
}
.l-done-why { margin: 0 0 20px; }
.l-done-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  background: var(--linder-navy);
  color: #fff;
  margin: 0 0 20px;
}
.l-done-cell {
  margin: 0;
  padding: 16px 18px;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.l-done-cell:nth-child(2n) { border-inline-end: none; }
.l-done-cell:nth-child(odd):last-child { grid-column: 1 / -1; border-inline-end: none; }
.l-done-cell dt {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.3;
}
.l-done-cell dd {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.l-done-cell dd bdi { unicode-bidi: plaintext; display: inline-block; }
.l-done-cell.is-unknown dd { font-size: 17px; font-weight: 100; color: rgba(255, 255, 255, 0.82); }
.l-done-note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.78);
}
.l-done-saved { margin: 0 0 14px; }
.l-done-delivery {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.l-done-delivery-row {
  font-size: 16px;
  font-weight: 100;
  color: var(--gray-700);
  min-height: 32px;
  display: flex;
  align-items: center;
}
.l-done-cta { margin-bottom: 16px; }
.l-done-expert { margin-bottom: 24px; }
/* The tracks under the figures on the close: the same accordion block as
   "המשכנתא שלי", spaced like the grid above it. */
.l-done-tracks { margin: 0 0 20px; }
.l-done-tracks .l-mg-tracks { padding: 16px 18px 12px; }
.l-share-actions { margin-top: 18px; }
.l-link-problem { width: 100%; max-width: 640px; }
.l-share-done { width: 100%; max-width: 720px; margin-inline: auto; }
.l-rep-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 799px) {
  .l-done-grid { grid-template-columns: minmax(0, 1fr); }
  .l-done-cell { border-inline-end: none; }
  .l-done-cell:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .l-done-cell:last-child { border-bottom: none; }
}

/* --- "הבדיקות והדוחות שלי" ------------------------------------------------ */
.l-rep-page { display: flex; flex-direction: column; gap: 0; }
.l-rep-lead { margin: 4px 0 18px; }
.l-rep-list { display: flex; flex-direction: column; gap: 16px; }
.l-rep-empty, .l-mg-alert-none { font-size: 17px; }
.l-rep-empty { background: #fff; border: 1px solid var(--gray-200); padding: 18px 20px; font-weight: 100; color: var(--gray-700); }
.l-rep-card { background: #fff; border: 1px solid var(--gray-200); border-top: 3px solid var(--linder-navy); }
.l-rep-card.is-closed { border-top-color: var(--gray-300); }
.l-rep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px 0;
}
/* The compact history row (5.9, request 81): date, bank, status, balance
   and the short result on one strip, a labelled toggle at the end; the two
   files and the actions open under it, newest check open by default. */
.l-rep-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 20px 14px; }
.l-rep-summary-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.l-rep-card.is-closed .l-rep-summary { padding-bottom: 16px; }
.l-rep-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--linder-navy);
  background: #fff;
  color: var(--linder-navy);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}
.l-rep-toggle:hover { border-color: var(--linder-orange); color: var(--linder-orange-500); }
.l-rep-toggle:focus-visible { outline: 2px solid var(--linder-orange); outline-offset: 2px; }
.l-rep-toggle-chev { transition: transform 0.15s ease; }
.l-rep-card.is-open .l-rep-toggle { background: var(--linder-navy); color: #fff; }
.l-rep-card.is-open .l-rep-toggle-chev { transform: rotate(180deg); }
.l-rep-body { border-top: 1px solid var(--gray-200); }
@media (prefers-reduced-motion: reduce) { .l-rep-toggle-chev { transition: none; } }
.l-rep-when { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.l-rep-date { font-size: 21px; font-weight: 800; color: var(--linder-navy); }
.l-rep-bank { font-size: 17px; font-weight: 100; color: var(--gray-700); }
.l-rep-status {
  font-size: 14px;
  font-weight: 800;
  padding: 4px 10px;
  border: 1px solid var(--linder-navy);
  color: var(--linder-navy);
  white-space: nowrap;
}
.l-rep-status.is-done { background: var(--linder-navy); color: #fff; }
.l-rep-status.is-open { border-color: var(--linder-orange-500); color: var(--linder-orange-500); }
.l-rep-headline { margin: 0; font-size: 19px; font-weight: 800; color: var(--linder-navy); line-height: 1.3; }
.l-rep-facts { margin: 0; font-size: 16px; font-weight: 100; color: var(--gray-700); }
.l-rep-files { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; }
.l-rep-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--gray-200);
}
.l-rep-file-copy { min-width: 0; flex: 1 1 220px; }
.l-rep-file-title { font-size: 18px; font-weight: 800; color: var(--linder-navy); line-height: 1.3; }
.l-rep-file-note { margin-top: 3px; font-size: 15px; font-weight: 100; color: var(--gray-700); line-height: 1.35; overflow-wrap: anywhere; }
.l-rep-file-none { font-size: 15px; font-weight: 100; color: var(--gray-700); }
/* The honest state line under a file that is not ready (5.9, request 78). */
.l-rep-file-state { margin-top: 6px; font-size: 15px; font-weight: 800; color: var(--linder-navy); line-height: 1.35; }
.l-rep-file-state.is-failed, .l-rep-file-state.is-unavailable { color: var(--linder-orange-500); }
.l-rep-retry { font-size: 15px; min-height: 0; padding: 0; margin-inline-start: 4px; }
/* Three actions, always in this order (RTL: view, download, share). A file
   that is not ready keeps the same three, disabled, so the row never changes
   shape between states. */
.l-rep-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 1; min-width: 0; max-width: 100%; }
.l-rep-actions .l-doc-action { padding: 0 12px; }
.l-rep-actions .l-doc-action:disabled { opacity: 0.45; }
.l-rep-actions .l-doc-action-primary:disabled { background: var(--gray-300); border-color: var(--gray-300); color: #fff; }
.l-rep-actions .l-doc-action-accent:disabled { background: var(--gray-200); border-color: var(--gray-200); color: var(--gray-700); }
/* The share control is transparent to layout: its button is the third action
   and its message (or the manual copy field) is a full row under the three,
   on every width, so a long signed link can never push the row wider. */
.l-rep-share { display: contents; }
.l-rep-share-msg { flex: 1 1 100%; min-width: 0; font-size: 15px; font-weight: 100; color: var(--linder-navy); overflow-wrap: anywhere; }
.l-rep-share-msg.is-error { color: var(--linder-orange-500); }
.l-rep-share-manual { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100%; min-width: 0; max-width: 100%; }
.l-rep-share-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 10px;
  border: 2px solid var(--linder-navy);
  border-radius: 0;
  background: #fff;
  color: var(--linder-navy);
  font: inherit;
  font-size: 15px;
  text-align: left;
}
.l-rep-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 20px 12px;
  border-top: 1px solid var(--gray-200);
}
.l-rep-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.l-rep-link.is-quiet { color: var(--gray-700); }
.l-rep-link.is-quiet:hover { color: var(--linder-orange-500); }
@media (max-width: 700px) {
  .l-rep-head, .l-rep-files, .l-rep-foot, .l-rep-summary { padding-inline: 14px; }
  .l-rep-toggle { flex: 1 1 100%; justify-content: center; }
  .l-rep-file { flex-direction: column; align-items: stretch; }
  /* In a column the copy must not keep its row flex-basis, or 220px of it
     becomes empty height above the buttons. */
  .l-rep-file-copy { flex: 0 0 auto; }
  /* The three actions share the row equally; a share message or the manual
     copy field takes a full row under them, never a fourth column. */
  .l-rep-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .l-rep-actions .l-doc-action { padding: 0 6px; min-width: 0; }
  .l-rep-actions .l-rep-share-msg, .l-rep-actions .l-rep-share-manual { grid-column: 1 / -1; }
}

/* --- "שירותים נוספים" ----------------------------------------------------- */
.l-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.l-svc-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  min-height: 190px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--linder-navy);
  font: inherit;
  color: var(--linder-navy);
  text-align: start;
  cursor: pointer;
}
.l-svc-card:hover { border-color: var(--linder-navy); border-top-color: var(--linder-orange); }
.l-svc-card:focus-visible { outline: 2px solid var(--linder-orange); outline-offset: 2px; }
.l-svc-icon { display: flex; }
.l-svc-title { font-size: 21px; font-weight: 800; }
.l-svc-blurb { font-size: 16px; font-weight: 100; color: var(--gray-700); line-height: 1.4; flex: 1; }
.l-svc-go { font-size: 16px; font-weight: 800; color: var(--linder-navy); text-decoration: underline; text-underline-offset: 3px; }
.l-svc-card:hover .l-svc-go { color: var(--linder-orange-500); }
.l-svc-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  margin-bottom: 4px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  color: var(--linder-navy);
  cursor: pointer;
}
.l-svc-back:hover { color: var(--linder-orange-500); }
@media (max-width: 800px) {
  .l-svc-grid { grid-template-columns: minmax(0, 1fr); }
  .l-svc-card { min-height: 0; }
}

/* --- "הגדרות" -------------------------------------------------------------- */
/* Six equal cards (5.9, request 83): a narrow orange bar at the inline start,
   one icon, one title, start-aligned body. One column on a phone, two
   symmetric columns on a desk, every card stretched to its row. */
.l-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.l-set-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-inline-start: 4px solid var(--linder-orange);
  padding: 18px 20px 18px;
}
.l-set-head { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0 0 12px; }
.l-set-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; background: var(--surface-soft); color: var(--linder-navy); }
.l-set-icon .l-home-side-icon, .l-set-icon .l-act-icon { width: 22px; height: 22px; }
.l-set-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--linder-navy); line-height: 1.2; }
.l-set-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.l-set-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.l-set-sub { margin-top: 10px; }
@media (min-width: 900px) {
  .l-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.l-set-grid { gap: 16px; }
.l-set-email { direction: ltr; text-align: end; overflow-wrap: anywhere; }
.l-set-cta { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.l-set-line { margin: 0 0 12px; }
/* A link inside a settings sentence keeps the line's height but takes a
   44px hit area, through padding that a negative margin folds back. */
.l-set-line a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.l-set-google { margin: 4px 0 12px; }
.l-set-legal { margin: 0; }
.l-set-legal a { color: var(--linder-navy); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.l-set-danger { margin-top: 16px; }
/* The locked e-mail (5.9, request 80): the same field shape as the editable
   ones, visibly not editable, with its reason right under it. */
.l-set-locked-field input[disabled] { color: var(--gray-700); background: var(--surface-soft); cursor: not-allowed; }
.l-set-locked-field > label > span:last-child { background: var(--surface-soft); }
.l-set-locked-note { margin: 6px 0 0; }
.l-set-inline-email { direction: ltr; unicode-bidi: isolate; }
.l-set-status { font-weight: 800; color: var(--linder-navy); }
.l-set-legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.l-set-legal-list a { color: var(--linder-navy); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; }
.l-ext-data { margin-bottom: 16px; }
@media (max-width: 700px) {
  .l-set-section { padding: 16px 14px 14px; }
  .l-set-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Home: the personal area as a preview and a sign-in card ------------ */
/* 7.9, request 87. Three tiles that name what the area holds and one card
   that is the way in. Side by side on a desk, stacked on a phone; the tiles
   become one column of compact rows under 520px so nothing scrolls sideways.
   The glyph plate (40px, thin rule, 22px line icon) is the footer's plate on
   a light ground, so the two read as one icon language. Orange stays an
   accent: the eyebrow and the hover, never a second call-to-action colour. */
.l-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: start;
}
.l-area-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.l-area-tile {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
  padding: 14px 14px 12px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-top: 3px solid var(--linder-navy);
}
.l-area-tile-text { min-width: 0; }
.l-area-tile h3 {
  margin: 0 0 3px;
  color: var(--linder-navy);
  font-size: 19px;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.l-area-tile p {
  margin: 0;
  color: var(--gray-700);
  font-size: 16px;
  font-weight: 100;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.l-area-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  box-sizing: border-box;
  background: var(--surface-tint, #F8FFFF);
  border: 1.5px solid var(--linder-navy);
  color: var(--linder-navy);
}
.l-area-badge .l-home-side-icon { width: 22px; height: 22px; color: var(--linder-navy); }
.l-area-login {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  padding: 18px 18px 16px;
  background: #fff;
  border: 2px solid var(--linder-navy);
}
.l-area-login .l-area-badge { background: var(--linder-navy); color: #fff; }
.l-area-login .l-area-badge .l-home-side-icon { color: #fff; }
.l-area-login h3 {
  margin: 0;
  color: var(--linder-navy);
  font-size: 21px;
  line-height: 1.2;
}
.l-area-login p {
  margin: 0;
  color: var(--gray-700);
  font-size: 16px;
  font-weight: 100;
  line-height: 1.45;
}
.l-area-login-btn {
  margin-top: auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  box-sizing: border-box;
  background: var(--linder-navy);
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.l-area-login-btn .l-home-side-icon { width: 22px; height: 22px; color: #fff; }
.l-area-login-btn:hover { background: var(--linder-orange); color: var(--linder-navy); }
.l-area-login-btn:hover .l-home-side-icon { color: var(--linder-navy); }
.l-area-login-btn:focus-visible { outline: 3px solid var(--linder-orange); outline-offset: 2px; }
@media (max-width: 1080px) {
  .l-area { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
  .l-area-preview { gap: 10px; }
  .l-area-tile { padding: 14px 12px 12px; }
}
@media (max-width: 800px) {
  /* One column on a phone: each service card is as tall as its own words.
     The desk's equal rows (grid-auto-rows: 1fr) stretched a two-line card to
     the height of the longest one and left a void under the action. */
  .l-services { grid-auto-rows: auto; }
  .l-area { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* The sign-in card as one compact block: the plate at the inline start with
     the title and sentence beside it, the button across the bottom. */
  .l-area-login {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'badge title' 'badge text' 'btn btn';
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 14px 14px;
  }
  .l-area-login .l-area-badge { grid-area: badge; }
  .l-area-login h3 { grid-area: title; align-self: end; }
  .l-area-login p { grid-area: text; }
  .l-area-login-btn { grid-area: btn; margin-top: 10px; }
}
@media (max-width: 520px) {
  /* One column of rows: the plate at the inline start, the words beside it,
     so three tiles cost about 190px instead of three tall cards. */
  .l-area-preview { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .l-area-tile { flex-direction: row; align-items: flex-start; gap: 12px; padding: 10px 12px; }
  .l-area-tile h3 { font-size: 18px; margin-bottom: 2px; }
  .l-area-tile p { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .l-area-login-btn { transition: none; }
}

/* ---- Home: service cards with a glyph plate and a quiet action ---------- */
/* 7.9, request 87. The same 40px plate as the tiles above; the action is a
   text link with a small arrow, sitting on the card's bottom line, not a
   full-width button. The arrow is the one orange accent on the card. */
.l-service-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  box-sizing: border-box;
  background: var(--surface-tint, #F8FFFF);
  border: 1.5px solid var(--linder-navy);
  color: var(--linder-navy);
}
.l-service-badge .l-home-side-icon { width: 22px; height: 22px; color: var(--linder-navy); }
.l-service-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 2px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--linder-navy);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
}
.l-service-cta .l-home-side-icon { width: 18px; height: 18px; color: var(--linder-orange-500, var(--linder-orange)); }
.l-service-cta:hover { color: var(--linder-orange-500, var(--linder-orange)); }
.l-service-cta:focus-visible { outline: 2px solid var(--linder-orange); outline-offset: 2px; }

/* ---- Service enquiry panel: header, buttons, direct bar ----------------- */
/* 7.9, request 87. A header row (glyph plate, eyebrow and title, corner
   close), the fields as before with their labels above, one primary
   "שליחת פנייה" with an inline send glyph, a small text "ביטול", and the
   three direct channels as one compact bar. No PNG glyph in any button here;
   the send flow itself did not change. */
.l-svc-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.l-svc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  box-sizing: border-box;
  background: var(--surface-tint, #F8FFFF);
  border: 1.5px solid var(--linder-navy);
  color: var(--linder-navy);
}
.l-svc-mark .l-home-side-icon { width: 26px; height: 26px; color: var(--linder-navy); }
.l-svc-head-text { min-width: 0; }
.l-svc-head .l-svc-eyebrow { margin: 0 0 2px; }
.l-svc-head .l-modal-title { margin: 0; overflow-wrap: break-word; }
.l-svc-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  align-self: start;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--linder-navy);
  cursor: pointer;
}
.l-svc-close .l-home-side-icon { width: 22px; height: 22px; color: var(--linder-navy); }
.l-svc-close:hover { border-color: var(--linder-navy); }
.l-svc-close:focus-visible { outline: 2px solid var(--linder-orange); outline-offset: 2px; }
.l-svc-close:disabled { opacity: 0.5; cursor: default; }
.l-svc-field > span { font-size: 16px; font-weight: bold; }
.l-svc-modal .l-modal-actions { align-items: center; gap: 12px 16px; }
.l-svc-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  box-sizing: border-box;
  background: var(--linder-navy);
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.l-svc-submit .l-home-side-icon { width: 22px; height: 22px; color: #fff; }
.l-svc-submit:hover { background: var(--linder-orange); color: var(--linder-navy); }
.l-svc-submit:hover .l-home-side-icon { color: var(--linder-navy); }
.l-svc-submit:focus-visible { outline: 3px solid var(--linder-orange); outline-offset: 2px; }
.l-svc-submit:disabled { opacity: 0.6; cursor: default; }
.l-svc-cancel {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--linder-navy);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.l-svc-cancel:hover { color: var(--linder-orange-500, var(--linder-orange)); }
.l-svc-cancel:focus-visible { outline: 2px solid var(--linder-orange); outline-offset: 2px; }
.l-svc-cancel:disabled { opacity: 0.5; cursor: default; }
.l-svc-modal .l-svc-contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 16px;
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--surface-tint, #F8FFFF);
  border: 1px solid var(--gray-300);
  border-top: 1px solid var(--gray-300);
}
.l-svc-modal .l-svc-contact-title { margin: 0; }
.l-contacts.is-direct {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 300px;
  margin: 0 0 0 auto;
}
.l-svc-direct-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 2px;
  color: var(--linder-navy);
  text-decoration: none;
}
.l-svc-direct-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid var(--linder-navy);
  color: var(--linder-navy);
}
.l-svc-direct-icon .l-home-side-icon { width: 20px; height: 20px; color: var(--linder-navy); }
.l-svc-direct-label { font-size: 13.5px; line-height: 1.2; font-weight: bold; white-space: nowrap; }
.l-svc-direct-btn:hover .l-svc-direct-icon { border-color: var(--linder-orange-500, var(--linder-orange)); }
.l-svc-direct-btn:hover .l-svc-direct-icon .l-home-side-icon,
.l-svc-direct-btn:hover .l-svc-direct-label { color: var(--linder-orange-500, var(--linder-orange)); }
.l-svc-direct-btn:focus-visible { outline: 2px solid var(--linder-orange); outline-offset: 2px; }
@media (max-width: 520px) {
  .l-svc-modal { padding: 18px 16px; }
  .l-svc-head { gap: 10px; }
  .l-svc-mark { width: 44px; height: 44px; }
  .l-svc-modal .l-svc-contact { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
  .l-contacts.is-direct { max-width: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .l-svc-submit { transition: none; }
}

/* ---- Service guides: "איך מוציאים..." (8.9, request 92) ---------------- */
/* A quiet secondary action on the home card and in the personal area, and
   one compact guide dialog shared by both: the enquiry panel's header,
   numbered steps on square navy plates, a "מה צריך להכין?" box, one navy
   link to the official site (new tab), a small text close and one note.
   Sharp corners, no shadow, no emoji. The card stays compact: the guide
   opens only on request. On a phone the dialog stays inside the viewport
   and scrolls inside itself. */
.l-service > .l-service-actions { margin-top: auto; }
.l-service-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
}
.l-guide-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 2px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--linder-navy);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: bold;
  line-height: 1.2;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.l-guide-open .l-home-side-icon { width: 20px; height: 20px; flex: none; color: var(--linder-orange-500, var(--linder-orange)); }
.l-guide-open:hover { color: var(--linder-orange-500, var(--linder-orange)); }
.l-guide-open:focus-visible { outline: 2px solid var(--linder-orange); outline-offset: 2px; }
/* Under the one explanation of an area, and under the one sentence of the
   credit upload card. */
.l-guide-open-area { margin: -8px 0 14px; }
.l-guide-open-inline { margin-top: 4px; }

.l-gm .l-modal-body { margin-bottom: 14px; }
.l-gm-steps {
  list-style: none;
  counter-reset: gm-step;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.l-gm-steps li {
  counter-increment: gm-step;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 17px;
  font-weight: 100;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.l-gm-steps li::before {
  content: counter(gm-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--linder-navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.l-gm-prepare {
  margin: 0 0 16px;
  padding: 12px 14px;
  box-sizing: border-box;
  background: var(--surface-tint, #F8FFFF);
  border: 1px solid var(--gray-200);
  border-inline-start: 3px solid var(--linder-orange);
}
.l-gm-prepare h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--linder-navy);
}
.l-gm-prepare ul {
  margin: 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 4px;
  font-size: 16px;
  font-weight: 100;
  line-height: 1.45;
  color: var(--gray-700);
}
.l-gm .l-modal-actions { align-items: center; gap: 12px 16px; }
.l-gm .l-modal-actions .l-gm-link { min-height: 44px; text-decoration: none; }
.l-gm-note {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.45;
  color: var(--gray-700);
}
@media (max-width: 520px) {
  .l-gm .l-modal-actions { flex-direction: column; align-items: stretch; }
  .l-gm .l-modal-actions .l-gm-link { width: 100%; justify-content: center; }
  .l-gm-steps li { font-size: 16px; }
}
/* On a phone the action bar (.l-mobar, z 60, later in the DOM) painted above
   the backdrop, so a tap on the bar while a guide was open reached the bar.
   The guide and its backdrop sit above it; nothing else about the bar moves. */
.l-gm-backdrop { z-index: 62; }
.l-modal.l-gm { z-index: 63; }