/**
 * Tax refund calculator - shared by [tr_calc] and [tr_calc_full].
 *
 * The visual design is the live prototype's, which has been in front of real
 * traffic. Everything is scoped under .tr-calc so none of it can reach the rest
 * of the site, and nothing here depends on theme.css.
 *
 * Loaded only on pages where one of the two shortcodes renders.
 *
 * ---------------------------------------------------------------------------
 * Isolation
 *
 * [tr_calc] wraps itself in .tr-calc-isolated. Inside that element every author
 * declaration from elsewhere - Elementor's, the theme's, a plugin's - is rolled
 * back to the browser's own styles by `all: revert`, so the calculator is
 * dressed by this file and nothing else.
 *
 * The reset is matched through both the class and the attribute on the wrapper.
 * A universal selector contributes nothing to specificity, so the plain
 * .tr-calc-isolated * would score one class - under a theme rule as ordinary as
 * .elementor-widget p, which would then survive the reset. Class plus attribute
 * scores two and clears those.
 *
 * That in turn is why every rule below is scoped under .tr-calc rather than
 * written as a bare .tr-calc__x: it has to match the reset's two to survive it,
 * and because the reset is declared first, matching is enough. Adding a rule
 * here means keeping the .tr-calc prefix, or the element arrives undressed.
 *
 * The root element is matched as .tr-calc[data-calc] for the same reason: it is
 * itself a descendant of the wrapper.
 *
 * Elementor is left switched on and untouched. Nothing here opts the long
 * calculator into the wrapper, so [tr_calc_full] renders exactly as before.
 */

.tr-calc-isolated[data-tr-isolate],
.tr-calc-isolated[data-tr-isolate] * {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
}

/* Rubik, inside the wrapper only. Descendants inherit it through the reset
   above; the long calculator is not wrapped and keeps the page's typeface. */
