/* ==========================================================================
   taxes-refund.co.il  |  homepage.css
   Loaded only on is_front_page(). Every selector is namespaced .trh so it
   cannot leak into article/branch templates or fight tr-calc.css.

   Palette is grounded in an Israeli tax form: official print ink, institutional
   blue, the grey of a shaded field, the rule line. One accent, used once, on
   the number the whole page exists to produce.
   No external requests. Rubik is already self-hosted by the theme.
   ========================================================================== */

.trh {
	--ink:        #141c26;
	--ink-soft:   #4a5a6b;
	--paper:      #ffffff;
	--field:      #f4f7f9;
	--rule:       #d9e1e8;
	--blue:       #15548c;
	--blue-ink:   #0c2e4e;
	--sum:        #0e7c52;

	--w:          1180px;
	--gut:        20px;

	/* binary weight system: 400 and 700 only, nothing between */
	--f: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	font-family: var(--f);
	color: var(--ink);
	background: var(--paper);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

.trh p { margin: 0 0 1em; max-width: 68ch; }
.trh p:last-child { margin-bottom: 0; }

.trh a { color: var(--blue); }
.trh a:focus-visible,
.trh button:focus-visible,
.trh summary:focus-visible,
.trh [tabindex]:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
	border-radius: 2px;
}

.trh-wrap {
	max-width: var(--w);
	margin-inline: auto;
	padding-inline: var(--gut);
}

/* Section heading. The rule under it is the form-line motif, used structurally
   to separate a section from its content, not as decoration. */
/* Centred, brief 2C section 3. Every H2 measured text-align:start.
   The underline is the section's own rule and it still spans the full width -
   centring the text, not the border. */
.trh-h2 {
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0 0 1.4rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--rule);
	text-align: center;
}

/* The opening paragraph under each H2 goes with it. Named individually rather
   than as a blanket `.trh p` rule: these are the seven section leads, and a
   blanket rule would also centre body copy, list items and card text, which
   should stay ranged-start for readability. max-width with auto margins is what
   actually centres a constrained paragraph - text-align alone would leave it
   sitting at the start of the container.

   .trh-process__lead came off this group on 13.10.2026: it stopped being a
   section lead when the section it opened was merged away. Six leads now, not
   seven. */
.trh-proof__sub,
.trh-reasons__sub,
.trh-says__sub,
.trh-whatsapp__sub,
.trh-sources__h {
	text-align: center;
	margin-inline: auto;
}


/* ===== 1. HERO ========================================================== */

.trh-hero {
	background: var(--field);
	border-bottom: 1px solid var(--rule);
	padding-block: clamp(24px, 4vw, 52px);
}


.trh-hero__h1 {
	font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.9rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
	margin: 0 0 0.75rem;
	max-width: 24ch;
}


.trh-tool__fallback {
	padding: 2.5rem 1.5rem;
	text-align: center;
}
.trh-tool__fallbackh {
	font-weight: 700;
	font-size: 1.125rem;
	margin-bottom: 0.4rem;
}

.trh-btn {
	display: inline-block;
	margin-top: 0.8rem;
	padding: 0.7rem 1.4rem;
	background: var(--blue);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	border-radius: 4px;
}
.trh-btn:hover { background: var(--blue-ink); }


/* ===== 2. WHY ========================================================== */

.trh-why { padding-block: clamp(40px, 5vw, 72px); }

/* Three statements, each marked by the form rule rather than a card. The five
   paragraphs this replaced said the same thing at four times the length. */
.trh-why__list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.2rem;
}
.trh-why__list li {
	padding-inline-start: 1.3rem;
	border-inline-start: 3px solid var(--blue);
	font-size: 1rem;
	color: var(--ink-soft);
	max-width: 68ch;
}
.trh-why__list strong {
	color: var(--blue-ink);
	display: block;
	margin-bottom: 0.2rem;
}


/* ===== SOURCES ========================================================= */

.trh-sources {
	padding-block: 1.5rem;
	background: var(--field);
	border-block: 1px solid var(--rule);
}

.trh-sources__h {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 0.6rem;
	color: var(--ink-soft);
}

.trh-sources__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	color: var(--ink-soft);
}
.trh-sources__list li {
	margin-bottom: 0.4rem;
	padding-inline-start: 1rem;
	position: relative;
}
.trh-sources__list li::before {
	content: "·";
	position: absolute;
	inset-inline-start: 0;
	color: var(--blue);
	font-weight: 700;
}


/* ===== BANNER ========================================================== */

.trh-banner {
	padding-block: clamp(32px, 4vw, 56px);
	background: var(--field);
	border-bottom: 1px solid var(--rule);
}

.trh-banner__grid {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

.trh-banner__h {
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
	font-weight: 700;
	margin: 0 0 0.8rem;
	color: var(--blue-ink);
	line-height: 1.15;
}

.trh-banner__p {
	font-size: 1rem;
	margin: 0 0 1.2rem;
	color: var(--ink);
}
.trh-banner__p b { color: var(--blue-ink); }

.trh-banner__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* Two columns only when there is a second thing to put in one. */
@media (min-width: 800px) {
	.trh-banner__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
	.trh-banner--nopic .trh-banner__grid { grid-template-columns: 1fr; }
}


/* The .trh-order section and its .trh-steps list are gone. They explained the
   "amount before the phone number" order in four steps, which the hero now says
   in one sentence and the comparison table proves line by line. Their rules were
   removed with them rather than left behind as dead weight. */


/* ===== 4. COMPARISON TABLE ============================================= */

/* Rebuilt 13.10.2026 for the new "למה אנחנו שונים" table.
   The block that was here styled .trh-vs / .trh-tablewrap / .trh-table - the
   table removed in brief 2A on 12.10.2026. Its markup went then and the CSS
   did not, so roughly seventy lines had been styling nothing since. Deleted
   rather than kept alongside this, because two table systems where one is
   dead is how the wrong one gets edited later. Verified unreferenced in any
   PHP or JS before removing. .trh-vs__sub also came off the centred-leads
   group near the top of this file for the same reason. */

.trh-compare { padding-block: clamp(40px, 5vw, 72px); }

/* Horizontal scroll is the fallback for the band between the card layout and
   a comfortable table - roughly 760-900px - not the mobile answer. */
.trh-compare__wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.trh-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.5;
	text-align: start;
}

.trh-compare__table th,
.trh-compare__table td {
	padding: 0.85rem 1rem;
	/* #d1d8e0 rather than --trh-line: the rules between rows were reading as a
	   suggestion at six rows deep. Not a token, because this is the only table
	   on the site and darkening --trh-line would move every bordered box. */
	border-bottom: 1px solid #d1d8e0;
	vertical-align: top;
	text-align: start;
}

/* ---- Header row. Three different colours, 13.10.2026: the table read as
   one grey block and the column that matters did not announce itself. Each
   header now states what its column is - ink for the question, primary for
   us, muted for the industry. White on all three: measured 13.85:1, 7.84:1
   and 6.79:1. ---- */
