/* ==========================================================================
   Tangerine · homepage calculator
   Ported from tangerine-calculator/ (the designer's standalone build, Figma
   node 2617:2544, buttons 2617:3120). Every colour, radius, size and gap is
   theirs — nothing here is invented.

   Three things had to change to make a standalone page safe inside WordPress.
   They are the only deliberate departures from the source file:

     1. The original opens with :root{--bg;--card;--text;--muted;--accent…},
        a bare body{} rule and *{box-sizing}. Dropped in on a live page those
        would repaint the whole site and rename five generic custom properties
        out from under it. Every variable now lives on .tg-calc and maps to the
        theme token that already holds the same value — checked one by one, all
        twelve matched, which is unsurprising since both came from the same
        Figma file.

     2. Every selector is scoped. The source styles .panel, .field, .btn, .hr,
        .rows, .toggle, .chips, .x, .tick and a bare input[type=range]; loose on
        a WordPress page those collide with Elementor, the theme and any plugin
        that ever shipped a .btn.

     3. The modal keeps its own root (.tg-calc-veil) rather than nesting under
        .tg-calc, because calculator.js re-parents it to <body> on init. It is
        position:fixed, and this homepage runs Elementor motion effects — a
        transform on any ancestor would make it the containing block and the
        overlay would be trapped inside the section instead of covering the
        viewport.
   ========================================================================== */

.tg-calc,
.tg-calc-veil {
	/* Local names kept from the designer's file so this stays diffable against
	   their next export; the values all come from tokens.css. */
	--c-bg:      var(--tg-color-surface);        /* #0E0D0C */
	--c-card:    var(--tg-color-surface-alt);    /* #1C1B19 controls card */
	--c-card2:   var(--tg-color-surface-raised); /* #211F1D results card  */
	--c-track:   var(--tg-color-surface-sunken); /* #33302E toggle track  */
	--c-line:    rgb(255 255 255 / 9%);
	--c-rule:    rgb(255 255 255 / 12%);
	--c-text:    var(--tg-color-heading);        /* #F5F2ED */
	--c-muted:   var(--tg-color-text);           /* #9E968A */
	--c-accent:  var(--tg-color-primary);        /* #FF5A1E */
	--c-flame1:  var(--tg-color-primary-btn-hi); /* #EF8630 */
	--c-flame2:  var(--tg-color-primary-btn-lo); /* #DE4807 */
	--c-gold1:   var(--tg-color-secondary-hi);   /* #DFBE61 */
	--c-gold2:   var(--tg-color-secondary-lo);   /* #AD803D */
	--c-btn2:    var(--tg-color-border-outline); /* #474747 */
	--c-fill1:   var(--tg-color-primary-hi);     /* #FC7834 slider + donut */
	--c-fill2:   var(--tg-color-primary-lo);     /* #C84603 */
	--c-scale:   var(--tg-color-muted);          /* #6A645C */
	--c-legend2: var(--tg-color-muted-alt);      /* #666159 */
}

.tg-calc *,
.tg-calc-veil * {
	box-sizing: border-box;
}

/* ===================== body ============================================== */
/* The section heading, eyebrow and intro are NOT here: they already exist in
   the Elementor widget as .tg-calculator__intro/__title/__subtitle and match
   the design, so only the two cards are replaced. */

.tg-calc__body {
	display: grid;
	grid-template-columns: minmax(0, 812fr) minmax(0, 476fr);
	gap: 24px;
}

@media (min-width: 1440px) {
	.tg-calc__body { grid-template-columns: 812px 476px; justify-content: start; }
}