.tr-calc-isolated[data-tr-isolate] {
  font-family: 'Rubik', 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

.tr-calc[data-calc] {
  /* Brand tokens. Every component reads these rather than a literal, so a brand
     change is this block and nothing else. */
  --tr-brand: #386783;
  --tr-brand-dark: #2A5068;
  --tr-brand-tint: #EAF1F6;
  --tr-brand-tint-strong: #D3E2EC;
  --tr-brand-glow: rgba(56, 103, 131, 0.14);
  --tr-pain: #B82733;
  --tr-ink-soft: #3B4858;

  /* The two originals now point at the brand: they are what the buttons, tiles
     and meters were painted with, and leaving them navy would have left half the
     form in the old palette. */
  --tr-primary: var(--tr-brand);
  --tr-primary-light: var(--tr-brand-dark);
  --tr-accent: #48ac66;
  --tr-accent-hover: #3d9558;
  --tr-accent-light: #d1fae5;
  --tr-orange: #f97316;
  --tr-orange-hover: #ea580c;
  --tr-hope-blue: #3b82f6;
  --tr-hope-teal: #14b8a6;
  --tr-bg: #f4f6f8;
  --tr-card: #ffffff;
  --tr-ink: #142030;
  --tr-muted: #6B7788;
  --tr-line: #E4EAF0;
  --tr-err: #b32d2e;
  --tr-shadow-sm: 0 2px 6px rgba(10, 31, 77, 0.06);
  --tr-shadow: 0 4px 12px rgba(10, 31, 77, 0.08);

  box-sizing: border-box;
  max-width: 900px;
  margin: 24px auto;
  font-family: inherit;
  color: var(--tr-ink);
  line-height: 1.6;
  /* Clears the rounded corners and camera cut-outs on notched phones; max() so
     it never drops below the normal gutter on a flat screen. */
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.tr-calc *,
.tr-calc *::before,
.tr-calc *::after { box-sizing: inherit; }

.tr-calc [hidden] { display: none !important; }

/* ---------- trust bar ---------- */

.tr-calc .tr-calc__trust {
  background: #fff;
  border: 1px solid var(--tr-line);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--tr-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
}
.tr-calc .tr-calc__trust-badge {
  background: var(--tr-accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
}

/* ---------- hope meter ---------- */

.tr-calc .tr-calc__meter {
  background: #fff;
  border: 1px solid var(--tr-line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 8px;
  z-index: 20;
  box-shadow: var(--tr-shadow-sm);
}

.tr-calc .tr-calc__meter-main { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.tr-calc .tr-calc__count-wrap {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tr-calc .tr-calc__count-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #94a3b8, #64748b);
  transition: opacity 240ms ease;
}
.tr-calc .tr-calc__count-bg[data-level="2"] { background: linear-gradient(135deg, var(--tr-hope-blue), #6366f1); }
.tr-calc .tr-calc__count-bg[data-level="3"] { background: linear-gradient(135deg, var(--tr-hope-teal), var(--tr-accent)); }

.tr-calc .tr-calc__count {
  position: relative;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* transform only - animating width or font-size here would relayout the sticky
   bar on every tile tap. */
.tr-calc .tr-calc__count.is-pulse { animation: tr-calc-pulse 500ms ease-out; }
@keyframes tr-calc-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.tr-calc .tr-calc__meter-labels { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-calc .tr-calc__meter-title { font-size: 13px; font-weight: 700; line-height: 1.2; }
.tr-calc .tr-calc__meter-sub { font-size: 11px; color: var(--tr-muted); font-weight: 500; line-height: 1.2; }

.tr-calc .tr-calc__meter-divider { width: 1px; height: 32px; background: var(--tr-line); flex-shrink: 0; }

.tr-calc .tr-calc__potential { flex: 1; min-width: 0; text-align: left; }
.tr-calc .tr-calc__potential-label {
  font-size: 10px;
  color: var(--tr-muted);
  font-weight: 600;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.tr-calc .tr-calc__potential-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--tr-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tr-calc .tr-calc__potential-value.is-placeholder { color: var(--tr-muted); font-size: 12px; font-weight: 500; }

/* ---------- precision meter (long version) ---------- */

.tr-calc .tr-calc__precision { margin-bottom: 12px; }
.tr-calc .tr-calc__precision-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--tr-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.tr-calc .tr-calc__precision-pct { font-variant-numeric: tabular-nums; color: var(--tr-primary); font-weight: 800; }
.tr-calc .tr-calc__precision-bar {
  height: 8px;
  border-radius: 999px;
  background: #eef2f5;
  overflow: hidden;
}
.tr-calc .tr-calc__precision-fill {
  height: 100%;
  width: 15%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tr-hope-blue), var(--tr-accent));
  transition: width 280ms ease;
}

/* ---------- card and screens ---------- */

.tr-calc .tr-calc__card {
  background: var(--tr-card);
  border: 1px solid var(--tr-line);
  border-radius: 16px;
  box-shadow: var(--tr-shadow);
  padding: 32px 24px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}

.tr-calc .tr-calc__screen { text-align: center; }
.tr-calc .tr-calc__hero { font-size: 48px; line-height: 1; margin-bottom: 14px; }
.tr-calc .tr-calc__screen .tr-calc__h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--tr-ink);
  text-wrap: balance;
}
.tr-calc .tr-calc__sub { color: var(--tr-muted); font-size: 15px; margin: 0 0 24px; }
.tr-calc .tr-calc__q { font-size: 18px; font-weight: 600; margin: 0 0 18px; }

/* ---------- screen 1: the statistic, and the credentials ---------- */

/* The gate screen has to fit a phone without scrolling, so it spends less height
   than the screens that follow it. Padding, not type size: shrinking the figure
   would be shrinking the one thing the screen is for. */
.tr-calc .tr-calc__screen--gate { padding: 2px 0 0; }

/* 01.11.2026: the tinted opening panel is the SHORT form's only (the in-article
   calculator, which has to catch the eye on a page of prose). The home page's
   long form already sits in its own hero section, so a second frame around its
   gate screen just reads as "3 boxes" - it stays plain there. */
.tr-calc[data-calc="short"] .tr-calc__screen--gate {
  padding: 18px 16px 8px;
  background: linear-gradient(180deg, var(--tr-brand-tint) 0%, rgba(255, 255, 255, 0) 72%);
  border: 1px solid var(--tr-brand-tint-strong);
  border-radius: 14px;
}

/* 01.11.2026: the phone field aligns to the right with the rest of the RTL form.
   direction stays ltr so the digits keep their order; text-align pins it right. */
.tr-calc #tr-calc-phone { text-align: right; direction: ltr; }

.tr-calc .tr-hero {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tr-ink);
  text-wrap: balance;
}
.tr-calc .tr-stat-hook {
  display: inline-block;
  font-size: var(--tr-hero-size, 2.5rem);
  font-weight: 800;
  color: var(--tr-brand);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tr-calc .tr-hero__rest { display: block; }

.tr-calc .tr-hero-sub {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tr-muted);
}
.tr-calc .tr-hero-sub__meta {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tr-primary);
}

/* ---------- the v5 hero (short version, screen 1) ---------- */

.tr-calc .tr-hero__badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 14px;
  background: var(--tr-brand-tint);
  border: 1px solid var(--tr-brand-tint-strong);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tr-brand-dark);
  text-wrap: balance;
}
.tr-calc .tr-hero__badge strong { font-weight: 800; }

/* 01.11.2026: the headline is back (plugin-config no longer hides it) and sized
   a touch SMALLER than the gate legend below it - the legend is the question the
   visitor has to answer, so it stays the largest line on the screen. */
.tr-calc .tr-hero__title {
  margin: 0 0 6px;
  font-size: clamp(16px, 3.8vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--tr-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* The highlight is a tinted band behind the words, not a block: box-decoration
   clone keeps it looking right when a phrase wraps across two lines. */
.tr-calc .tr-hl {
  color: var(--tr-brand);
  background: linear-gradient(transparent 62%, var(--tr-brand-glow) 62%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 2px;
}

.tr-calc .tr-hero__sub {
  margin: 0 auto 18px;
  max-width: 34rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tr-ink-soft);
  text-wrap: pretty;
}
.tr-calc .tr-pain {
  color: var(--tr-pain);
  font-weight: 600;
  border-bottom: 1px solid rgba(184, 39, 51, 0.35);
}
.tr-calc .tr-hero__free { color: var(--tr-brand); font-weight: 700; }

.tr-calc .tr-calc__fieldset--gate { text-align: center; margin-bottom: 18px; }
.tr-calc .tr-calc__fieldset--gate .tr-calc__legend {
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 700;
  color: var(--tr-ink);
  margin-bottom: 12px;
  text-align: center;
}
.tr-calc .tr-calc__fieldset--gate .tr-calc__choices { justify-content: center; }

/* The gate's two answers are not equals: one is the way in. */
.tr-calc .tr-calc__fieldset--gate .tr-calc__choice[data-value="yes"] {
  background: var(--tr-brand);
  border-color: var(--tr-brand);
  color: #fff;
}
.tr-calc .tr-calc__fieldset--gate .tr-calc__choice[data-value="yes"]:hover {
  background: var(--tr-brand-dark);
  border-color: var(--tr-brand-dark);
}
.tr-calc .tr-calc__fieldset--gate .tr-calc__choice[data-value="no"] {
  background: transparent;
  border-color: var(--tr-line);
  color: var(--tr-ink-soft);
  font-weight: 500;
}

.tr-calc .tr-calc__creds {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--tr-line);
  text-align: right;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tr-ink);
}
.tr-calc .tr-calc__creds li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}

/* The pill variant: three grey chips in a centred row. */
.tr-calc .tr-calc__creds--pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.tr-calc .tr-calc__creds--pills li {
  margin: 0;
  padding: 7px 12px;
  gap: 6px;
  background: #F4F6F9;
  border: 1px solid var(--tr-line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tr-ink-soft);
}
.tr-calc .tr-calc__creds--pills .tr-calc__cred-icon { color: var(--tr-muted); }
.tr-calc .tr-calc__cred-icon { flex: 0 0 auto; }
.tr-calc .tr-calc__creds a {
  color: var(--tr-brand);
  text-decoration: underline;
  font-weight: 600;
  /* A tap target, but inside a line of text: the row already clears 48px of
     spacing between items, so the link gets padding rather than a line-height
     that would push the three rows apart. */
  /* 15px of padding, not 14: with the pill's own padding the box measured 47px,
     and Lighthouse's tap-target audit wants 48. */
  padding: 15px 6px;
  margin: -15px 0;
}

.tr-calc .tr-calc__footnote {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--tr-muted);
  text-align: right;
}
.tr-calc .tr-calc__creds--pills + .tr-calc__footnote { text-align: center; }