.trh-compare__table thead th {
	background: var(--trh-ink, #0c2e4e);
	color: #fff;
	font-weight: 700;
	border-bottom: 0;
}
.trh-compare__table thead .trh-compare__us {
	background: var(--trh-primary, #15548c);
	color: #fff;
}
/* Quieter than the other two headers, which is the point of the column.
   White on #6b7684 is 4.62:1 - it passes AA at 15px/700 with very little to
   spare, so this is as light as this header can go. */
.trh-compare__table thead .trh-compare__them {
	background: #6b7684;
	color: #fff;
}

/* The parameter column labels its row, so it reads as a heading. */
.trh-compare__table tbody th {
	font-weight: 700;
	color: var(--ink);
	background: var(--field);
	width: 26%;
}

/* ---- Our column: tinted, heavier, and fenced off from theirs ----
   border-LEFT, physically, and that is deliberate rather than a logical
   property left unconverted. The columns run right to left: הפרמטר is
   rightmost, ours is in the middle, הענף is leftmost. So the left edge of
   our column IS the boundary between us and them, which is exactly the
   "sharp separation" this change is for. border-inline-start would have put
   the rule on the far side, against the parameter column, where it
   separates nothing. */
.trh-compare__us {
	/* Green rather than the blue tint, 13.10.2026 -> 15.10.2026: the tint was
	   the same family as the header above it, so the column that matters read
	   as part of the chrome. The ink on it is 15.78:1. */
	background: #f0f7f4;
	font-weight: 600;
	color: var(--ink);
	border-left: 4px solid #1a8754;
}

/* A green tick before each of our values. Pseudo-element, so it is
   decoration and a screen reader reads six values rather than six ticks.
   Scoped to tbody: the header cell carries the same class and must not get
   one. 4.53:1 on the tint. */
.trh-compare__table tbody .trh-compare__us::before {
	content: "\2713\00a0";
	/* #127f4c, not the #1a8754 of the border beside it. On #f0f7f4 that lighter
	   green is 4.17:1 and this one is 4.64:1 - and the tick is the thing being
	   read, where the border is decoration that answers to 3:1. The previous
	   tick was documented at 4.53:1 and this does not regress it. */
	color: #127f4c;
	font-weight: 700;
	/* 20px: at the body's 15px the tick was the smallest mark in the table and
	   it is carrying the comparison. inline-block so the size does not drag the
	   line box around with it. */
	font-size: 20px;
	line-height: 1;
	display: inline-block;
	vertical-align: -1px;
}

/* ---- Their column: same information, visibly quieter ---- */
.trh-compare__them {
	background: #f5f6f8;
	/* #677280, not the #6b7684 asked for: on #f5f6f8 that grey is 4.27:1 and
	   fails AA for 15px text, this is 4.52:1. The difference is invisible and
	   the six "משתנה" cells are real body text, not decoration. */
	color: #677280;
	font-weight: 400;
}

/* A grey cross before each industry value, to match the tick opposite it.
   Pseudo-element for the same reason the tick is one: a screen reader reads six
   values, not six crosses.
   Scoped to tbody - the header carries the same class and must not get one.
   The cell text is untouched: five of these cells say "משתנה" and one says
   "משתנה בין החברות", and marking the CLASS rather than the text covers both
   without inventing an industry claim. */
.trh-compare__table tbody .trh-compare__them::before {
	content: "\2717\00a0";
	color: #677280;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	display: inline-block;
	vertical-align: -1px;
}

/* Hover on our column only. A background-COLOR, so it composites under the
   striping gradient on even rows instead of being overwritten by it - the same
   reason the stripes are an image in the first place. Rows are not interactive,
   so this is a reading aid, not an affordance. */
@media (hover: hover) {
	.trh-compare__table tbody tr:hover .trh-compare__us {
		background-color: #e4f1ea;
	}
}

/* Row striping. Done as a background IMAGE, not a background-color: both
   value columns already own a background colour, so a colour here would
   either be overridden by them or would have to overwrite the tint that
   marks our column. A flat 2% black image composites on top of whatever
   each cell's colour is, so every cell stripes and the tint survives. */
.trh-compare__table tbody tr:nth-child(even) th,
.trh-compare__table tbody tr:nth-child(even) td {
	background-image: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02));
}

.trh-compare__table tbody tr:last-child th,
.trh-compare__table tbody tr:last-child td { border-bottom: 0; }

/* ---- Outranking the theme's own table zebra, 15.10.2026 ----
   style.min.css (hello/Elementor) ships:

     table tbody > tr:nth-child(2n+1) > td,
     table tbody > tr:nth-child(2n+1) > th { background-color: rgba(128,128,128,.07) }

   That selector is (0,1,4). Plain .trh-compare__us is (0,1,0), so on rows 1, 3
   and 5 the theme won and those cells rendered flat grey - the column tint, the
   parameter field and the industry wash all disappeared on half the table. It
   has been that way since the table shipped and it is most of why this read as
   weak: the emphasis on our column was flickering row to row.

   Restated here at (0,2,3) so the columns win on every row. Not !important -
   a specificity fix is inspectable, an !important is a dare to the next person.
   The striping that IS wanted stays a background-image above, which composites
   over these instead of replacing them. */
.trh-compare__table tbody tr > th[scope="row"] {
	background-color: var(--field);
}
.trh-compare__table tbody tr > td.trh-compare__us {
	background-color: #f0f7f4;
}
.trh-compare__table tbody tr > td.trh-compare__them {
	background-color: #f5f6f8;
}


/* Phone: cards, not a scrolling table. Three columns of Hebrew sentences at
   360px is about 110px each, which breaks "סימולטור באתר, 2 דקות" into a
   column of single words, and the page already asks for four horizontal
   rails - a fifth scroll surface on a comparison is one too many.

   The trade is honest: display:block drops the table's own semantics, so
   each value carries its label in a ::before from data-label, which is both
   visible and announced. That is the standard responsive-table pattern and
   it is why the labels live in an attribute rather than in duplicate markup. */
@media (max-width: 759px) {
	.trh-compare__wrap { overflow-x: visible; }

	.trh-compare__table thead { display: none; }

	.trh-compare__table,
	.trh-compare__table tbody,
	.trh-compare__table tr,
	.trh-compare__table th,
	.trh-compare__table td {
		display: block;
		width: auto;
	}

	.trh-compare__table tr {
		border: 1px solid var(--trh-line, #dbe3ec);
		border-radius: 12px;
		padding: 0.9rem 1rem;
		margin-bottom: 0.75rem;
	}
	.trh-compare__table tr:last-child { margin-bottom: 0; }

	.trh-compare__table tbody th {
		width: auto;
		background: transparent;
		border: 0;
		padding: 0 0 0.6rem;
		font-size: 1rem;
		color: var(--trh-primary, #15548c);
	}

	.trh-compare__table td {
		border: 0;
		padding: 0.3rem 0;
	}

	.trh-compare__table td::before {
		content: attr(data-label) ": ";
		font-weight: 700;
		color: var(--ink-soft);
	}

	/* Inside a card the column outline and tint have nothing to outline, and
	   the label already says which side each line is. */
	/* Restated at the same specificity as the desktop fix above, or those rules
	   would reach in here and put the column colours back inside the cards. */
	.trh-compare__table tbody tr > th[scope="row"],
	.trh-compare__table tbody tr > td.trh-compare__us,
	.trh-compare__table tbody tr > td.trh-compare__them {
		background-color: transparent;
	}

	.trh-compare__us {
		background: transparent;
		border-inline: 0;
		border-left: 0;
	}
	.trh-compare__them {
		background: transparent;
	}

	/* The tick gives way to the label. Both are ::before on the same cell, so
	   one has to win; the label is the one carrying information here, and it
	   is restated rather than left to specificity. */
	.trh-compare__table tbody .trh-compare__us::before,
	.trh-compare__table tbody .trh-compare__them::before {
		content: attr(data-label) ": ";
		color: var(--ink-soft);
		font-size: inherit;
		font-weight: 700;
		vertical-align: baseline;
	}
	.trh-compare__table tbody tr:last-child .trh-compare__us { border-bottom: 0; }

	/* One mark of emphasis survives into the card view: ours is the line with
	   the accent rule beside it. */
	.trh-compare__us {
		border-inline-start: 3px solid var(--trh-primary, #15548c);
		padding-inline-start: 0.7rem;
	}
}


/* ===== 5.5 PROCESS (post-signup) ======================================= */

/* 13.10.2026, second pass. This was a <section> with a full-bleed ink band,
   then an inset ink box with a radius, and is now neither: it is a block
   inside .trh-how on the same white as everything around it, carrying one
   margin and nothing else.

   The box and the heading inside it were what still made the merged section
   read as two units - a background change plus a second heading is two
   complete "new section" signals, so the merge was structural only and the
   page did not look any more joined than before. Removing both is what
   actually merges it.

   Everything that used to be declared twice - once for white, once inverted
   for ink - now exists once, in the base rules below, at its white value.
   The dark-sections block near the end of this file no longer names
   .trh-process at all. .trh-whatsapp is untouched and stays ink.

   Eden offered half-dark and a dimmer surface as alternatives to plain white.
   Both are a single rule on this selector (a background, and padding to go
   with it) and nothing else in the section would need to move, which is why
   this div still exists rather than the margin living on the steps. */
.trh-process {
	margin-top: clamp(28px, 3.5vw, 44px);
}

/* .trh-process__lead was here. The paragraph it styled was deleted from
   homepage.php on 13.10.2026 - its first sentence moved into step 4 - so the
   rule went with it. Three passes on this section removed, in order, its H3,
   its ink box, its three bullets and now its lead: what is left between the
   H2 and the five numbered steps is nothing, which was the goal each time. */

.trh-process__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}

.trh-process__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem 1.2rem;
	align-items: start;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--rule);
}
.trh-process__item:last-child { border-bottom: 0; }