@media (min-width: 761px) and (max-width: 1439px) {
	.tg-calc__panel:not(.tg-calc__panel--out) {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.tg-calc__panel:not(.tg-calc__panel--out) > .tg-calc__toggle { align-self: flex-start; margin-bottom: 0; }
	.tg-calc__panel:not(.tg-calc__panel--out) > .tg-calc__field  { margin-bottom: 0; }
}

.tg-calc__panel {
	background: var(--c-card);
	box-shadow: inset 0 0 0 1px var(--c-line);
	border-radius: var(--tg-radius-md);
	padding: 34px;
	min-height: 535px;
}

.tg-calc__panel--out {
	background: var(--c-card2);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* ===================== toggle ============================================ */
.tg-calc__toggle {
	display: inline-flex;
	background: var(--c-track);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 26px;
}

.tg-calc__toggle button {
	border: 0;
	border-radius: 999px;
	padding: 10px 22px;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 22px;
	color: var(--c-muted);
	background: none;
	cursor: pointer;
	transition: color .18s ease;
}

.tg-calc__toggle button[aria-pressed="true"] {
	color: #17120D;
	background: linear-gradient(100deg, var(--c-gold1), var(--c-gold2));
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%);
}

.tg-calc__toggle button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ===================== sliders =========================================== */
.tg-calc__field {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 26px;
}

.tg-calc__field:last-of-type { margin-bottom: 0; }

.tg-calc__field-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	height: 20px;
}

.tg-calc__field-top label,
.tg-calc__field-top output {
	font-size: 17px;
	font-weight: 600;
	line-height: 23px;
	color: var(--c-text);
}

.tg-calc__field-top output em { font-style: normal; color: var(--c-muted); font-weight: 400; }

/* Typed values (client review 16 Oct): calculator.js swaps each readout <output> for a box you can
   type in. It reads as the same bold figure, with a dashed underline saying "editable"; the down
   payment keeps its AED amount beside it, read-only. */
.tg-calc__val { display: inline-flex; align-items: baseline; gap: 6px; }
.tg-calc__val em { font-style: normal; font-size: 18px; font-weight: 400; line-height: 24px; color: var(--c-muted); white-space: nowrap; }

/* (0,3,1) on purpose: the theme's reset styles every input[type="text"] with a white 1px border,
   padding and a radius, which outranks a bare class. content-box so the width calculator.js sets in
   ch is the text's width, not the text minus the padding. */
:is(.tg-calc, .tg-calc-veil) input.tg-calc__num[type="text"] {
	box-sizing: content-box;
	min-width: 3ch;
	max-width: 100%;
	margin: 0;
	padding: 0 3px;
	border: 0;
	border-bottom: 1px dashed rgb(255 255 255 / 26%);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 23px;
	height: 21px;
	color: var(--c-text);
	text-align: right;
	cursor: text;
	transition: border-color .16s ease, background-color .16s ease;
}

:is(.tg-calc, .tg-calc-veil) input.tg-calc__num[type="text"]:hover { border-bottom-color: var(--c-gold2); }

:is(.tg-calc, .tg-calc-veil) input.tg-calc__num[type="text"]:focus {
	outline: none;
	border-bottom: 1px solid var(--c-accent);
	border-radius: 4px 4px 0 0;
	background: rgb(255 255 255 / 6%);
}

.tg-calc__hint { margin: -4px 0 0; font-size: 16px; line-height: 1.5; color: var(--c-scale); }

/* The slider row is 20 tall in the frame: a 6px bar with a 20px handle centred
   on it. Painting the bar as a background band keeps the row at 20 and gives
   the handle its full height as a target. */
.tg-calc__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 20px;
	margin: 0;
	outline: none;
	cursor: pointer;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 6px;
	background-image: linear-gradient(90deg,
		var(--c-fill1) 0%, var(--c-fill2) var(--pos, 50%),
		var(--c-track) var(--pos, 50%), var(--c-track) 100%);
}

.tg-calc__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #FFF;
	border: 2px solid var(--c-accent);
	cursor: pointer;
	box-shadow: 0 2px 6px rgb(0 0 0 / 45%);
}

.tg-calc__slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #FFF;
	border: 2px solid var(--c-accent);
	cursor: pointer;
	box-shadow: 0 2px 6px rgb(0 0 0 / 45%);
}

.tg-calc__slider::-moz-range-track { background: none; }
.tg-calc__slider:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }

.tg-calc__scale {
	display: flex;
	justify-content: space-between;
	height: 14px;
	font-size: 15px;
	font-weight: 500;
	line-height: 19px;
	color: var(--c-scale);
}

/* ===================== results =========================================== */
.tg-calc__out-head { display: flex; flex-direction: column; gap: 6px; }

.tg-calc__out-cap {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 15px;
	text-transform: uppercase;
	color: var(--c-muted);
}

.tg-calc__out-big {
	font-size: 48px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 48px;
	color: var(--c-accent);
	margin: 0;
}

.tg-calc__out-sub { font-size: 16px; font-weight: 500; line-height: 21px; color: var(--c-muted); }

.tg-calc__hr { height: 1px; background: var(--c-rule); border: 0; margin: 0; flex: 0 0 1px; }

.tg-calc__rows { display: flex; flex-direction: column; gap: 14px; }

.tg-calc__rows > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	min-height: 20px; /* min: a long value (off-plan's "Up to AED 4,375 a month") wraps on phones */
	font-size: 16px;
	line-height: 23px;
}

.tg-calc__rows span { color: var(--c-muted); }
.tg-calc__rows b { font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; text-align: right; }

.tg-calc__donut { display: flex; align-items: center; gap: 22px; height: 96px; }
.tg-calc__donut > svg { width: 96px; height: 96px; display: block; flex: 0 0 96px; }

.tg-calc__legend { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 20px; }
.tg-calc__legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.tg-calc__legend span,
.tg-calc__legend b { color: var(--c-muted); font-weight: 500; }

/* ===================== buttons =========================================== */
/* Read off the Button component set, Figma node 2617:3120. Both variants are
   48 high, radius 100, padding 8 on three sides and 24 on the leading edge
   because a 32px white disc sits on the trailing one, gap 12. The face is
   Instrument Sans Medium 16 at 160% with -0.15px tracking, which is the one
   place in this section that is not Hanken Grotesk. */
.tg-calc__actions { display: flex; gap: 16px; height: 48px; }

.tg-calc__btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	height: 48px;
	gap: 12px;
	border-radius: 100px;
	font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: -.15px;
	cursor: pointer;
	border: 0;
	padding: 8px 8px 8px 24px;
	white-space: nowrap;
	transition: filter .18s ease, transform .18s ease, border-color .18s ease;
}

.tg-calc__btn-label { flex: 1; text-align: left; }

.tg-calc__btn-go {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 100px;
	background: #FFF;
	display: grid;
	place-items: center;
}

.tg-calc__btn-go svg {
	width: 16px;
	height: 16px;
	display: block;
	stroke: var(--tg-color-primary-alt);
	stroke-width: 1.3;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* the gradient runs deep to light along the button, not the other way round */
.tg-calc__actions .tg-calc__btn--p { flex: 0 0 194px; }
.tg-calc__btn--p { background: linear-gradient(90deg, var(--c-flame2), var(--c-flame1)); color: #FFF; }
.tg-calc__btn--p:hover { filter: brightness(1.07); transform: translateY(-1px); }

.tg-calc__btn--s {
	background: none;
	border: 1px solid var(--c-btn2);
	color: #ABABAB;
	justify-content: center;
}

.tg-calc__btn--s .tg-calc__btn-label { flex: none; }
.tg-calc__btn--s:hover { border-color: var(--c-gold2); }

.tg-calc__btn-lead {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: block;
	stroke: #ABABAB;
	stroke-width: 1.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tg-calc__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* ===================== eligibility modal ================================= */
.tg-calc-veil {
	position: fixed;
	inset: 0;
	background: rgb(6 5 4 / 78%);
	backdrop-filter: blur(6px);
	display: grid;
	place-items: center;
	padding: 24px;
	z-index: 1000;   /* above the sticky site header (z-index 100), which otherwise covers the top of the sheet */
	font-family: var(--tg-font-sans, 'Hanken Grotesk', system-ui, sans-serif);
	color: var(--c-text);
}

.tg-calc-veil[hidden] { display: none; }

.tg-calc-veil__sheet {
	background: var(--c-card);
	border: 1px solid var(--c-line);
	border-radius: 20px;
	width: min(680px, 100%);
	/* client review 16 Oct: fit the screen the visitor actually has. dvh follows a phone browser's
	   toolbar as it shows and hides; vh is the fallback for browsers without it. */
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow: auto;
	overscroll-behavior: contain; /* reaching the end must not scroll the page behind */
	padding: 32px;
}

.tg-calc-veil__top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 6px; }
.tg-calc-veil__top h3 { font-size: 26px; font-weight: 700; letter-spacing: -.015em; margin: 0; flex: 1; color: var(--c-text); }
.tg-calc-veil__top p { margin: 6px 0 0; font-size: 18px; line-height: 1.55; color: var(--c-muted); }

.tg-calc-veil__x {
	/* reset.css styles [type="button"] with padding 8px 16px and inline-block,
	   and its attribute selector outranks a bare `button` reset — on a 36px
	   border-box circle that left 4px for the glyph and pushed it off-centre. */
	display: grid;
	place-items: center;
	padding: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--c-line);
	background: none;
	color: var(--c-muted);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 36px;
}

.tg-calc-veil__x:hover { color: var(--c-text); border-color: var(--c-gold2); }
.tg-calc-veil__x:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.tg-calc-veil__sheet h4 {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-gold1);
	margin: 26px 0 14px;
}