/* The parenthetical is the first thing to go when the screen has to end above
   the fold on a small phone. */
@media screen and (max-width: 560px) {
  .tr-calc .tr-hero__paren { display: none; }
}

.tr-calc .tr-calc__badge {
  display: inline-block;
  background: var(--tr-primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

.tr-calc .tr-calc__fieldset { border: 0; padding: 0; margin: 0 0 20px; text-align: right; }
.tr-calc .tr-calc__legend {
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 700;
  padding: 0;
  margin-bottom: 10px;
  display: block;
}
.tr-calc .tr-calc__help { font-size: 12.5px; color: var(--tr-muted); margin: 0 0 10px; }

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

.tr-calc .tr-calc__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.tr-calc .tr-calc__btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  /* 48px, not 44px: Lighthouse's tap-target audit measures against 48. */
  min-height: 48px;
  padding: 12px 28px;
  border-radius: 10px;
  border: 2px solid var(--tr-line);
  background: #fff;
  color: var(--tr-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, opacity 140ms ease, border-color 140ms ease;
  /* Some of these are links, not buttons. Inside the isolation wrapper the
     browser's own anchor styling is what `all: revert` reverts to, so the
     underline and the inline box have to be stated here rather than assumed
     away by a theme reset that no longer reaches in. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
.tr-calc .tr-calc__btn:hover { border-color: var(--tr-primary); transform: translateY(-1px); }
.tr-calc .tr-calc__btn:focus-visible { outline: 2px solid var(--tr-primary); outline-offset: 2px; }
.tr-calc .tr-calc__btn--primary { background: var(--tr-primary); color: #fff; border-color: var(--tr-primary); }
.tr-calc .tr-calc__btn--primary:hover { background: var(--tr-primary-light); border-color: var(--tr-primary-light); }
.tr-calc .tr-calc__btn--accent { background: var(--tr-accent); color: #fff; border-color: var(--tr-accent); }
.tr-calc .tr-calc__btn--accent:hover { background: var(--tr-accent-hover); border-color: var(--tr-accent-hover); }
.tr-calc .tr-calc__btn--orange { background: var(--tr-orange); color: #fff; border-color: var(--tr-orange); }
.tr-calc .tr-calc__btn--orange:hover { background: var(--tr-orange-hover); border-color: var(--tr-orange-hover); }
.tr-calc .tr-calc__btn--ghost { color: var(--tr-muted); }
.tr-calc .tr-calc__btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* A group of mutually exclusive answers. aria-pressed carries the state. */
.tr-calc .tr-calc__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-calc .tr-calc__choice {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid var(--tr-line);
  border-radius: 10px;
  background: #fff;
  color: var(--tr-ink);
  cursor: pointer;
  flex: 1 1 auto;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, border-color 140ms ease;
}
.tr-calc .tr-calc__choice:hover { border-color: var(--tr-primary); }
.tr-calc .tr-calc__choice:focus-visible { outline: 2px solid var(--tr-primary); outline-offset: 2px; }
.tr-calc .tr-calc__choice[aria-pressed="true"] {
  background: var(--tr-primary);
  color: #fff;
  border-color: var(--tr-primary);
}

/* ---------- tiles ---------- */

.tr-calc .tr-calc__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
}
.tr-calc .tr-calc__tile {
  position: relative;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  background: #fff;
  border: 2px solid var(--tr-line);
  border-radius: 10px;
  padding: 16px 10px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: var(--tr-ink);
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, border-color 140ms ease;
}
.tr-calc .tr-calc__tile:hover { border-color: var(--tr-primary); transform: translateY(-1px); }
.tr-calc .tr-calc__tile:focus-visible { outline: 2px solid var(--tr-primary); outline-offset: 2px; }
.tr-calc .tr-calc__tile-icon { font-size: 24px; line-height: 1; }
.tr-calc .tr-calc__tile[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--tr-primary), var(--tr-primary-light));
  color: #fff;
  border-color: var(--tr-primary);
}
.tr-calc .tr-calc__tile[aria-pressed="true"]::after {
  content: '✓';
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  background: #fff;
  color: var(--tr-primary);
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- counters (children by age) ---------- */

.tr-calc .tr-calc__counters { display: grid; gap: 8px; text-align: right; }
.tr-calc .tr-calc__counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1.5px solid var(--tr-line);
  border-radius: 10px;
  min-height: 48px;
}
.tr-calc .tr-calc__counter-label { font-size: 15px; font-weight: 500; }
.tr-calc .tr-calc__counter-ctrl { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tr-calc .tr-calc__step {
  font-family: inherit;
  width: 48px; height: 48px;
  min-height: 48px;
  border: 2px solid var(--tr-line);
  border-radius: 10px;
  background: #fff;
  color: var(--tr-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tr-calc .tr-calc__step:hover { border-color: var(--tr-primary); }
.tr-calc .tr-calc__step:focus-visible { outline: 2px solid var(--tr-primary); outline-offset: 2px; }
.tr-calc .tr-calc__step[disabled] { opacity: .4; cursor: not-allowed; }
.tr-calc .tr-calc__counter-val {
  min-width: 2ch;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- text and number fields ---------- */

.tr-calc .tr-calc__field { margin-bottom: 16px; text-align: right; }
.tr-calc .tr-calc__field > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.tr-calc .tr-calc__req { color: var(--tr-orange); }

.tr-calc input[type="text"],
.tr-calc input[type="tel"],
.tr-calc input[type="number"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid var(--tr-line);
  border-radius: 8px;
  font-family: inherit;
  /* 16px is the floor - see the media query at the end of this file. */
  font-size: 16px;
  color: var(--tr-ink);
  background: #fff;
  appearance: none;
}
.tr-calc input::placeholder { color: #9aa6b1; }
.tr-calc input:focus-visible {
  outline: none;
  border-color: var(--tr-primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .14);
}
.tr-calc input[aria-invalid="true"] { border-color: var(--tr-orange); background: #fff7ed; }

/* ---------- consent ---------- */

.tr-calc .tr-calc__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  background: var(--tr-bg);
  border-radius: 8px;
  text-align: right;
  min-height: 48px;
  cursor: pointer;
}
.tr-calc .tr-calc__consent input {
  width: 20px; height: 20px;
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: var(--tr-primary);
  cursor: pointer;
}
.tr-calc .tr-calc__consent span { font-size: 13px; color: var(--tr-muted); line-height: 1.5; }
.tr-calc .tr-calc__consent a { color: var(--tr-primary); text-decoration: underline; }
.tr-calc .tr-calc__consent.is-error { background: #fff7ed; border: 1px solid var(--tr-orange); }

/* Honeypot: positioned away rather than display:none, so bots that skip hidden
   inputs still fill it while a screen reader reads the warning. */
.tr-calc .tr-calc__hp {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- errors, disclaimer, nav ---------- */

.tr-calc .tr-calc__err {
  color: var(--tr-err);
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 0;
  text-align: right;
}

.tr-calc .tr-calc__disclaimer {
  margin-top: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.55;
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}
.tr-calc .tr-calc__disclaimer strong { color: #64748b; font-weight: 600; }

.tr-calc .tr-calc__legal {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--tr-line);
  font-size: 11px;
  color: var(--tr-muted);
  text-align: center;
  line-height: 1.5;
}

.tr-calc .tr-calc__nav { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

.tr-calc .tr-calc__sending, .tr-calc .tr-calc__fail { font-size: 14px; margin: 12px 0 0; font-weight: 600; }
.tr-calc .tr-calc__sending { color: var(--tr-primary); }
.tr-calc .tr-calc__fail { color: var(--tr-err); }

/* ---------- results dashboard ---------- */

.tr-calc .tr-calc__result-headline {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border: 2px solid var(--tr-accent);
  border-radius: 14px;
  padding: 22px 18px;
  margin: 0 auto 18px;
  max-width: 420px;
}
.tr-calc .tr-calc__result-amount {
  font-size: 40px;
  font-weight: 800;
  color: var(--tr-accent-hover);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.tr-calc .tr-calc__result-range {
  font-size: 15px;
  color: var(--tr-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.tr-calc .tr-calc__result-points { font-size: 14px; color: var(--tr-primary); font-weight: 600; margin-top: 8px; }

.tr-calc .tr-calc__breakdown { text-align: right; max-width: 460px; margin: 0 auto 16px; }
.tr-calc .tr-calc__breakdown .tr-calc__h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tr-line);
}
.tr-calc .tr-calc__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  padding: 5px 0;
  margin: 0; /* it is a <dl>; the UA margin would break the row rhythm */
}
.tr-calc .tr-calc__row dt { color: var(--tr-muted); margin: 0; }
.tr-calc .tr-calc__row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-calc .tr-calc__row--total {
  border-top: 1px solid var(--tr-line);
  margin-top: 6px;
  padding-top: 8px;
  font-size: 15px;
}
.tr-calc .tr-calc__row--total dt { color: var(--tr-ink); font-weight: 700; }
.tr-calc .tr-calc__row--credit dd { color: var(--tr-accent-hover); }

.tr-calc .tr-calc__review {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #7c2d12;
  margin: 12px auto;
  max-width: 460px;
  text-align: center;
}

/* ---------- points result (short version) ---------- */

.tr-calc .tr-calc__points {
  background: linear-gradient(135deg, #f0f7ff, #eef6ff);
  border: 2px solid var(--tr-primary-light);
  border-radius: 14px;
  padding: 22px 18px;
  margin: 0 auto 16px;
  max-width: 460px;
  text-align: center;
}
.tr-calc .tr-calc__points-kicker {
  font-size: 13px;
  font-weight: 700;
  color: var(--tr-primary);
  margin: 0 0 10px;
  letter-spacing: .01em;
}
.tr-calc .tr-calc__points-lead { font-size: 14px; color: var(--tr-muted); margin: 0 0 4px; }
.tr-calc .tr-calc__points-figure {
  font-size: 26px;
  font-weight: 800;
  color: var(--tr-primary);
  line-height: 1.25;
  margin: 0 0 12px;
  text-wrap: balance;
}
/* tabular-nums so the figure does not jiggle as it changes width */
.tr-calc .tr-calc__points-figure span { font-size: 34px; font-variant-numeric: tabular-nums; }
.tr-calc .tr-calc__points-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--tr-accent-hover);
  margin: 0;
}
.tr-calc .tr-calc__points-value span { font-variant-numeric: tabular-nums; }
.tr-calc .tr-calc__points-calc { font-size: 12.5px; color: var(--tr-muted); margin: 4px 0 0; }
.tr-calc .tr-calc__points-note {
  font-size: 13.5px;
  color: var(--tr-ink);
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(30, 58, 138, .15);
}
.tr-calc .tr-calc__points-other {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tr-muted);
  margin: 10px 0 0;
}

/* ---------- the nothing-ticked detour (short version) ---------- */

.tr-calc .tr-calc__warning {
  max-width: 460px;
  margin: 0 auto;
  padding: 14px 16px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #713f12;
  text-align: center;
}

.tr-calc .tr-calc__share {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--tr-line);
}
.tr-calc .tr-calc__share-lead {
  font-size: 13.5px;
  color: var(--tr-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}

/* The citation of the Tax Authority's published figure. */
.tr-calc .tr-calc__source { text-align: center; margin: 12px 0; font-size: 13px; }
.tr-calc .tr-calc__source a {
  color: var(--tr-primary);
  text-decoration: underline;
  font-weight: 600;
  /* A link is a tap target too. */
  display: inline-block;
  min-height: 48px;
  line-height: 48px;
  padding: 0 4px;
}

.tr-calc .tr-calc__cpa-note {
  max-width: 460px;
  margin: 0 auto 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tr-muted);
  text-align: center;
}

@media screen and (max-width: 400px) {
  .tr-calc .tr-calc__points-figure { font-size: 22px; }
  .tr-calc .tr-calc__points-figure span { font-size: 29px; }
}

/* ---------- FAQ under the calculator ---------- */

.tr-calc-faq { max-width: 900px; margin: 28px auto; }
.tr-calc-faq .tr-calc__h2 { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.tr-calc-faq details {
  border: 1px solid var(--tr-line, #e2e6ea);
  border-radius: 10px;
  margin-bottom: 8px;
  background: #fff;
}
.tr-calc-faq summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 15px;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.tr-calc-faq summary:focus-visible { outline: 2px solid #1e3a8a; outline-offset: -2px; }
.tr-calc-faq details > div { padding: 0 16px 14px; font-size: 14.5px; line-height: 1.65; color: #4b5563; }

/* ---------- mobile ---------- */

/* iOS Safari zooms the page in when a focused input's text is smaller than 16px,
   and it does not zoom back out. That is the only reason for the !important: a
   theme rule with a smaller size would otherwise bring the behaviour back. */
@media screen and (max-width: 768px) {
  .tr-calc input[type="text"],
  .tr-calc input[type="tel"],
  .tr-calc input[type="number"],
  .tr-calc select,
  .tr-calc textarea {
    font-size: 16px !important;
  }

  .tr-calc[data-calc] { margin: 12px auto; }
  .tr-calc .tr-calc__card { padding: 24px 16px; border-radius: 12px; }
  .tr-calc .tr-calc__screen .tr-calc__h2 { font-size: 21px; }
  .tr-calc .tr-calc__sub { font-size: 14px; }
  .tr-calc .tr-calc__hero { font-size: 40px; }
  .tr-calc .tr-calc__tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tr-calc .tr-calc__tile { font-size: 12.5px; padding: 12px 8px; min-height: 92px; }
  .tr-calc .tr-calc__tile-icon { font-size: 22px; }
  .tr-calc .tr-calc__btn { padding: 12px 20px; font-size: 15px; }
  .tr-calc .tr-calc__nav { flex-direction: column-reverse; }
  .tr-calc .tr-calc__nav .tr-calc__btn { width: 100%; }
  .tr-calc .tr-calc__meter { padding: 10px 12px; gap: 10px; }
  .tr-calc .tr-calc__count-wrap { width: 38px; height: 38px; }
  .tr-calc .tr-calc__count { font-size: 17px; }
  .tr-calc .tr-calc__meter-title { font-size: 12px; }
  .tr-calc .tr-calc__meter-sub { font-size: 10px; }
  .tr-calc .tr-calc__potential-value { font-size: 13px; }
  .tr-calc .tr-calc__result-amount { font-size: 34px; }
  .tr-calc .tr-calc__choice { flex: 1 1 calc(50% - 4px); }
}

@media screen and (max-width: 400px) {
  .tr-calc .tr-calc__tile { font-size: 11.5px; padding: 10px 6px; min-height: 86px; }
  .tr-calc .tr-calc__tile-icon { font-size: 20px; }
  .tr-calc .tr-calc__counter { padding: 6px 8px; gap: 8px; }
  .tr-calc .tr-calc__counter-label { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-calc *,
  .tr-calc *::before,
  .tr-calc *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- desktop / phone variants of the hero copy ---------- */

/* Scoped under .tr-calc: an unprefixed rule is wiped by the isolation reset. */
.tr-calc .mobile-only { display: none; }
@media screen and (max-width: 767px) {
  .tr-calc .desktop-only { display: none; }
  .tr-calc .mobile-only { display: inline; }
}

/* ---------- gate screen: the statistic badge stays in the flow ----------
   It sits above the headline where it always did; on desktop it only aligns to
   the start edge (the right in RTL). Below 768px it spans the width, centred. */
@media screen and (min-width: 768px) {
  .tr-calc .tr-hero__badge {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 1rem 0;
    margin-left: auto;
    text-align: right;
  }
}
@media screen and (max-width: 767px) {
  .tr-calc .tr-hero__badge { display: block; width: 100%; margin: 0 0 1rem; text-align: center; }
}

/* ---------- phone: tighter outer padding ----------
   Selectors are .tr-calc-prefixed and carry no !important: they sit after the
   rules they override, at equal specificity. The tile grid (2 columns) and the
   answer buttons (50% each) already behave this way below 560px, so those two
   rules from the brief were not repeated. */
@media screen and (max-width: 768px) {
  .tr-calc[data-calc] { padding: 0; margin: 0; width: 100%; }
  .tr-calc .tr-calc__card {
    padding: 14px 12px;
    margin: 12px 4px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
}

/* ---------- phone: compact hero headline ----------
   The headline took three lines and pushed the form down. */
@media screen and (max-width: 767px) {
  .tr-calc .tr-hero__title { font-size: clamp(15px, 4.2vw, 18px); line-height: 1.25; margin: 2px 0 6px; }
  .tr-calc .tr-hl { font-size: inherit; }
  .tr-calc .tr-hero__sub { font-size: 13px; line-height: 1.5; }
}

/* ---------- credential pills: keep the three on one line ----------
   The pill variant already centres and wraps; this tightens it so three fit on a
   phone, and stops a single pill from breaking across two lines. */
.tr-calc .tr-calc__creds--pills { gap: 6px; margin: 1rem 0; }
.tr-calc .tr-calc__creds--pills li {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  padding: 6px 10px;
  gap: 4px;
  font-size: 12px;
}
@media screen and (max-width: 400px) {
  .tr-calc .tr-calc__creds--pills li { font-size: 11px; padding: 5px 8px; }
  /* Measured at 390px: the three pills total 378px against 368px available, so one
     wraps. The glyphs are aria-hidden decoration; dropping them saves ~55px and the
     three fit on one line. */
  .tr-calc .tr-calc__creds--pills .tr-calc__cred-icon { display: none; }
}

/* ---------- fallback: never show a calculator inside a calculator ----------
   Ad Inserter block #2 can inject a second [tr_calc] into the first one's markup
   (after one of the calculator's own paragraphs). !important because the
   isolation reset above is .tr-calc-prefixed and would otherwise tie. This only
   hides it; the real fix is switching that Ad Inserter block off. The tr-calc
   screens themselves hold no .code-block, so nothing legitimate is hidden. */
.tr-calc .tr-calc,
.tr-calc .tr-calc-isolated,
.tr-calc .code-block {
  display: none !important;
}

/* ---------- screen 4, salary bracket: even grid ----------
   Six options wrapped as flex left the second row half empty. 3 x 2 on desktop,
   2 x 3 on a phone. Colours, border and the pressed state stay with the base
   .tr-calc__choice rules (the --color-brand variable in the brief does not exist
   here; --tr-primary is the calculator's brand colour). The error line is a
   [hidden] paragraph, so only its alignment is set, never its display. */
.tr-calc .tr-calc__fieldset[data-question="salary_bracket"] .tr-calc__choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 1rem;
}
.tr-calc .tr-calc__fieldset[data-question="salary_bracket"] .tr-calc__choice {
  width: 100%;
  min-height: 56px;
  padding: 14px 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tr-calc .tr-calc__fieldset[data-question="salary_bracket"] .tr-calc__err {
  text-align: center;
  margin-top: 10px;
  float: none;
}
@media screen and (max-width: 640px) {
  .tr-calc .tr-calc__fieldset[data-question="salary_bracket"] .tr-calc__choices {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .tr-calc .tr-calc__fieldset[data-question="salary_bracket"] .tr-calc__choice {
    min-height: 52px;
    padding: 12px 8px;
    font-size: 13px;
  }
}

/* ---------- gate: "see refunds" social-proof link ----------
   Sits under the credential pills and opens the testimonials page in a new tab.
   A link, not a form control: it is outside the yes/no fieldset, so it does not
   interfere with the click-to-advance answer. */
.tr-calc .tr-calc__social-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 12px auto 0;
  padding: 8px 16px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 20px;
  color: #78350F;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.tr-calc .tr-calc__social-proof:hover { background: #FDE68A; color: #78350F; transform: translateY(-1px); }
.tr-calc .tr-calc__social-proof:focus-visible { outline: 2px solid var(--tr-primary); outline-offset: 2px; }
.tr-calc .tr-calc__social-proof-icon { font-size: 14px; }
.tr-calc .tr-calc__social-proof-arrow { font-size: 11px; opacity: 0.7; }
@media screen and (max-width: 480px) {
  .tr-calc .tr-calc__social-proof { font-size: 12px; padding: 6px 12px; }
}

/* 02.11.2026: yishuv autocomplete dropdown (tr-calc-full.js). Absolutely
   positioned so it overlays rather than pushing the question screen down. */
.tr-calc .tr-calc__ac-wrap { position: relative; }
.tr-calc .tr-calc__ac {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 30;
  background: var(--tr-card, #fff);
  border: 1px solid var(--tr-line, #E4EAF0);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(13, 35, 64, 0.14);
  max-height: 248px;
  overflow-y: auto;
  text-align: right;
}
.tr-calc .tr-calc__ac-item {
  padding: 10px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.3;
  color: var(--tr-ink, #1a2a3a);
}
.tr-calc .tr-calc__ac-item:hover,
.tr-calc .tr-calc__ac-item:focus { background: var(--tr-brand-tint, #EAF1F6); }

/* 03.11.2026: the "לא יודע/ת" escape on detail questions. A dashed, muted
   secondary button so it reads as a skip, not one of the real answers. */
.tr-calc .tr-calc__choice--unknown {
  border-style: dashed;
  color: var(--tr-muted, #6B7788);
  font-weight: 500;
}
.tr-calc .tr-calc__choice--unknown[aria-pressed="true"] {
  color: #fff;
  border-style: solid;
}

/* 03.11.2026: a question paged out to another sub-page (max 2 per screen). Its
   own hook, not [hidden], which applyConditions() manages for conditions. */
.tr-calc .tr-calc__q--paged-out { display: none !important; }

/* 02.11.2026 - WCAG 1.4.3 fixes found by the axe audit of the live calculator.
   The continue button ran white on #48ac66 = 2.85:1, and it is the primary
   action of the whole form - the one control a visitor must be able to read.
   Darkened to #2e7d4f, which measures 4.87:1 with white and stays the same
   green. Hover darkens further so the state change is still visible.
   The disclaimer ran #94a3b8 on white = 2.56:1 at 11.5px; same token as the
   home page's step list, darkened the same way. */
.tr-calc .tr-calc__btn--accent {
	background: #2e7d4f;
	border-color: #2e7d4f;
	color: #fff;
}
.tr-calc .tr-calc__btn--accent:hover,
.tr-calc .tr-calc__btn--accent:focus-visible {
	background: #25663f;
	border-color: #25663f;
}
.tr-calc .tr-calc__disclaimer { color: #5b6b7f; }

/* The refund figure itself ran #48ac66 on white = 2.85:1 at 15px bold. 15px
   bold is not "large text" under 1.4.3 (that starts at 18.66px bold), so it
   needs the full 4.5:1. Same darker green as the button, 4.87:1 - this is the
   one number the whole form exists to show. */
.tr-calc .tr-calc__potential-value { color: #2e7d4f; }