.trh-process__num {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	background: var(--blue);
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.trh-process__h {
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 0 0 0.2rem;
	line-height: 1.3;
}

/* 13px -> 14px, brief 2B task 5. */
.trh-process__time {
	font-size: 0.875rem;
	color: var(--sum);
	font-weight: 700;
	margin: 0 0 0.5rem !important;
}

.trh-process__body p:last-child {
	color: var(--ink-soft);
	font-size: 0.9375rem;
	margin: 0;
}

/* The five steps, brief 2B task 4. Option א' - five across - but only where
   five columns are actually wide enough to read in.

   Two columns put step 5 alone in a row with an empty cell beside it, which is
   the orphan the audit flagged. Five across needs the item itself to change
   shape too: in the stacked list each step is "number | body" side by side, and
   at 1200/5 = 220px a side-by-side number leaves about 150px for the text,
   which breaks step 5's long duration line into a column of single words. So in
   the multi-column layouts the number moves above the text and the cell is
   centred, which gives the copy the whole 220px.

   1100px is where five columns start to earn their keep. Between 800 and 1099
   it is three then two, centred on a six-column track so the second row is not
   left-aligned under the first - the brief's option ב' geometry, used as the
   in-between rather than as the fallback. Below 800px the original vertical
   list is untouched: it is the most readable form of this content and a phone
   has the height for it. */
@media (min-width: 800px) {
	.trh-process__steps {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 2rem 1.5rem;
	}
	.trh-process__item {
		/* Stacked and centred, so the text gets the full cell width. */
		grid-column: span 2;
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 0.5rem;
		padding: 0;
		/* The rules between stacked rows read as underlines once the items sit
		   side by side. */
		border-bottom: 0;
	}
	.trh-process__item:nth-child(4) { grid-column: 2 / span 2; }
	.trh-process__item:nth-child(5) { grid-column: 4 / span 2; }
}

/* Back to 1100 from the 1160 of this morning's first pass. That bump existed
   only to pay for the inset box's 56px of horizontal padding, which squeezed
   the five columns to ~200px. The box is gone, the steps have the full wrap
   width again, and the columns are back to the ~220px this layout was
   measured at - so the threshold goes back to where brief 2B put it. */
@media (min-width: 1100px) {
	.trh-process__steps {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1.5rem 1.25rem;
	}
	.trh-process__item,
	.trh-process__item:nth-child(4),
	.trh-process__item:nth-child(5) {
		grid-column: auto;
	}
}


/* ===== 5. REASONS RAIL ================================================= */

/* Was a dark rail of eighteen cards. It is now the full index of eligibility
   grounds, grouped and collapsed, because a visitor looking for their own case
   scans a list and does not drag a carousel. Light, like the sections either
   side of it: the dark panel was the only inversion left on the page. */
.trh-reasons {
	padding-block: clamp(40px, 5vw, 72px);
	background: var(--paper);
	border-block: 1px solid var(--rule);
	color: var(--ink);
}
.trh-reasons__sub {
	color: var(--ink-soft);
	font-size: 0.9375rem;
	margin-bottom: 1.5rem;
}

/* Category pills. A horizontal filter bar that scrolls on a phone and wraps
   nowhere - the labels are short and a wrapped filter bar reads as a menu. */
.trh-reasons__pills {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.8rem;
	margin-bottom: 1rem;
	scrollbar-width: none;
}
.trh-reasons__pills::-webkit-scrollbar { display: none; }

.trh-reasons__pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--rule);
	/* 41px before, brief 2B task 6. The padding does the work rather than a
	   fixed height, so a pill with a long label still grows with its text. */
	min-height: 44px;
	padding: 0.625rem 1rem;
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}
.trh-reasons__pill:hover { border-color: var(--blue); }
.trh-reasons__pill.is-active {
	background: var(--blue);
	color: #fff;
	border-color: var(--blue);
}

/* 13px -> 14px, brief 2B task 5. The pill around it is 44px now. */
.trh-reasons__n {
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--ink-soft);
}
.trh-reasons__pill.is-active .trh-reasons__n { color: rgba(255, 255, 255, 0.75); }

.trh-reasons__track { grid-auto-columns: minmax(210px, 240px); }

/* Reason card. Light, because this section is no longer inverted. */
.trh-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.6rem;
	height: 100%;
	padding: 1.1rem 1.15rem;
	background: var(--field);
	border: 1px solid var(--rule);
	border-radius: 5px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.trh-card:hover,
.trh-card:focus-visible {
	background: var(--paper);
	border-color: var(--blue);
}

.trh-card__t {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--ink);
}
/* 12px -> 14px, brief 2B task 5: the category a reason belongs to is
   information, not a timestamp. */
.trh-card__c {
	font-size: 0.875rem;
	color: var(--ink-soft);
	padding-top: 0.5rem;
	border-top: 1px solid var(--rule);
}

/* The .trh-cat accordion that used to be here is gone: the reasons index is a
   filtered rail now, not a stack of <details>. */

.trh-reasons__cta {
	margin-top: 1.5rem;
	padding: 1rem 1.2rem;
	background: var(--field);
	border-radius: 6px;
	text-align: center;
	color: var(--ink);
	max-width: none;
}

.trh-rail { position: relative; }

/* Native scroll-snap. No slider library, no CDN, no JS dependency for the
   core behaviour: the arrows are progressive enhancement only. */
.trh-rail__track {
	list-style: none;
	margin: 0;
	padding: 0 0 0.75rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(250px, 285px);
	gap: 0.875rem;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	/* Every remaining rail sits on a light background now that the reasons
	   section is no longer inverted, so the thumb is ink, not white. */
	scrollbar-color: rgba(20, 28, 38, 0.28) transparent;
	-webkit-overflow-scrolling: touch;
}
.trh-rail__track::-webkit-scrollbar { height: 6px; }
.trh-rail__track::-webkit-scrollbar-thumb {
	background: rgba(20, 28, 38, 0.26);
	border-radius: 3px;
}

.trh-rail__item { scroll-snap-align: start; }
/* The pill filter hides cards with the hidden attribute. Grid items ignore the
   UA stylesheet's [hidden] rule in some engines, so it is stated here. */
.trh-rail__item[hidden] { display: none; }