.tg-calc-veil__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.tg-calc-veil__chips button {
	background: #100E0C;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	padding: 9px 16px;
	font: inherit;
	font-size: 17px;
	font-weight: 500;
	color: var(--c-muted);
	cursor: pointer;
	transition: border-color .16s, color .16s, background .16s;
}

.tg-calc-veil__chips button[aria-pressed="true"] { background: var(--c-track); color: var(--c-text); border-color: var(--c-gold2); }
.tg-calc-veil__chips button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* the modal reuses the body's field/slider styling */
.tg-calc-veil__sheet .tg-calc__field { margin-bottom: 18px; }

.tg-calc-veil__verdict {
	margin: 22px 0 0;
	padding: 16px 18px;
	border-radius: 13px;
	font-size: 16px;
	line-height: 1.55;
	border: 1px solid var(--c-line);
	background: #171513;
}

.tg-calc-veil__verdict b { display: block; font-size: 18px; margin-bottom: 5px; color: var(--c-text); }
.tg-calc-veil__verdict.is-ok   { border-color: rgb(95 191 138 / 38%); background: rgb(95 191 138 / 7%); }
.tg-calc-veil__verdict.is-no   { border-color: rgb(232 102 63 / 45%); background: rgb(232 102 63 / 9%); }
.tg-calc-veil__verdict.is-no b { color: #F09070; }
.tg-calc-veil__verdict.is-warn   { border-color: rgb(232 180 74 / 42%); background: rgb(232 180 74 / 7%); }
.tg-calc-veil__verdict.is-warn b { color: #E8B44A; }

.tg-calc-veil__fix {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 5px 5px 5px 18px;
	border-radius: 100px;
	border: 0;
	background: linear-gradient(90deg, var(--c-flame2), var(--c-flame1));
	color: #FFF;
	font-family: 'Instrument Sans', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: -.15px;
	cursor: pointer;
	transition: filter .16s ease, transform .16s ease;
}

.tg-calc-veil__fix:hover { filter: brightness(1.07); transform: translateY(-1px); }
.tg-calc-veil__fix .tg-calc__btn-go { flex: 0 0 30px; width: 30px; height: 30px; }
.tg-calc-veil__fix:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* --- the near-miss gauge: how close they actually are ------------------ */
.tg-calc-veil__vwrap { display: flex; gap: 18px; align-items: flex-start; }
.tg-calc-veil__vwrap > div { flex: 1; min-width: 0; }
.tg-calc-veil__gauge { flex: 0 0 78px; width: 78px; height: 78px; margin-top: 2px; }
.tg-calc-veil__gauge circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.tg-calc-veil__gauge .tg-calc-veil__gauge-bg { stroke: rgb(255 255 255 / 8%); }
.tg-calc-veil__gauge .tg-calc-veil__gauge-fg { transition: stroke-dashoffset 1100ms cubic-bezier(.22, .68, .24, 1); }
.tg-calc-veil__gauge text { fill: var(--c-gold1); font-size: 19px; font-weight: 700; }

/* --- the tick that draws itself on a pass ------------------------------ */
.tg-calc-veil__tick { width: 26px; height: 26px; flex: 0 0 26px; margin-top: 1px; }
.tg-calc-veil__tick circle { fill: none; stroke: #5FBF8A; stroke-width: 2; opacity: .45; }

.tg-calc-veil__tick path {
	fill: none;
	stroke: #5FBF8A;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 22;
	stroke-dashoffset: 22;
	animation: tg-calc-tick-in 520ms cubic-bezier(.22, .68, .24, 1) 120ms forwards;
}

@keyframes tg-calc-tick-in { to { stroke-dashoffset: 0; } }

/* The sitewide prefers-reduced-motion block in style.css caps animation
   duration but not transitions on a property this slow, so the gauge keeps
   its own opt-out. */
@media (prefers-reduced-motion: reduce) {
	.tg-calc-veil__gauge .tg-calc-veil__gauge-fg { transition: none; }
	.tg-calc-veil__tick path { animation: none; stroke-dashoffset: 0; }
}

.tg-calc-veil__checks { margin-top: 18px; display: flex; flex-direction: column; }

.tg-calc-veil__chk {
	display: grid;
	grid-template-columns: 9px 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid rgb(255 255 255 / 6%);
	font-size: 16px;
}

.tg-calc-veil__chk:last-child { border-bottom: 0; }
.tg-calc-veil__chk i { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; }
.tg-calc-veil__chk.is-y i { background: #5FBF8A; }
.tg-calc-veil__chk.is-n i { background: #E8663F; }
.tg-calc-veil__chk b { display: block; color: var(--c-text); font-weight: 600; margin-bottom: 2px; }
.tg-calc-veil__chk span { color: var(--c-muted); line-height: 1.5; }
.tg-calc-veil__chk em {
	font-style: normal;
	color: var(--c-scale);
	font-size: 16px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.tg-calc-veil__chk.is-n b { color: #F09070; }

.tg-calc-veil__cash { margin-top: 8px; display: flex; flex-direction: column; }

.tg-calc-veil__cash div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid rgb(255 255 255 / 6%);
	font-size: 16px;
}

.tg-calc-veil__cash div:last-child { border-bottom: 0; }
.tg-calc-veil__cash span { color: var(--c-muted); }
.tg-calc-veil__cash b { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tg-calc-veil__cash .tg-calc-veil__tot b { color: var(--c-gold1); }

.tg-calc-veil__foot { margin-top: 26px; display: flex; gap: 12px; }
.tg-calc-veil__tiny { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--c-scale); }

/* ==========================================================================
   Between the frame's width and a phone the two cards stay side by side and
   only give up the space they can spare: first the section gutter, then the
   card padding, then the button row, which cannot hold two pills once the
   results card drops below about 420.
   ========================================================================== */
@media (max-width: 1180px) {
	.tg-calc__panel { padding: 28px; }
	.tg-calc__actions { flex-direction: column; height: auto; gap: 12px; }
	.tg-calc__actions .tg-calc__btn--p { flex: none; }
	.tg-calc__actions .tg-calc__btn { width: 100%; }
}

@media (max-width: 1000px) {
	.tg-calc__panel { padding: 22px; min-height: 0; }
	.tg-calc__body { gap: 16px; }
	.tg-calc__out-big { font-size: 40px; line-height: 40px; }
	.tg-calc__rows > div { font-size: 15px; }
	.tg-calc__donut { gap: 14px; }
	.tg-calc__donut > svg { width: 82px; height: 82px; flex: 0 0 82px; }
	.tg-calc__legend { font-size: 14px; }
	.tg-calc__field { margin-bottom: 22px; }
}

@media (max-width: 800px) {
	/* only at the very bottom of the two column range does the key stop
	   fitting beside the ring */
	.tg-calc__donut { flex-direction: column; align-items: flex-start; height: auto; gap: 12px; }
	.tg-calc__field-top { flex-wrap: wrap; height: auto; gap: 2px 10px; }
}

/* ==========================================================================
   Phone and small tablet. The desktop layout above is the Figma frame at its
   own width; everything here only reflows it. No colour, radius or weight is
   changed, so the two stay the same design.
   ========================================================================== */
@media (max-width: 760px) {
	.tg-calc__body { grid-template-columns: 1fr; gap: 16px; max-width: 100%; }
	.tg-calc__panel { padding: 22px 18px; border-radius: 14px; min-height: 0; }
	.tg-calc__donut { height: auto; }
	.tg-calc__actions { height: auto; }
	.tg-calc__actions .tg-calc__btn--p { flex: none; }

	.tg-calc__toggle { margin-bottom: 22px; }
	.tg-calc__toggle button { padding: 10px 18px; font-size: 16px; }

	/* a finger needs a bigger target than a mouse does */
	.tg-calc__field { margin-bottom: 22px; }
	.tg-calc__field-top { flex-wrap: wrap; gap: 4px 12px; }
	.tg-calc__field-top label { font-size: 16px; }
	.tg-calc__field-top output { font-size: 17px; }

	.tg-calc__slider { height: 36px; margin: 2px 0; }
	.tg-calc__slider::-webkit-slider-thumb { width: 22px; height: 22px; }
	.tg-calc__slider::-moz-range-thumb { width: 22px; height: 22px; }
	.tg-calc__scale { margin-top: -2px; }

	.tg-calc__out-big { font-size: 38px; }
	.tg-calc__rows > div { font-size: 16px; gap: 10px; }
	.tg-calc__donut { gap: 16px; }
	.tg-calc__donut > svg { width: 82px; height: 82px; flex: 0 0 82px; }
	.tg-calc__legend { font-size: 15px; }

	/* stacked, because two pill buttons cannot share a 335px line */
	.tg-calc__actions { flex-direction: column; gap: 10px; margin-top: 26px; height: auto; }
	.tg-calc__btn { width: 100%; flex: none; font-size: 17px; }

	/* the sheet becomes a sheet: pinned to the bottom, thumb reachable */
	.tg-calc-veil { padding: 0; place-items: end stretch; }
	.tg-calc-veil__sheet {
		width: 100%;
		max-height: calc(100vh - 12px);
		max-height: calc(100dvh - 12px);
		border-radius: 20px 20px 0 0;
		padding: 24px 18px 28px;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
	}
	.tg-calc-veil__top h3 { font-size: 21px; }
	.tg-calc-veil__top p { font-size: 16px; }
	.tg-calc-veil__sheet h4 { margin: 22px 0 12px; }
	.tg-calc-veil__chips button { padding: 10px 15px; font-size: 15px; }

	.tg-calc-veil__verdict { padding: 15px 16px; font-size: 16px; }
	.tg-calc-veil__verdict b { font-size: 17px; }
	.tg-calc-veil__fix {
		white-space: normal;
		height: auto;
		min-height: 44px;
		padding: 7px 7px 7px 16px;
		text-align: left;
		width: 100%;
		justify-content: space-between;
	}
	.tg-calc-veil__vwrap { gap: 14px; }
	.tg-calc-veil__gauge { flex: 0 0 64px; width: 64px; height: 64px; }
	.tg-calc-veil__gauge text { font-size: 17px; }

	/* the max column would otherwise squeeze the description to two words */
	.tg-calc-veil__chk { grid-template-columns: 9px 1fr; font-size: 15px; }
	.tg-calc-veil__chk em { grid-column: 2; white-space: normal; margin-top: 4px; }

	.tg-calc-veil__cash div { font-size: 15px; gap: 10px; align-items: baseline; }
	.tg-calc-veil__cash span { flex: 1; min-width: 0; }
	.tg-calc-veil__cash b { white-space: nowrap; }

	.tg-calc-veil__foot { flex-direction: column; gap: 10px; margin-top: 22px; }
	.tg-calc-veil__foot .tg-calc__btn { flex: none !important; width: 100%; }
	.tg-calc-veil__tiny { font-size: 14px; }
}

@media (max-width: 400px) {
	.tg-calc__panel { padding: 18px 14px; }
	.tg-calc-veil__sheet { padding: 22px 14px 26px; }
	.tg-calc__btn { font-size: 17px; padding: 8px 8px 8px 18px; gap: 10px; }
	.tg-calc__toggle button { padding: 9px 14px; }
	/* the donut and its key stop fitting side by side around here */
	.tg-calc__donut { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* a coarse pointer gets bigger hit areas whatever the width */
@media (hover: none) and (pointer: coarse) {
	.tg-calc__slider { height: 40px; margin: 0; }
	.tg-calc__slider::-webkit-slider-thumb { width: 24px; height: 24px; }
	.tg-calc__slider::-moz-range-thumb { width: 24px; height: 24px; }
	.tg-calc-veil__chips button { min-height: 40px; }
	.tg-calc-veil__x { width: 40px; height: 40px; flex: 0 0 40px; }
}

/* ===================== theme button bleed ================================ */
/* style.css styles every bare <button> as the site's pill CTA: uppercase,
   tracked, 48px min-height. That reached the toggle, the profile chips and
   both action buttons here, which the design sets in sentence case. Reset
   only those inherited properties, at the same specificity as the theme's
   `button` rule (this file loads after it), so every rule above still wins. */
:where(.tg-calc, .tg-calc-veil) button {
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
}

:where(.tg-calc, .tg-calc-veil) a.tg-calc__btn { text-decoration: none; }

/* ===================== layout="master" =================================== */
/* The service-page variant, Figma 2473:1480 "Calculator / Master": a 1240
   content column with the controls card flexible and results fixed at 476,
   32px padding and 24px rhythm throughout, the sliders spread down the full
   card height, and a gold mark beside the monthly figure. */
.tg-calc__value { display: flex; align-items: center; gap: 24px; }
.tg-calc__mark  { flex: 0 0 40px; width: 40px; height: 54px; display: block; }

.tg-calc--master .tg-calc__body { grid-template-columns: minmax(0, 1fr) 476px; }
.tg-calc--master .tg-calc__panel { padding: 32px; min-height: 0; }
.tg-calc--master .tg-calc__panel:not(.tg-calc__panel--out) {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
}
.tg-calc--master .tg-calc__panel:not(.tg-calc__panel--out) > * { margin-bottom: 0; }
.tg-calc--master .tg-calc__toggle { align-self: flex-start; }
.tg-calc--master .tg-calc__panel--out { gap: 24px; }
.tg-calc--master .tg-calc__out-head { gap: 8px; }
.tg-calc--master .tg-calc__rows { gap: 16px; }

@media (max-width: 1180px) {
	.tg-calc--master .tg-calc__body { grid-template-columns: minmax(0, 1fr) 420px; }
}
@media (max-width: 1000px) {
	.tg-calc--master .tg-calc__body { grid-template-columns: minmax(0, 812fr) minmax(0, 476fr); }
}
@media (max-width: 760px) {
	.tg-calc--master .tg-calc__body { grid-template-columns: 1fr; }
	.tg-calc--master .tg-calc__panel { padding: 22px 18px; }
}

/* ===================== hover / focus states ============================== */
/* Hello Elementor's reset.css paints every button pink (#c36) with white text
   on :hover AND :focus, via [type="button"]:hover — specificity (0,2,0), which
   outranks each component's own base rule here. Because :focus is included,
   the pink stayed on after a click. The theme's a:hover colour did the same to
   the advisor link (orange text on an orange button). Each state is restated
   explicitly; active toggle/chip rules (0,2,1) already win and are untouched. */
.tg-calc__toggle button:not([aria-pressed="true"]):is(:hover, :focus) {
	background: none;
	color: var(--c-text);
}

.tg-calc-veil__chips button:not([aria-pressed="true"]):is(:hover, :focus) {
	background: #100E0C;
	color: var(--c-text);
	border-color: rgb(255 255 255 / 22%);
}

.tg-calc-veil__x:is(:hover, :focus) {
	background: none;
	color: var(--c-text);
	border-color: var(--c-gold2);
}

.tg-calc__btn--s:is(:hover, :focus) {
	background: none;
	color: #DDD6CA;
	border-color: var(--c-gold2);
}

.tg-calc__btn--s:is(:hover, :focus) .tg-calc__btn-lead { stroke: #DDD6CA; }

a.tg-calc__btn--p:is(:hover, :focus),
a.tg-calc__btn--p:is(:hover, :focus) .tg-calc__btn-label { color: #FFF; }

/* ===================== download sheet ==================================== */
/* Client review 16 Oct: Download asks for a name and number first. The sheet reuses the eligibility
   sheet's shell (.tg-calc-veil / __sheet / __top); the Fluent form inside takes the call-back popup's
   look: dark 60px fields, small caps labels, the orange pill button. */
.tg-calc-veil--dl .tg-calc-veil__sheet { width: min(520px, 100%); }
.tg-calc-dl__form { margin-top: 22px; }
.tg-calc-dl__form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.tg-calc-dl__form .ff-el-group { margin-bottom: 16px; }
.tg-calc-dl__form .ff-t-container { display: flex; gap: 14px; margin: 0; }
.tg-calc-dl__form .ff-t-cell { flex: 1 1 0 !important; min-width: 0; padding: 0 !important; }
.tg-calc-dl__form .ff-el-input--label { margin-bottom: 8px; }
.tg-calc-dl__form .ff-el-input--label label {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.tg-calc-dl__form .ff-el-is-required.asterisk-right label::after { content: " *"; color: var(--c-accent); }
.tg-calc-dl__form .ff-el-form-control {
	height: 54px;
	padding: 0 18px;
	border: 1px solid rgb(255 255 255 / 8%);
	border-radius: 14px;
	background: #141210;
	color: var(--c-text);
	font: inherit;
	font-size: 17px;
	box-shadow: none;
}
.tg-calc-dl__form .ff-el-form-control::placeholder { color: var(--c-scale); }
.tg-calc-dl__form .ff-el-form-control:focus { border-color: rgb(255 90 30 / 60%); outline: none; }
.tg-calc-dl__form .ff_submit_btn_wrapper { margin: 8px 0 0; }
.tg-calc-dl__form .ff-btn-submit,
.tg-calc-dl__form .ff-btn-submit:hover,
.tg-calc-dl__form .ff-btn-submit:focus {
	width: 100%;
	height: 54px;
	border: 0;
	border-radius: 100px;
	background: linear-gradient(90deg, var(--c-flame1), var(--c-flame2));
	box-shadow: 0 0 26px rgb(222 72 7 / 30%);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: 1;
}
.tg-calc-dl__form .ff-message-success {
	padding: 16px 18px;
	border: 1px solid rgb(95 191 138 / 38%);
	border-radius: 13px;
	background: rgb(95 191 138 / 7%);
	color: var(--c-text);
	box-shadow: none;
}
.tg-calc-dl__form .ff-message-success p { margin: 0; }
.tg-calc-dl__form .error.text-danger { margin-top: 6px; font-size: 15px; color: #F08A6C; }

@media (max-width: 760px) {
	.tg-calc-dl__form .ff-t-container { flex-direction: column; gap: 0; }
	.tg-calc-dl__form .ff-t-cell .ff-el-group { margin-bottom: 16px; }
}

/* focus from a mouse click shouldn't look like a hover that never ends */
.tg-calc button:focus:not(:focus-visible),
.tg-calc-veil button:focus:not(:focus-visible) { outline: none; }