.trh-rail__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	/* 44x44, brief 2B task 6: WCAG 2.5.5 Enhanced. These are the smallest
	   standalone controls on the page and the ones most often missed on a
	   phone. The svg inside stays 20px - the target grew, not the icon. */
	width: 44px;
	height: 44px;
	display: none;
	place-items: center;
	padding: 0;
	background: var(--paper);
	color: var(--blue-ink);
	border: 1px solid var(--rule);
	border-radius: 50%;
	cursor: pointer;
}
.trh-rail__nav svg { width: 20px; height: 20px; }
.trh-rail__nav:hover { background: var(--field); }
.trh-rail__nav[disabled] { opacity: 0.35; cursor: default; }
.trh-rail__nav--prev { inset-inline-start: -20px; }
.trh-rail__nav--next { inset-inline-end: -20px; }


/* ===== 6. SIGNATORY (was WHO) ========================================== */

/* Rebuilt 13.10.2026 to Eden's structure. The old two-column "portrait beside
   text" grid is gone: it was what pushed the copy off-centre in the first
   place, and the brief asks for one centred card.

   Every .trh-who* rule was deleted rather than aliased - nothing outside this
   file referenced them (grepped: no PHP, no JS), and the #trh-who ID that the
   anchor bar and the IntersectionObserver in inc/homepage-takeover.php depend
   on lives on the section's id attribute, not on its class. */

.trh-signatory {
	padding-block: clamp(40px, 5vw, 72px);
	border-bottom: 1px solid var(--rule);
	text-align: center;
}

/* A measure, not a box. No background and no border: this section already
   sits between two ruled sections, so a third frame inside them reads as
   clutter rather than as emphasis. */
.trh-signatory__card {
	max-width: 820px;
	margin-inline: auto;
}

/* Renders only when trh_portrait_id resolves, which it does not today -
   Ben Cohen's photograph is still an open item. Styled now so that dropping
   the file in is the whole job. aspect-ratio with object-fit:cover means a
   portrait of any shape comes out as the same circle. */
.trh-signatory__img {
	display: block;
	width: 100%;
	max-width: 160px;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	border: 1px solid var(--rule);
}

.trh-signatory__role {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--blue);
}

.trh-signatory__name {
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0.15rem 0 0.3rem;
}

.trh-signatory__credentials {
	font-size: 1.0625rem;
	color: var(--ink-soft);
	margin-bottom: 1.3rem;
}

/* .trh p already caps the measure at 68ch; auto margins are what actually
   centre a constrained paragraph - text-align alone leaves the box pinned to
   the start edge. */
.trh-signatory__bio {
	margin-inline: auto;
	color: var(--ink-soft);
}

/* Four credential statements. 2x2 on a phone, four across from 820px - the
   width at which four columns still leave room for "מוסמך על ידי מועצת רואי
   החשבון" on two lines rather than four. */
.trh-signatory__badges {
	list-style: none;
	margin: 1.9rem auto;
	padding: 0;
	display: grid;
	gap: 1.1rem 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}

@media (min-width: 820px) {
	.trh-signatory__badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.trh-signatory__badges li {
	position: relative;
	padding-top: 2.3rem;
}

/* The check is a pseudo-element so a screen reader reads four credentials
   rather than "tick, lawyer, tick, accountant". Centred with left+transform
   rather than an inset-inline property: it is symmetrical, so it needs no
   direction logic at all - and direction logic is what broke the rail fades
   on 12.10.2026, since this site sets RTL in CSS and has no dir attribute
   for [dir="rtl"] to match. */
.trh-signatory__badges li::before {
	content: "\2713";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1.7rem;
	height: 1.7rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(14, 124, 82, 0.1);
	color: var(--trh-positive, #0e7c52);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
}

.trh-signatory__badges strong {
	display: block;
	font-size: 1rem;
	line-height: 1.3;
}

.trh-signatory__badges small {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--ink-soft);
}

/* The authority logo row is a flex row; centring text does not move flex
   items, so it needs its own rule. Was .trh-who .trh-badges. */
.trh-signatory .trh-badges {
	justify-content: center;
}

/* Was .trh-who__meta. 13px -> 14px came from brief 2B task 5. */
.trh-signatory__corp {
	margin-inline: auto;
	font-size: 0.875rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
}


/* ===== 7. FAQ ========================================================== */

.trh-faq { padding-block: clamp(40px, 5vw, 72px); }

.trh-faq__list {
	border-top: 1px solid var(--rule);
	max-width: 820px;
}

.trh-faq__q { border-bottom: 1px solid var(--rule); }

.trh-faq__s {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	padding: 1.05rem 0;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}
.trh-faq__s::-webkit-details-marker { display: none; }

/* Plus/minus drawn in CSS: no icon font, no SVG request. */
.trh-faq__s::before {
	content: "";
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-top: 0.3em;
	background:
		linear-gradient(var(--blue), var(--blue)) center/13px 2px no-repeat,
		linear-gradient(var(--blue), var(--blue)) center/2px 13px no-repeat;
	transition: transform 0.18s ease;
}
.trh-faq__q[open] > .trh-faq__s::before {
	background: linear-gradient(var(--blue), var(--blue)) center/13px 2px no-repeat;
	transform: rotate(180deg);
}

.trh-faq__a {
	padding: 0 0 1.2rem 0;
	padding-inline-start: 1.4rem;
}
.trh-faq__a p {
	color: var(--ink-soft);
	font-size: 0.9375rem;
	max-width: 66ch;
}


/* ===== 8. INDEX ======================================================== */

.trh-index {
	padding-block: clamp(28px, 3.5vw, 48px);
	background: var(--field);
}

.trh-index__h {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 0.9rem;
	color: var(--ink-soft);
}

.trh-index__cols {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 1.5rem;
	font-size: 0.875rem;
}
.trh-index__cols li {
	break-inside: avoid;
	margin-bottom: 0.4rem;
}
.trh-index__cols a {
	color: var(--ink-soft);
	text-decoration: none;
}
.trh-index__cols a:hover {
	color: var(--blue);
	text-decoration: underline;
}


/* ===== RESPONSIVE ====================================================== */

@media (min-width: 720px) {
	.trh-index__cols { columns: 3; }
}

@media (min-width: 1000px) {
	.trh-index__cols { columns: 4; }
	.trh-rail__nav { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
	.trh *,
	.trh *::before,
	.trh *::after {
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.trh-rail__nav { display: none; }
}


/* ===== PROOF SHOTS ===================================================== */

.trh-proof { padding-block: clamp(40px, 5vw, 72px); }

.trh-proof__sub {
	color: var(--ink-soft);
	font-size: 0.9375rem;
	max-width: 70ch;
	margin-bottom: 1.5rem;
}

/* Bigger again, 12.10.2026: 400px wide by 240px tall still cropped the
   confirmation to a band, and LIVE shows these at 518px. The rail column now
   matches that, and the thumbnail is tall enough to read the letterhead and
   the amount without opening anything. The full document is a click away - see
   the lightbox at the end of this file. */
.trh-proof__track { grid-auto-columns: minmax(320px, 518px); }

.trh-shot {
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rule);
	border-radius: 5px;
	overflow: clip;
	background: var(--paper);
}

.trh-shot__img {
	display: block;
	width: 100%;
	height: 360px;
	/* cover, not contain: the top of a refund confirmation is the letterhead and
	   the amount, which is the part worth showing. object-position keeps that
	   part in frame, and the lightbox is there for the rest. */
	object-fit: cover;
	object-position: top center;
	background: var(--field);
	cursor: zoom-in;
}

/* The amount is the only place on the page besides the calculator result
   that gets the accent. */
.trh-shot__cap {
	padding: 0.6rem 0.75rem;
	font-weight: 700;
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
	color: var(--sum);
	border-top: 1px solid var(--rule);
}

/* A sentence under each confirmation, so the amount exists as text and not only
   as pixels inside a screenshot. */
/* 13px -> 14px, brief 2B task 5. */
.trh-shot__seo {
	margin: 0;
	padding: 0.5rem 0.8rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--ink-soft);
	border-top: 1px solid var(--rule);
	background: var(--field);
}


/* ===== CREDENTIAL BADGES =============================================== */

.trh-badges {
	list-style: none;
	margin: 1.3rem 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

/* 12.10.2026: was height:44px, which rendered the licence badges at 66x44 and
   44x44 - too small to read the licence number on. The box is now at least
   150x60 and object-fit:contain letterboxes each logo inside it, so three
   logos of three different aspect ratios all grow without any of them being
   stretched. Setting min-width together with max-height and leaving both
   dimensions auto is what distorts them. */
.trh-badges__img {
	display: block;
	min-width: 150px;
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
}


/* ===== REVIEWS ========================================================= */

.trh-reviews-live {
	padding-block: clamp(40px, 5vw, 72px);
	background: var(--field);
	border-block: 1px solid var(--rule);
}

.trh-says__sub {
	color: var(--ink-soft);
	font-size: 0.9375rem;
	margin-bottom: 1.5rem;
}

.trh-says__track { grid-auto-columns: minmax(265px, 320px); }

.trh-say {
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.9rem;
	padding: 1.15rem 1.2rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 5px;
}

/* Quote mark drawn as a character in the margin, not an icon request. */
.trh-say__q {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink);
	position: relative;
	padding-top: 1.4rem;
}
.trh-say__q::before {
	content: "”";
	position: absolute;
	top: -0.35rem;
	inset-inline-start: 0;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--rule);
}

/* 13px -> 14px, brief 2B task 5: a reviewer's name is not metadata. */
.trh-say__by {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--rule);
	font-size: 0.875rem;
}
.trh-say__n { font-weight: 700; }
.trh-say__d { color: var(--ink-soft); }


/* ===== VIDEO FACADE ==================================================== */

.trh-vid { padding-block: clamp(40px, 5vw, 72px); }

.trh-vid__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Nothing is requested from YouTube until this button is pressed. */
.trh-vid__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.8rem;
	width: 100%;
	aspect-ratio: 16 / 10;
	padding: 1rem;
	background: var(--blue-ink);
	color: #fff;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	text-align: start;
	font: inherit;
	overflow: clip;
	padding: 0;
}
.trh-vid__btn:hover .trh-vid__play { transform: scale(1.08); }

/* The poster frame is a local file, so this costs YouTube nothing. Held back
   to 75% opacity over the ink panel so the caption stays readable on a bright
   frame, and brought up on hover. */
.trh-vid__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}
.trh-vid__btn:hover .trh-vid__thumb,
.trh-vid__btn:focus-visible .trh-vid__thumb { opacity: 1; }

.trh-vid__play,
.trh-vid__cap { position: relative; z-index: 1; }
.trh-vid__play { margin-inline-start: 1rem; margin-top: auto; }

.trh-vid__play {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	transition: transform 0.18s ease;
}
.trh-vid__play svg { width: 24px; height: 24px; margin-inline-start: 3px; }

/* Gradient rather than a flat scrim: the caption has to stay legible over an
   unknown photograph, and the top of the frame stays visible. */
.trh-vid__cap {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: #fff;
	width: 100%;
	padding: 1.6rem 1rem 1rem;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
	/* The caption inherits white-space: nowrap from the theme's button styles,
	   which clipped the three longest titles mid-word against the card edge.
	   Measured on DEV, 8.10.2026: 332px of text in a 233px card. */
	white-space: normal;
}

.trh-vid__frame {
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 0;
	border-radius: 5px;
	display: block;
}


/* ===== RESPONSIVE ADDITIONS ============================================ */

@media (max-width: 719px) {
	.trh-badges__img { min-width: 120px; max-height: 48px; }
}


/* ===== EXPERTS ========================================================= */

.trh-experts {
	padding-block: clamp(40px, 5vw, 72px);
	background: var(--field);
	border-block: 1px solid var(--rule);
}
.trh-experts__cta { text-align: center; margin-top: 1.5rem; max-width: none; }


/* ===== PROOF: ALL REFUNDS LINK ========================================= */

.trh-proof__all { text-align: center; margin-top: 1.5rem; }


/* ===== RECENT ARTICLES ================================================= */

.trh-posts {
	padding-block: clamp(40px, 5vw, 72px);
	background: var(--field);
	border-block: 1px solid var(--rule);
}

.trh-posts__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.2rem;
}

.trh-posts__item {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 6px;
	padding: 1.2rem;
}

.trh-posts__h {
	font-size: 1rem;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}
.trh-posts__h a { color: var(--ink); text-decoration: none; }
.trh-posts__h a:hover { color: var(--blue); text-decoration: underline; }

/* Left at 13px deliberately: a publication date is the metadata that task 5
   allows to stay small. */
.trh-posts__meta {
	font-size: 0.8125rem;
	color: var(--ink-soft);
	margin: 0 0 0.8rem;
	font-variant-numeric: tabular-nums;
}

.trh-posts__cta {
	color: var(--blue);
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
}
.trh-posts__cta:hover { text-decoration: underline; }

@media (min-width: 700px) {
	.trh-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ===== WHATSAPP ======================================================== */

.trh-whatsapp {
	padding-block: clamp(40px, 5vw, 72px);
	background: var(--field);
	border-block: 1px solid var(--rule);
}

.trh-whatsapp__sub {
	color: var(--ink-soft);
	font-size: 0.9375rem;
	margin-bottom: 1.5rem;
}

.trh-whatsapp__track { grid-auto-columns: minmax(200px, 240px); }

.trh-wa { margin: 0; }
.trh-wa__img {
	display: block;
	width: 100%;
	/* Fixed box, brief 2C section 6: the screenshots are different shapes, so
	   with height:auto the section's height changed as each one loaded and again
	   as the rail scrolled. A reserved 3:4 box and object-fit means the rail is
	   the same height before and after the images arrive. contain, not cover:
	   these are conversations, and cropping one cuts the text off. */
	aspect-ratio: 3 / 4;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--rule);
	border-radius: 6px;
	background: var(--paper);
}

.trh-wa__quote {
	margin: 1.5rem 0 0;
	padding: 1rem 1.2rem;
	background: var(--paper);
	border-inline-start: 3px solid var(--sum);
	border-radius: 4px;
	font-style: italic;
	color: var(--ink);
	max-width: 68ch;
}


/* ===== RECORDED CALL =================================================== */

/* Sits inside the video section now, under the grid. Same kind of evidence,
   so it belongs in the same block rather than in a section of its own. */
.trh-audio-inline {
	margin: 2rem 0 0;
	padding: 1.5rem;
	background: var(--field);
	border-radius: 8px;
	border-inline-start: 3px solid var(--sum);
}

.trh-audio-inline__q {
	margin: 0 0 1rem;
	font-size: 1rem;
	color: var(--ink);
	max-width: 65ch;
}
.trh-audio-inline__q b { color: var(--sum); font-weight: 700; }
.trh-audio-inline__q em {
	color: var(--blue-ink);
	font-style: italic;
	display: block;
	margin-top: 0.4rem;
}

.trh-audio-inline__player { width: 100%; max-width: 500px; }


/* ===== STICKY CTA (mobile) ============================================= */

/* The theme's own .sticky-cta-bar is suppressed on the front page in the
   responsive block below, so this replaces it rather than stacking on it. */
.trh-sticky-cta {
	display: none;
	position: fixed;
	bottom: 0;
	inset-inline: 0;
	z-index: 9998;
	background: var(--paper);
	border-top: 1px solid var(--rule);
	padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -2px 12px rgba(20, 28, 38, 0.08);
}

.trh-sticky-cta__btn {
	display: block;
	text-align: center;
	background: var(--blue);
	color: #fff;
	padding: 0.9rem;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 700;
	font-size: 1rem;
}
.trh-sticky-cta__btn:hover { background: var(--blue-ink); }

/* 900px, not 719px: that is the width at which theme.css shows .sticky-cta-bar,
   and the two have to swap at exactly the same point or there is a band of
   widths with two bars, or none. */
@media (max-width: 899px) {
	.trh-sticky-cta { display: block; }
	body.home .sticky-cta-bar { display: none !important; }
}


/* ===== DARK SECTIONS =================================================== */

/* ONE inverted block, not two. This was .trh-process and .trh-whatsapp; the
   process block went white on 13.10.2026 (second pass) so that the merged
   "איך זה עובד" section reads as one flow, and every override it needed here
   went with it:

     .trh-process__lead            was #fff        -> base --ink-soft
     .trh-process__h               was #fff        -> base --ink (inherited)
     .trh-process__item            border rgba     -> base --rule
     .trh-process__body p:last     was #b4c7d8     -> base --ink-soft
     .trh-process__time            was #5ddba4     -> base --sum   (#0e7c52)
     .trh-process__num             was #fff on ink -> base --blue disc, #fff text

   None of those needed a new value: the base rules in section 5.5 were
   already the white-background versions, which is why this is a deletion and
   not a re-colour. Measured contrast on white: --sum 5.22:1, --ink-soft
   7.08:1, #fff on --blue 7.84:1, --ink 17.2:1 - all AA, and --sum is the same
   green the ✓ marks above it already use on this background.

   Not done with blanket !important overrides: every token that reads against
   white has a value here that reads against ink, so nothing lands at 2:1
   contrast on a page that carries an accessibility statement. */
.trh-whatsapp {
	background: var(--blue-ink);
	color: #e8eef4;
	border-block-color: rgba(255, 255, 255, 0.18);
}

.trh-whatsapp .trh-h2 {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.18);
}

.trh-whatsapp__sub { color: #a9bdd0; }
.trh-wa__img { border-color: rgba(255, 255, 255, 0.2); }
.trh-wa__quote {
	background: rgba(255, 255, 255, 0.07);
	border-inline-start-color: #5ddba4;
	color: #e8eef4;
}

/* The rails in these two sections sit on ink again, so the thumb goes back
   to white here only. */
.trh-whatsapp .trh-rail__track { scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
.trh-whatsapp .trh-rail__track::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); }


/* ===== LIGHTBOX ======================================================== */

/* Opened from .trh-shot__img by the inline script in homepage.php. Built in JS
   rather than as markup per image: there are a dozen confirmations in the rail
   and only ever one overlay. */
.trh-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(12, 46, 78, 0.9);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	cursor: zoom-out;
}

.trh-lightbox img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 8px;
	background: #fff;
	cursor: default;
}

/* Visible label for how to dismiss it, because the overlay is also the button. */
.trh-lightbox__close {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #0c2e4e;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.trh-lightbox__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 760px) {
	.trh-proof__track { grid-auto-columns: minmax(260px, 92vw); }
	.trh-shot__img { height: 300px; }
}


/* ===== HOW IT WORKS ==================================================== */

/* .trh-how is now just the section wrapper: Eden deleted the three check-mark
   bullets from the markup on 13.10.2026 (second time he asked - they were the
   three claims brief 2A had restored from the removed comparison table). The
   section is the H2, the lead sentence and the five numbered steps.

   The ~30 lines that styled .trh-how__list went with them, since the UL no
   longer exists in homepage.php. If those three claims are ever wanted back,
   the new "למה אנחנו שונים" table now covers the same ground in a form that
   says who is claiming what. */
.trh-how { padding-block: clamp(32px, 4vw, 56px); }


/* ===== RAIL SCROLL AFFORDANCE =========================================
 * Brief 2B task 10. The rails are native overflow-x with scroll-snap; the
 * arrows are enhancement only and already disable at each end. What was
 * missing is the signal, at the edge itself, that there is more to the side -
 * the audit saw the certificates "cut off at the edge with no indicator".
 *
 * A gradient over each edge, fading to the section's own background. The
 * colour is a variable rather than hard-coded white because the four rails sit
 * on two different backgrounds (--field for reviews and WhatsApp, --paper for
 * reasons, page white for proof). Getting it wrong is visible as a pale band.
 *
 * The fades are pseudo-elements with pointer-events:none, so they never
 * intercept a drag, a tap or a click on a card underneath. .is-start and
 * .is-end are set by the same sync() in inc/homepage-takeover.php that already
 * disables the arrows, so a rail scrolled to its end stops advertising more.
 */
/* One per rail, each matching its own section's background exactly. A fade to
   the wrong colour reads as a dirty band, which is what made this visible.
   --paper is #ffffff and --blue-ink is #0c2e4e, so these are the three values
   Eden specified; they stay as tokens so a palette change moves them together. */
.trh-rail { --trh-rail-fade: var(--paper, #fff); }
.trh-reasons .trh-rail { --trh-rail-fade: var(--paper, #fff); }   /* white */
.trh-proof .trh-rail { --trh-rail-fade: var(--paper, #fff); }     /* white */
.trh-reviews-live .trh-rail { --trh-rail-fade: var(--field, #f4f7f9); }
/* .trh-whatsapp is one of the two inverted sections (see DARK SECTIONS below):
   its background is --blue-ink. Brief 2B had this as --field, which faded light
   grey over dark blue. */
.trh-whatsapp .trh-rail { --trh-rail-fade: var(--blue-ink, #0c2e4e); }

.trh-rail::before,
.trh-rail::after {
	content: '';
	position: absolute;
	top: 0;
	/* Clears the track's own 0.75rem bottom padding so the fade does not sit
	   over the scrollbar gutter. */
	bottom: 0.75rem;
	width: 44px;
	pointer-events: none;
	z-index: 1;
	opacity: 1;
	transition: opacity .18s ease;
}

/* PHYSICAL sides, deliberately - this was the bug Eden photographed.
 *
 * These were written with inset-inline-start/end plus a [dir="rtl"] pair to
 * flip the gradients. The flip never applied: [dir="rtl"] needs a dir ATTRIBUTE
 * on an ancestor, and this site gets its direction from CSS instead
 * (theme.css:109, html{direction:rtl}) - <html> only carries whatever
 * language_attributes() emits. So the LTR-intended gradients ran on an RTL
 * page, which put each gradient's opaque end on the INNER side of its strip:
 * a hard white band 44px into the rail, covering the first card, instead of a
 * soft hint at the edge.
 *
 * Physical right/left with matching gradient directions has no such dependency.
 * Each gradient is opaque against its own edge and fades inward:
 *   ::before sits on the right  and fades leftward  (to left)
 *   ::after  sits on the left   and fades rightward (to right)
 * The rail begins at the right in RTL, so ::before is the start edge - which is
 * what .is-start/.is-end below switch off, and that mapping is unchanged. */
.trh-rail::before {
	right: 0;
	background: linear-gradient(to left, var(--trh-rail-fade), transparent);
}
.trh-rail::after {
	left: 0;
	background: linear-gradient(to right, var(--trh-rail-fade), transparent);
}

.trh-rail.is-start::before { opacity: 0; }
.trh-rail.is-end::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.trh-rail::before,
	.trh-rail::after { transition: none; }
}

/* A scrollable region needs a tab stop and a visible focus ring, or a keyboard
   user cannot reach the cards that are off-screen. */
.trh-rail__track:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}


/* ===== IN-PAGE ANCHOR BAR ==============================================
 * Brief 2C section 7. Sticks under the header, scrolls horizontally on a
 * phone, and marks the section you are in.
 */
.trh-anchors {
	/* --trh-anchor-h comes from the root, set in inc/css/hero.css next to the
	   scroll-padding-top that depends on it. */
	position: sticky;
	/* The header's measured height, kept current by theme.js. When the header
	   collapses on scroll this follows it up with no gap. */
	top: var(--tr-header-h, 105px);
	z-index: 99;
	background: var(--paper, #fff);
	border-bottom: 1px solid var(--rule);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.trh-anchors__list {
	list-style: none;
	margin: 0 auto;
	padding: 0 20px;
	max-width: var(--container-max, 1200px);
	min-height: var(--trh-anchor-h);
	display: flex;
	align-items: center;
	gap: 4px;
	/* Horizontal scroll rather than wrapping: a second row would change the
	   bar's height, and the sticky offset of everything below depends on it. */
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
}
.trh-anchors__list::-webkit-scrollbar { display: none; }

.trh-anchors__list a {
	display: inline-flex;
	align-items: center;
	/* 44px, consistent with the touch-target work in brief 2B task 6. */
	min-height: 44px;
	padding: 0 14px;
	border-radius: 6px;
	white-space: nowrap;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink-soft, #4a5d70);
	text-decoration: none;
}
.trh-anchors__list a:hover { background: var(--field); color: var(--ink); }
.trh-anchors__list a:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: -2px;
}

/* aria-current is the state, so the styling hangs off it rather than off a
   class - one source of truth for "which section am I in". */
.trh-anchors__list a[aria-current="true"] {
	background: var(--blue);
	color: #fff;
}

@media (max-width: 719px) {
	.trh-anchors__list { padding: 0 12px; gap: 2px; }
	.trh-anchors__list a { font-size: 0.875rem; padding: 0 10px; }
}

@media print {
	.trh-anchors { display: none; }
}


/* ===== ELEMENTOR BUTTON COLOUR ========================================
 * Eden photographed red/pink (#B01F52) buttons around the sliders.
 *
 * What I could and could not verify: that colour appears in no stylesheet in
 * this theme, and DEV has no wp-content/uploads/elementor/css directory, so
 * Elementor is printing its kit CSS inline or inside a popup bundle. Without a
 * rendered page I cannot name the selector carrying it, and I cannot inspect
 * one from here. So this is aimed at the selectors Eden listed plus the one he
 * did not: the rails' own arrows are .trh-rail__nav, not .swiper-button-* or
 * .elementor-button, and his override as written would not have reached them.
 *
 * SCOPED TO #trh-main ON PURPOSE. Elementor popups 18070 / 19351 / 19541 are
 * on the do-not-touch list in every brief and they render AFTER the footer,
 * outside this container - so their CTAs keep their own colours. An unscoped
 * .home .elementor-button rule would have recoloured the lead-gen popups too,
 * which is a change nobody asked for.
 */
#trh-main .elementor-button,
#trh-main .swiper-button-prev,
#trh-main .swiper-button-next,
#trh-main .trh-carousel__arrow {
	background-color: var(--trh-primary, #15548c) !important;
	color: #fff !important;
	border-color: transparent !important;
}

/* The rails' real arrows. No !important and no new colours: this restates the
   intended palette at a specificity (0,2,0) that a plugin's single-class rule
   cannot outrank, which is what was needed rather than a louder declaration. */
#trh-main .trh-rail__nav {
	background: var(--paper);
	color: var(--blue-ink);
	border-color: var(--rule);
}
#trh-main .trh-rail__nav:hover { background: var(--field); }


/* ===== CUSTOMERS WHO ALREADY GOT THE MONEY ============================= */

/* New section 13.10.2026. See the note in homepage.php for why these
   photographs are not in .trh-proof, and why the brand banner that arrived
   with them is not in here at all. */
.trh-gotit { padding-block: clamp(40px, 5vw, 72px); }

.trh-gotit__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	/* Natural heights, top aligned - confirmed by Eden 13.10.2026. These are
	   three portraits of three different shapes (563x750, 575x1024, 513x914),
	   and the obvious tidying move - one aspect-ratio with object-fit:cover -
	   would crop them. Two of the three have the refund sum IN the
	   photograph, so a crop can remove the very thing the picture is evidence
	   of. Uneven bottoms are the honest trade. */
	align-items: start;
}

.trh-gotit__item { margin: 0; }

.trh-gotit__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid var(--rule);
}


/* ===== CEO INTERVIEW =================================================== */

.trh-interview { padding-block: clamp(40px, 5vw, 72px); }

/* .trh-vid__grid is repeat(auto-fit, minmax(230px, 1fr)), so its ONE card
   here would stretch to the full 1180px container and render the interview
   four times the size of each customer video. Capping the grid keeps the card
   the same size as the others and centres it. */
.trh-interview .trh-vid__grid {
	max-width: 560px;
	margin-inline: auto;
}


/* ===== PRESS COVERAGE =================================================== */

/* New 13.10.2026. Three article cards: masthead, a quotation, a link out. */
.trh-press { padding-block: clamp(40px, 5vw, 72px); }

.trh-press__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	/* One column on a phone, three from 760px. Not auto-fit: there are exactly
	   three publications, and auto-fit would drop to two on a tablet and leave
	   the third sitting alone on its own row - the orphan brief 2B task 4 was
	   about. Three or one, nothing in between. */
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.trh-press__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Equal-height cards with the link pinned to the bottom, so three quotations
   of three different lengths still line their links up. */
.trh-press__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	padding: clamp(18px, 2vw, 24px);
	border: 1px solid var(--trh-line, #dbe3ec);
	border-radius: 12px;
	background: var(--paper, #fff);
	text-align: center;
}

/* A fixed-height box the masthead is centred inside, so three logos of three
   different aspect ratios all sit on the same baseline without any of them
   being stretched. No grayscale filter: these are newspaper mastheads and
   their colour is the point - a greyed-out Calcalist logo reads as a
   placeholder. */
.trh-press__logo {
	display: grid;
	place-items: center;
	height: 48px;
}

.trh-press__img {
	display: block;
	max-height: 48px;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.trh-press__quote {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink);
	/* .trh p caps every paragraph at 68ch; inside a third-of-a-row card that
	   would never bite, but stating it keeps the card in charge of its own
	   measure. */
	max-width: none;
}

/* margin-top:auto is what pins the link to the bottom of a flex card. */
.trh-press__link {
	margin-top: auto;
	color: var(--trh-primary, #15548c);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	/* 44px of target height, brief 2B task 6. */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.trh-press__link:hover,
.trh-press__link:focus-visible { text-decoration: underline; }


/* ===== LICENCE LINK ==================================================== */

/* The representative-licence number, wherever it appears, now opens the
   licence PDF. Underlined on purpose: it sits inside running text and inside
   a table cell, where colour alone is not a link affordance (WCAG 1.4.1).
   6.81:1 on the comparison table's tint. */
.trh-license-link {
	color: var(--trh-primary, #15548c);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-variant-numeric: tabular-nums;
}

.trh-license-link:hover,
.trh-license-link:focus-visible {
	color: var(--trh-ink, #0c2e4e);
}


/* ===== CALCULATOR: RUNNING CREDIT-POINT TALLY ========================== */

/* Brief 2E. Shown at the top of the question screens that run after the lead
   form (6-9), never on the result screen - that one states the real figure,
   and "so far: N" above it would read as a second, different answer.

   Styled here rather than in assets/css/tr-calc.css because that file has a
   minified twin that would have to be rebuilt in lockstep, and the long
   calculator only ever renders on the front page - the one page this
   stylesheet loads on. */
.tr-calc__tally {
	margin: 0 0 1rem;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	background: var(--trh-tint, #e8f0f7);
	border: 1px solid var(--trh-line, #dbe3ec);
	color: var(--trh-ink, #0c2e4e);
	font-size: 0.9375rem;
	font-weight: 500;
	text-align: center;
	max-width: max-content;
	margin-inline: auto;
}

.tr-calc__tally-n {
	font-weight: 700;
	color: var(--trh-positive, #0e7c52);
	font-variant-numeric: tabular-nums;
}

/* The count changes between screens; honour a reduced-motion preference by
   not drawing attention to it at all. */
@media (prefers-reduced-motion: no-preference) {
	.tr-calc__tally { transition: background-color .2s ease; }
}


/* ===== CALCULATOR: SCREEN-READER ANNOUNCER + TALLY POP (brief 2H) ======== */

/* The theme has no visually-hidden utility of its own - checked across
   assets/css/tr-calc.css and this file - so one is defined here, for the
   announcer that tr-calc-full.js fills in on every screen change.

   clip-path as well as the legacy clip: the old clip property is deprecated and
   some engines have stopped honouring it, and a live region that is not clipped
   is a line of text in the middle of the page. Not display:none and not
   visibility:hidden - either of those stops the region being announced at all,
   which is the usual way this gets built wrong. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The tally number pops when it changes. Transform only, so nothing relayouts;
   the strip sits above a form and animating its width or font-size would shift
   every field below it on each change.

   display:inline-block because <strong> is inline, and transforms do not apply
   to inline boxes - without this the animation is declared and does nothing. */
.tr-calc .tr-calc__tally-n {
	display: inline-block;
}

.tr-calc .tr-calc__tally-n.is-pulse {
	animation: trh-tally-pop 400ms ease-out;
}

@keyframes trh-tally-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.18); }
	100% { transform: scale(1); }
}

/* tr-calc.css:951 already neutralises every animation under .tr-calc for
   prefers-reduced-motion, so this is belt and braces. It is here anyway because
   it is an accessibility guarantee and should not depend on a rule in another
   file staying where it is. The JS drops the smooth scroll under the same
   preference. */
@media (prefers-reduced-motion: reduce) {
	.tr-calc .tr-calc__tally-n.is-pulse {
		animation: none;
	}
}

/* ===== Eligibility prose section (brief 2.1) ===== */
.trh-elig { padding: 48px 0; }
.trh-elig__lead { font-size: 1.0625rem; line-height: 1.7; color: #334155; max-width: 70ch; margin: 0 0 20px; }
/* 02.11.2026: 23 cases in a grid ran 8 rows on desktop and 23 on mobile - too
   much vertical scroll. Now a single horizontal scroll-snap slider: one row
   high, swiped on touch and scrolled with the slim bar on desktop. The partial
   next card (peek) plus the visible bar are the affordance; no JS, RTL-safe. */
.trh-elig__list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0 0 12px;
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: #386783 #e5eaf0;
}
.trh-elig__list::-webkit-scrollbar { height: 8px; }
.trh-elig__list::-webkit-scrollbar-track { background: #e5eaf0; border-radius: 8px; }
.trh-elig__list::-webkit-scrollbar-thumb { background: #386783; border-radius: 8px; }
.trh-elig__list li { flex: 0 0 clamp(260px, 31%, 340px); scroll-snap-align: start; position: relative; padding: 14px 44px 14px 16px; background: #fff; border: 1px solid #e5eaf0; border-radius: 10px; font-size: 0.9375rem; line-height: 1.6; color: #1a1a1a; }
.trh-elig__list li::before { content: "₪"; position: absolute; inset-inline-start: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: #386783; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.trh-elig__close { font-size: 1rem; line-height: 1.7; color: #334155; max-width: 70ch; margin: 0 0 28px; }
.trh-elig__h3 { font-size: 1.25rem; color: #386783; margin: 0 0 10px; }
.trh-elig__def { font-size: 1rem; line-height: 1.75; color: #334155; max-width: 70ch; margin: 0; }
@media (max-width: 600px) { .trh-elig__list li { flex-basis: 85%; } }

/* ===== Proof captions: amount + reason (brief 1.5) ===== */
.trh-shot__cap { display: flex; flex-direction: column; gap: 2px; }
.trh-shot__amount { font-weight: 800; }
.trh-shot__reason { font-size: 0.8125rem; font-weight: 400; color: #475569; line-height: 1.4; }

/* Simulator flow strip, moved out from under the form (01.11.2026). Quiet. */
.trh-simflow { list-style: none; margin: 14px auto 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; font-size: 13px; color: #94a3b8; }
.trh-simflow li { position: relative; padding-inline-start: 16px; }
.trh-simflow li::before { content: "·"; position: absolute; inset-inline-start: 0; color: #cbd5e1; }
.trh-simflow strong { color: #64748b; font-weight: 600; }

/* Documents section (brief 09 2.2) */
.trh-docs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 12px 0 20px; }
.trh-docs__item { background: #fff; border: 1px solid #e5eaf0; border-radius: 10px; padding: 14px 16px; }
.trh-docs__item h3 { font-size: 1rem; color: #386783; margin: 0 0 6px; }
.trh-docs__item p { font-size: 0.9375rem; line-height: 1.6; color: #334155; margin: 0; }

/* 02.11.2026: on phones the 3 testimonial portraits and the customer videos
   stacked into long columns. Same horizontal scroll-snap slider as the
   eligibility cases, but mobile only - the desktop grids were never too long.
   Scoped to .trh-vid so the CEO interview (.trh-interview, which reuses
   .trh-vid__grid as single cards) keeps its centred layout. */
@media (max-width: 600px) {
  .trh-gotit__grid,
  .trh-vid .trh-vid__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #386783 #e5eaf0;
    padding-bottom: 10px;
    align-items: flex-start;
  }
  .trh-gotit__grid > li,
  .trh-vid .trh-vid__grid > li {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .trh-gotit__grid::-webkit-scrollbar,
  .trh-vid .trh-vid__grid::-webkit-scrollbar { height: 8px; }
  .trh-gotit__grid::-webkit-scrollbar-thumb,
  .trh-vid .trh-vid__grid::-webkit-scrollbar-thumb { background: #386783; border-radius: 8px; }
  .trh-gotit__grid::-webkit-scrollbar-track,
  .trh-vid .trh-vid__grid::-webkit-scrollbar-track { background: #e5eaf0; border-radius: 8px; }
}

/* 02.11.2026: the sticky CTA's label was invisible - measured contrast 1.00,
   because theme.css's `a { color: inherit }` beat the `color:#fff` in the
   .trh-sticky-cta__btn rule above and the text took the button's own blue.
   Pinned here with the parent in the selector so it outranks the element rule,
   and on every link state so :visited cannot bring the invisible colour back.
   White on --blue (#15548c) measures 7.51:1 - WCAG AAA for body text. */
.trh-sticky-cta .trh-sticky-cta__btn,
.trh-sticky-cta .trh-sticky-cta__btn:link,
.trh-sticky-cta .trh-sticky-cta__btn:visited,
.trh-sticky-cta .trh-sticky-cta__btn:hover,
.trh-sticky-cta .trh-sticky-cta__btn:focus-visible {
	color: #fff;
}

/* 02.11.2026 - WCAG 2.1 AA fixes from the axe audit.
   1.4.3 Contrast: .trh-simflow ran #94a3b8 on white = 2.56:1 at 13px, where
   4.5:1 is required. Darkened, and <strong> darkened further so the emphasis
   the design relies on survives the change instead of flattening. */
.trh-simflow { color: #5b6b7f; }
.trh-simflow strong { color: #3f4b5a; }

/* 1.4.1 Use of Colour: these links sit inside running text and were told apart
   from it by hue alone (measured 1.1:1 and 2.18:1 against the surrounding
   text, where 3:1 is the floor). theme.css strips underlines globally, so they
   are put back here - only for links in prose, never for cards or buttons,
   which are already identifiable by their box. */
.trh p > a,
.trh-sources__list a,
.trh-reasons__cta > a {
	text-decoration: underline;
	text-underline-offset: 2px;
}