@import url("../tokens/fonts.css");

/* ==========================================================================
   Flow — warmth and water, for heating & plumbing websites.
   Copper pipework, brass hardware, radiator fins; flame against cool water.
   Colours, spacing, radii, shadows and motion come from tokens.css.
   Rules: movement is transform/opacity only; entrances fill BACKWARDS;
   colour, border and shadow change only on one element's state change.
   ========================================================================== */

:root {
  --fl-press: var(--dur-press, 90ms);
  --fl-quick: var(--dur-quick, 160ms);
  --fl-turn: var(--dur-turn, 280ms);
  --fl-settle: var(--dur-settle, 420ms);
  --fl-fill: var(--dur-fill, 900ms);
  --fl-drip: var(--dur-drip, 1600ms);
  --fl-e-press: var(--ease-press, cubic-bezier(.3, .7, .4, 1));
  --fl-e-valve: var(--ease-valve, cubic-bezier(.34, 1.45, .55, 1));
  --fl-e-water: var(--ease-water, cubic-bezier(.45, .05, .2, 1));
  --fl-e-stamp: var(--ease-stamp, cubic-bezier(.2, 1.5, .4, 1));
  --fl-e-exit: var(--ease-exit, cubic-bezier(.4, 0, 1, 1));
  /* brick-bond metro tiles: 72×36, grout + a 1px glaze highlight (static texture; values mirror page-grout) */
  --fl-tiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%23e9dfd0'%3E%3Crect width='72' height='2'/%3E%3Crect y='36' width='72' height='2'/%3E%3Crect width='2' height='36'/%3E%3Crect x='36' y='36' width='2' height='36'/%3E%3C/g%3E%3Cg fill='%23fdf9f3'%3E%3Crect x='2' y='2' width='34' height='1'/%3E%3Crect x='38' y='2' width='34' height='1'/%3E%3Crect y='38' width='36' height='1'/%3E%3Crect x='38' y='38' width='34' height='1'/%3E%3C/g%3E%3C/svg%3E");
  /* the button rims: one deeper shade per hardware finish */
  --fl-rim-primary: #b54f1c;
  --fl-rim-brass: var(--brass-deep);
  --fl-rim-plain: #cdbca5;
  --fl-rim-danger: #85230f;
  --fl-rim-water: #08494e;
  --fl-face-hi: rgb(255 255 255 / .45);
  --fl-ring: 0 0 0 3px var(--surface), 0 0 0 5px var(--cold);
}
[data-theme="dark"] {
  --fl-tiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%231b262a'%3E%3Crect width='72' height='2'/%3E%3Crect y='36' width='72' height='2'/%3E%3Crect width='2' height='36'/%3E%3Crect x='36' y='36' width='2' height='36'/%3E%3C/g%3E%3Cg fill='%23161f22'%3E%3Crect x='2' y='2' width='34' height='1'/%3E%3Crect x='38' y='2' width='34' height='1'/%3E%3Crect y='38' width='36' height='1'/%3E%3Crect x='38' y='38' width='34' height='1'/%3E%3C/g%3E%3C/svg%3E");
  --fl-rim-primary: #9c4318;
  --fl-rim-plain: #0a0f11;
  --fl-rim-danger: #a8402f;
  --fl-rim-water: #1d6f6d;
  --fl-face-hi: rgb(255 255 255 / .22);
  --fl-ring: 0 0 0 3px var(--page), 0 0 0 5px var(--cold);
}

html { -webkit-text-size-adjust: 100%; }
html.fl-locked { overflow: hidden; }
body {
  margin: 0;
  background-color: var(--page);
  background-image: var(--fl-tiles);
  background-size: 72px 72px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
.fl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fl-ico { flex: none; display: block; }
a { color: var(--copper); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: none; box-shadow: var(--fl-ring); }
button { font: inherit; color: inherit; }

/* type helpers */
.fl-display { margin: 0; font: 700 56px/60px var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.fl-title { margin: 0; font: 650 36px/42px var(--font-display); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.fl-heading { margin: 0; font: 600 22px/28px var(--font-display); letter-spacing: -.005em; color: var(--ink); }
.fl-lead { margin: 0; font-size: 19px; line-height: 28px; color: var(--ink-soft); }
.fl-small { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fl-overline { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--copper); }
.fl-num { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .fl-display { font-size: 40px; line-height: 44px; }
  .fl-title { font-size: 28px; line-height: 34px; }
}

/* preview stage */
.fl-stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); color: var(--ink); }
.fl-stage--top { align-items: flex-start; }
.fl-stage--col { flex-direction: column; align-items: stretch; }
.fl-stage--col.fl-stage--top { align-items: flex-start; }
.fl-cap { width: 100%; font: 600 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.fl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.fl-col { display: flex; flex-direction: column; gap: var(--space-3); }

/* the Flow mark */
.fl-logo { display: block; flex: none; overflow: visible; }
.fl-logo__flow, .fl-logo__return { fill: none; stroke-width: 8; }
.fl-logo__flow { stroke: var(--flame); }
.fl-logo__return { stroke: var(--water); }
.fl-logo__collar { fill: var(--brass); stroke: var(--brass-deep); stroke-width: 1.2; }
.fl-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.fl-brand__words { display: flex; flex-direction: column; min-width: 0; }
.fl-brand__name { font: 700 20px/22px var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.fl-brand__sub { font: 600 11px/14px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
.fl-btn[hidden], .fl-ibtn[hidden] { display: none; }
.fl-quote__title:focus-visible, .fl-dlg:focus-visible { box-shadow: none; }

/* ================= Button: a brass push button ================= */
.fl-btn {
  --_face: var(--brass); --_ink: var(--on-warm); --_rim: var(--fl-rim-brass); --_r: 4px; --_h: 46px;
  position: relative; display: inline-flex; vertical-align: top; flex: none;
  margin: 0 0 var(--_r); padding: 0; border: 0; border-radius: var(--radius-md);
  background-color: var(--_face);
  background-image: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 60%);
  color: var(--_ink); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 var(--_r) 0 var(--_rim), 0 calc(var(--_r) + 4px) 10px -5px rgb(40 22 5 / .45), inset 0 1px 0 var(--fl-face-hi);
  transform: translateY(0);
  transition: transform var(--fl-quick) var(--fl-e-press), box-shadow var(--fl-quick) var(--fl-e-press), background-color var(--fl-quick);
}
.fl-btn::after { content: ""; position: absolute; z-index: -1; inset: -2px -6px calc(-1 * var(--_r) - 8px) -2px; }
.fl-btn__face {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: var(--_h); padding: 0 20px; border-radius: inherit; overflow: hidden;
  font: 600 16px/1 var(--font-display); letter-spacing: .005em; white-space: nowrap;
}
.fl-btn__face::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, rgb(255 255 255 / 0), rgb(255 255 255 / .42), rgb(255 255 255 / 0));
  transform: translateX(-160%) skewX(-18deg);
}
.fl-btn:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); box-shadow: 0 calc(var(--_r) + 1px) 0 var(--_rim), 0 calc(var(--_r) + 7px) 14px -6px rgb(40 22 5 / .5), inset 0 1px 0 var(--fl-face-hi); }
.fl-btn:hover:not(:disabled):not([aria-disabled="true"]) .fl-btn__face::before { animation: fl-glint 720ms var(--fl-e-water) 1; }
.fl-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(calc(var(--_r) - 1px));
  box-shadow: 0 1px 0 var(--_rim), 0 2px 4px -2px rgb(40 22 5 / .4), inset 0 1px 0 var(--fl-face-hi);
  transition-duration: var(--fl-press);
}
.fl-btn:focus-visible { box-shadow: 0 var(--_r) 0 var(--_rim), var(--fl-ring); }
@keyframes fl-glint { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(400%) skewX(-18deg); } }
.fl-btn--primary { --_face: var(--flame); --_ink: var(--on-warm); --_rim: var(--fl-rim-primary); }
.fl-btn--secondary { --_face: var(--brass); --_ink: var(--on-warm); --_rim: var(--fl-rim-brass); }
.fl-btn--plain { --_face: var(--surface); --_ink: var(--ink); --_rim: var(--fl-rim-plain); background-image: none; }
.fl-btn--plain .fl-btn__face { box-shadow: inset 0 0 0 1px var(--line); }
.fl-btn--danger { --_face: var(--ember); --_ink: var(--on-fill); --_rim: var(--fl-rim-danger); }
.fl-btn--water { --_face: var(--water); --_ink: var(--on-fill); --_rim: var(--fl-rim-water); }
.fl-btn--ghost { --_r: 0px; background: transparent; background-image: none; color: var(--copper); box-shadow: none; }
.fl-btn--ghost .fl-btn__face::before { display: none; }
.fl-btn--ghost:hover:not(:disabled) { background-color: var(--surface-sunk); transform: none; box-shadow: none; }
.fl-btn--ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.fl-btn--ghost .fl-btn__face { padding: 0 12px; }
.fl-btn--sm { --_h: 36px; --_r: 3px; }
.fl-btn--sm .fl-btn__face { padding: 0 14px; font-size: 14px; gap: 6px; }
.fl-btn--lg { --_h: 56px; --_r: 5px; }
.fl-btn--lg .fl-btn__face { padding: 0 26px; font-size: 18px; gap: 10px; }
.fl-btn--ghost.fl-btn--sm, .fl-btn--ghost.fl-btn--lg { --_r: 0px; }
.fl-btn--block { display: flex; width: 100%; }
.fl-btn:disabled, .fl-btn[aria-disabled="true"] {
  --_face: var(--surface-sunk); --_ink: var(--ink-soft); --_rim: var(--line);
  background-image: none; cursor: not-allowed; box-shadow: 0 var(--_r) 0 var(--_rim);
}
.fl-btn--ghost:disabled { background: transparent; box-shadow: none; }
.fl-btn__wheel { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.fl-btn.is-loading { cursor: progress; --_face: var(--brass); --_ink: var(--on-warm); --_rim: var(--fl-rim-brass); box-shadow: 0 var(--_r) 0 var(--_rim); }
.fl-btn--primary.is-loading { --_face: var(--flame); --_rim: var(--fl-rim-primary); }
.fl-btn.is-loading .fl-btn__face > :not(.fl-btn__wheel) { visibility: hidden; }
.fl-btn.is-loading .fl-btn__wheel { display: flex; }
.fl-btn.is-loading .fl-btn__wheel svg { animation: fl-spin 1.1s linear infinite; }
@keyframes fl-spin { to { transform: rotate(360deg); } }

/* ================= IconButton: a round knob ================= */
.fl-ibtn {
  --_face: var(--surface); --_ink: var(--ink); --_rim: var(--fl-rim-plain); --_r: 3px; --_z: 44px;
  position: relative; display: inline-flex; flex: none; width: var(--_z); height: var(--_z); margin: 0 0 var(--_r); padding: 0; border: 0;
  border-radius: 50%; background: var(--_face); color: var(--_ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 var(--_r) 0 var(--_rim), inset 0 0 0 1px var(--line), inset 0 1px 0 var(--fl-face-hi);
  transition: transform var(--fl-quick) var(--fl-e-press), box-shadow var(--fl-quick) var(--fl-e-press), background-color var(--fl-quick), color var(--fl-quick);
}
.fl-ibtn::after { content: ""; position: absolute; z-index: -1; inset: -2px -6px -10px -2px; border-radius: 50%; }
.fl-ibtn__face { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.fl-ibtn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 calc(var(--_r) + 1px) 0 var(--_rim), inset 0 0 0 1px var(--ink-soft), inset 0 1px 0 var(--fl-face-hi); }
.fl-ibtn:active:not(:disabled) { transform: translateY(calc(var(--_r) - 1px)); box-shadow: 0 1px 0 var(--_rim), inset 0 0 0 1px var(--ink-soft); transition-duration: var(--fl-press); }
.fl-ibtn:focus-visible { box-shadow: 0 var(--_r) 0 var(--_rim), var(--fl-ring); }
.fl-ibtn--brass, .fl-ibtn[aria-pressed="true"] { --_face: var(--brass); --_ink: var(--on-warm); --_rim: var(--fl-rim-brass); }
.fl-ibtn--brass:hover:not(:disabled), .fl-ibtn[aria-pressed="true"]:hover:not(:disabled) { box-shadow: 0 calc(var(--_r) + 1px) 0 var(--_rim), inset 0 1px 0 var(--fl-face-hi); }
.fl-ibtn--brass, .fl-ibtn[aria-pressed="true"] { box-shadow: 0 var(--_r) 0 var(--_rim), inset 0 1px 0 var(--fl-face-hi); }
.fl-ibtn--ghost { --_r: 0px; background: transparent; box-shadow: none; color: var(--ink-soft); }
.fl-ibtn--ghost:hover:not(:disabled) { background: var(--surface-sunk); color: var(--ink); box-shadow: none; transform: none; }
.fl-ibtn--sm { --_z: 36px; }
.fl-ibtn--lg { --_z: 56px; --_r: 4px; }
.fl-ibtn:disabled { opacity: .45; cursor: not-allowed; }
.fl-ibtn__count { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ember); color: var(--on-fill); font: 600 11px/20px var(--font-display); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--page); }

/* ================= Toggle: a quarter-turn valve ================= */
.fl-toggle { position: relative; display: inline-flex; align-items: center; gap: 14px; cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.fl-toggle::after { content: ""; position: absolute; z-index: -1; inset: -4px -6px -8px -4px; }
.fl-valve { position: relative; flex: none; width: 66px; height: 40px; }
.fl-valve__pipe { position: absolute; left: 0; right: 0; top: 14px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-sunk); box-shadow: var(--shadow-well), inset 0 0 0 1.5px var(--ink-soft); }
.fl-valve__pipe::before, .fl-valve__pipe::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 5px; background: var(--copper); }
.fl-valve__pipe::before { left: 0; } .fl-valve__pipe::after { right: 0; }
.fl-valve__water { position: absolute; inset: 0; background: var(--water); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--fl-settle) var(--fl-e-water); }
.fl-valve__nut { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 7px; background: var(--brass); box-shadow: 0 2px 0 var(--brass-deep), inset 0 1px 0 rgb(255 255 255 / .5); transition: transform var(--fl-press) var(--fl-e-press); }
.fl-valve__lever { position: absolute; left: 50%; top: 50%; width: 26px; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--ink-soft); transform-origin: 0 50%; transform: rotate(-90deg); transition: transform var(--fl-turn) var(--fl-e-valve), background-color var(--fl-quick); box-shadow: 0 1px 0 rgb(0 0 0 / .2); }
.fl-valve__grip { position: absolute; right: -3px; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: inherit; }
.fl-valve__pin { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--brass-deep); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
.fl-toggle input:checked + .fl-valve .fl-valve__lever { transform: rotate(0deg); background: var(--flame); }
.fl-toggle input:checked + .fl-valve .fl-valve__water { transform: scaleX(1); transition-delay: 120ms; }
.fl-toggle:active .fl-valve__nut { transform: translateY(1px); }
.fl-toggle:hover .fl-valve__lever { background: var(--ink); }
.fl-toggle:hover input:checked + .fl-valve .fl-valve__lever { background: var(--flame); }
.fl-toggle input:focus-visible + .fl-valve .fl-valve__pipe { box-shadow: var(--fl-ring); }
.fl-toggle__text { display: flex; flex-direction: column; }
.fl-toggle__label { font-weight: 500; }
.fl-toggle__hint { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fl-toggle__state { display: grid; min-width: 3.6em; margin-left: -4px; font: 600 11px/14px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.fl-toggle__state > * { grid-area: 1 / 1; }
.fl-toggle__on { visibility: hidden; color: var(--water); }
.fl-toggle input:checked ~ .fl-toggle__state .fl-toggle__on { visibility: visible; }
.fl-toggle input:checked ~ .fl-toggle__state .fl-toggle__off { visibility: hidden; }
.fl-toggle.is-disabled { opacity: .5; cursor: not-allowed; }

/* ================= Checkbox and Radio ================= */
.fl-check { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.fl-check__box, .fl-radio__dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--ink-soft); background: var(--surface); color: var(--on-fill); transition: background-color var(--fl-quick), border-color var(--fl-quick), transform var(--fl-press) var(--fl-e-press); }
.fl-check__box { border-radius: var(--radius-sm); }
.fl-check__box svg { transform: scale(.3) rotate(-12deg); opacity: 0; transition: transform var(--fl-turn) var(--fl-e-stamp), opacity var(--fl-press); }
.fl-check input:checked + .fl-check__box { background: var(--copper); border-color: var(--copper); }
.fl-check input:checked + .fl-check__box svg { transform: none; opacity: 1; }
.fl-check:hover .fl-check__box, .fl-check:hover .fl-radio__dot { border-color: var(--copper); }
.fl-check:active .fl-check__box, .fl-check:active .fl-radio__dot { transform: scale(.92); }
.fl-check input:focus-visible + span { box-shadow: var(--fl-ring); }
.fl-radio__dot { border-radius: 50%; }
.fl-radio__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--copper); transform: scale(0); transition: transform var(--fl-turn) var(--fl-e-valve); }
.fl-radio input:checked + .fl-radio__dot { border-color: var(--copper); }
.fl-radio input:checked + .fl-radio__dot::after { transform: scale(1); }
.fl-check__text { display: flex; flex-direction: column; padding-top: 0; }
.fl-check__label { line-height: 24px; }
.fl-check__hint { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fl-check.is-disabled { opacity: .5; cursor: not-allowed; }
.fl-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fl-fieldset legend { padding: 0; margin-bottom: 10px; }
.fl-fieldset__items { display: flex; flex-direction: column; gap: 12px; }
.fl-fieldset--inline .fl-fieldset__items { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }

/* ================= TextField and Select ================= */
:root { --fl-glow: rgb(242 113 47 / .2); }
[data-theme="dark"] { --fl-glow: rgb(255 141 79 / .22); }
.fl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fl-field__label { font: 600 13px/16px var(--font-display); letter-spacing: .02em; color: var(--ink); }
.fl-field__opt { font-weight: 400; color: var(--ink-soft); }
.fl-field__box { position: relative; display: flex; align-items: center; min-width: 0; background: var(--surface); border: 1.5px solid var(--ink-soft); border-radius: var(--radius-md); box-shadow: inset 0 2px 0 rgb(0 0 0 / .03); transition: border-color var(--fl-quick), box-shadow var(--fl-quick); }
.fl-field__box:hover { border-color: var(--ink); }
.fl-field__box:focus-within { border-color: var(--copper); box-shadow: 0 0 0 4px var(--fl-glow); }
.fl-field__input { flex: 1; min-width: 0; width: 100%; height: 48px; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font: 400 16px/24px var(--font-body); outline: none; border-radius: inherit; }
.fl-field__input::placeholder { color: var(--ink-soft); opacity: .85; }
textarea.fl-field__input { height: auto; padding: 12px 14px; resize: vertical; }
.fl-field__icon { margin-left: 12px; color: var(--ink-soft); }
.has-icon .fl-field__input { padding-left: 8px; }
.fl-field__suffix { padding: 0 14px 0 0; color: var(--ink-soft); font-size: 14px; }
.fl-field--upper .fl-field__input { letter-spacing: .06em; font-weight: 500; }
.fl-field--lg .fl-field__input { height: 56px; font-size: 18px; }
.fl-field__help { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fl-field__error { display: none; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ember); font-weight: 500; }
.fl-field.is-error .fl-field__box { border-color: var(--ember); }
.fl-field.is-error .fl-field__box:focus-within { box-shadow: 0 0 0 4px rgb(189 51 32 / .16); }
.fl-field.is-error .fl-field__error { display: flex; }
.fl-field__error.is-shown { animation: fl-drop-in var(--fl-settle) var(--fl-e-valve) backwards; }
@keyframes fl-drop-in { from { opacity: 0; transform: translateY(-5px); } }
.fl-field__input:disabled { cursor: not-allowed; color: var(--ink-soft); }
.fl-select__input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.fl-select__chev { position: absolute; right: 12px; top: 50%; margin-top: -9px; color: var(--ink-soft); pointer-events: none; transition: transform var(--fl-turn) var(--fl-e-valve); }
.fl-select .fl-field__box:focus-within .fl-select__chev { transform: rotate(180deg); color: var(--copper); }
.fl-select__input option { color: #1d2a2f; background: #fffcf7; }

/* ================= Slider: a pipe and a gate-valve wheel ================= */
.fl-slider { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fl-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fl-slider__out { font: 600 15px/20px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.fl-slider__track { position: relative; height: 34px; cursor: pointer; touch-action: none; }
.fl-slider__bore { position: absolute; left: 0; right: 0; top: 11px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-sunk); box-shadow: var(--shadow-well), inset 0 0 0 1.5px var(--ink-soft); }
.fl-slider__fill { position: absolute; inset: 0; background: var(--water); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.fl-slider__rail { position: absolute; left: 0; right: 34px; top: 0; height: 34px; pointer-events: none; container-type: inline-size; }
.fl-slider__thumb { position: absolute; left: 0; top: 0; transform: translateX(calc(var(--p, 0) * 100cqw)); width: 34px; height: 34px; border-radius: 50%; pointer-events: auto; cursor: grab; outline: none; }
.fl-slider__thumb::after { content: ""; position: absolute; inset: 3px 1px -1px 3px; z-index: -1; border-radius: 50%; background: var(--brass-deep); }
.fl-slider__wheel { display: block; width: 34px; height: 34px; transform: rotate(calc(var(--p, 0) * 540deg)); }
.fl-slider__wheel svg { width: 34px; height: 34px; display: block; }
.fl-wheel__rim { fill: var(--brass); stroke: var(--brass-deep); stroke-width: 2; }
.fl-wheel__spoke { stroke: var(--brass-deep); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.fl-wheel__hub { fill: var(--brass-deep); }
.fl-slider__thumb:focus-visible { box-shadow: var(--fl-ring); }
.fl-slider.is-dragging .fl-slider__thumb { cursor: grabbing; }
.fl-slider:not(.is-dragging) .fl-slider__thumb, .fl-slider:not(.is-dragging) .fl-slider__wheel, .fl-slider:not(.is-dragging) .fl-slider__fill { transition: transform var(--fl-quick) var(--fl-e-press); }
.fl-slider__marks { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.fl-slider.is-disabled { opacity: .5; pointer-events: none; }

/* ================= Tabs ================= */
.fl-tabs__scroller { overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.fl-tabs__scroller::-webkit-scrollbar { display: none; }
.fl-tabs__list { position: relative; display: flex; gap: 2px; min-width: max-content; box-shadow: inset 0 -2px 0 var(--line); }
.fl-tabs__tab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px; border: 0; background: none; border-radius: var(--radius-md) var(--radius-md) 0 0; font: 500 15px/1 var(--font-display); color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: color var(--fl-quick), background-color var(--fl-quick); }
.fl-tabs__tab:hover { color: var(--ink); background: var(--surface-sunk); }
.fl-tabs__tab[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.fl-tabs__tab:focus-visible { box-shadow: inset 0 0 0 2px var(--cold); }
.fl-tabs__count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-sunk); color: var(--ink-soft); font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; }
.fl-tabs__tab[aria-selected="true"] .fl-tabs__count { background: var(--copper); color: var(--on-fill); }
.fl-tabs__bar { position: absolute; left: 0; bottom: -1px; width: 100px; height: 4px; border-radius: 2px; background: var(--copper); transform-origin: 0 50%; pointer-events: none; }
.fl-tabs.is-ready .fl-tabs__bar { transition: transform var(--fl-turn) var(--fl-e-valve); }
.fl-tabs__panel { padding-top: var(--space-4); outline: none; }
.fl-tabs__panel.is-in { animation: fl-rise var(--fl-settle) var(--fl-e-press) backwards; }
@keyframes fl-rise { from { opacity: 0; transform: translateY(6px); } }

/* ================= SegmentedControl: a brass thumb in a tray ================= */
.fl-seg { position: relative; display: inline-grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 4px; border-radius: var(--radius-pipe); background: var(--surface-sunk); box-shadow: var(--shadow-well), inset 0 0 0 1px var(--line); isolation: isolate; max-width: 100%; }
.fl-seg--block { display: grid; width: 100%; }
.fl-seg__thumb { position: absolute; z-index: 0; top: 4px; bottom: 6px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: var(--radius-pipe); background: var(--brass); background-image: linear-gradient(180deg, rgb(255 255 255 / .25), rgb(255 255 255 / 0) 60%); box-shadow: 0 2px 0 var(--brass-deep), inset 0 1px 0 rgb(255 255 255 / .45); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform var(--fl-turn) var(--fl-e-valve); }
.fl-seg__opt { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 2px 16px 4px; border-radius: var(--radius-pipe); cursor: pointer; font: 600 14px/18px var(--font-display); color: var(--ink-soft); text-align: center; white-space: nowrap; transition: color var(--fl-quick); -webkit-tap-highlight-color: transparent; }
.fl-seg__label { display: flex; flex-direction: column; align-items: center; }
.fl-seg__note { font: 500 11px/13px var(--font-body); letter-spacing: .01em; }
.fl-seg__opt:hover { color: var(--ink); }
.fl-seg__opt.is-on { color: var(--on-warm); }
.fl-seg__opt:has(:focus-visible) { box-shadow: var(--fl-ring); }
.fl-seg__opt:active .fl-seg__label { transform: translateY(1px); }
.fl-seg--sm .fl-seg__opt { min-height: 34px; padding: 0 12px 2px; font-size: 13px; }

/* ================= Card ================= */
.fl-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--ink); text-align: left; text-decoration: none; font: inherit; }
button.fl-card { cursor: pointer; width: 100%; }
.fl-card--lift { transition: transform var(--fl-quick) var(--fl-e-press), box-shadow var(--fl-quick) var(--fl-e-press), border-color var(--fl-quick); cursor: pointer; }
.fl-card--lift::after { content: ""; position: absolute; z-index: -1; inset: 0 -6px -8px 0; }
.fl-card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ink-soft); }
.fl-card--lift:active { transform: translateY(-1px); box-shadow: var(--shadow-sm); transition-duration: var(--fl-press); }
.fl-card--lift:focus-visible { box-shadow: var(--fl-ring); }
.fl-card--pipe { margin-top: 4px; }
.fl-card--pipe::before { content: ""; position: absolute; top: -4px; left: 24px; right: 24px; height: 7px; border-radius: 4px; background: var(--copper); box-shadow: inset 0 2px 0 rgb(255 255 255 / .28), -10px 0 0 -1px var(--brass), 10px 0 0 -1px var(--brass); }
.fl-card--flush { padding: 0; overflow: hidden; }
.fl-card__media { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 4px; }
.fl-card--flush .fl-card__media { margin: 0; }
.fl-card__head { display: flex; align-items: center; gap: 14px; }
.fl-card__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--water-soft); color: var(--water); }
.fl-card--warm .fl-card__icon { background: color-mix(in srgb, var(--flame) 18%, var(--surface)); color: var(--copper); }
.fl-card--emergency .fl-card__icon { background: var(--ember); color: var(--on-fill); }
.fl-card__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl-card__title { margin: 0; font: 600 20px/26px var(--font-display); letter-spacing: -.005em; }
.fl-card__body { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 22px; }
.fl-card__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 4px; }

/* ================= FinDivider: a radiator on its side ================= */
.fl-fins { position: relative; display: flex; align-items: stretch; gap: 10px; height: 34px; padding: 0 2px 6px; }
.fl-fins__row { flex: 1; min-width: 0; display: flex; justify-content: space-between; overflow: hidden; }
.fl-fins__fin { flex: 0 0 6px; border-radius: 3px 3px 1px 1px; background: var(--line); transition: background-color 90ms steps(1, end) var(--d, 0ms); }
.fl-fins.is-warm .fl-fins__fin { background: var(--brass); }
.fl-fins.is-warm .fl-fins__fin.is-hot { background: var(--flame); }
.fl-fins__pipe { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; border-radius: 4px; background: var(--copper); box-shadow: inset 0 2px 0 rgb(255 255 255 / .25); }
.fl-fins__cap { position: relative; z-index: 1; flex: none; align-self: flex-end; width: 14px; height: 20px; margin-bottom: -6px; border-radius: 4px; background: var(--brass); box-shadow: 0 2px 0 var(--brass-deep), inset 0 1px 0 rgb(255 255 255 / .45); }

/* ================= Badge, Plate, Tag ================= */
.fl-badge { --_c: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pipe); background: var(--surface-sunk); color: var(--_c); font: 600 11px/1 var(--font-display); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.fl-badge--copper, .fl-badge--heat { --_c: var(--copper); background: color-mix(in srgb, var(--copper) 13%, var(--surface)); }
.fl-badge--water { --_c: var(--water); background: var(--water-soft); }
.fl-badge--leaf { --_c: var(--leaf); background: color-mix(in srgb, var(--leaf) 13%, var(--surface)); }
.fl-badge--ember { --_c: var(--ember); background: color-mix(in srgb, var(--ember) 12%, var(--surface)); }
.fl-badge--cold { --_c: var(--cold); background: color-mix(in srgb, var(--cold) 12%, var(--surface)); }
.fl-badge--brass { --_c: var(--on-warm); background: var(--brass); }
.fl-badge.is-solid { color: var(--on-fill); background: var(--_c); }
.fl-badge--brass.is-solid, .fl-badge--neutral.is-solid { color: var(--surface); background: var(--ink); }
.fl-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fl-plate { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 7px; border-radius: 4px; background: var(--brass); background-image: linear-gradient(180deg, rgb(255 255 255 / .3), rgb(255 255 255 / 0) 55%); color: var(--on-warm); font: 700 11px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 0 var(--brass-deep), inset 0 0 0 1px rgb(0 0 0 / .08), inset 0 1px 0 rgb(255 255 255 / .5); text-shadow: 0 1px 0 rgb(255 255 255 / .35); }
.fl-plate__screw { width: 6px; height: 6px; border-radius: 50%; background: var(--brass-deep); box-shadow: inset 0 1px 0 rgb(0 0 0 / .3), 0 1px 0 rgb(255 255 255 / .4); }
.fl-tag { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-pipe); background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); font: 500 14px/1 var(--font-body); white-space: nowrap; transition: opacity var(--fl-quick), transform var(--fl-quick) var(--fl-e-exit), border-color var(--fl-quick); }
.fl-tag > .fl-ico { color: var(--copper); }
.fl-tag--btn { cursor: pointer; font-weight: 600; }
.fl-tag--btn:hover { border-color: var(--copper); }
.fl-tag--btn .fl-ico { color: var(--ink-soft); }
.fl-tag.is-selected { background: var(--water-soft); border-color: var(--water); }
.fl-tag__x { display: grid; place-items: center; width: 22px; height: 22px; margin-right: -6px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; }
.fl-tag__x:hover { background: var(--surface-sunk); color: var(--ember); }
.fl-tag.is-leaving { opacity: 0; transform: scale(.9); }

/* ================= Avatar ================= */
.fl-avatar { --_z: 44px; --_bg: var(--copper); --_fg: var(--on-fill); position: relative; display: inline-grid; place-items: center; flex: none; width: var(--_z); height: var(--_z); border-radius: 50%; background: var(--_bg); color: var(--_fg); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--copper); font: 600 calc(var(--_z) * .38)/1 var(--font-display); letter-spacing: .02em; }
.fl-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fl-avatar--sm { --_z: 32px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--copper); }
.fl-avatar--lg { --_z: 64px; }
.fl-avatar--xl { --_z: 88px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--copper); }
.fl-avatar--water { --_bg: var(--water); } .fl-avatar--cold { --_bg: var(--cold); } .fl-avatar--leaf { --_bg: var(--leaf); }
.fl-avatar--brass { --_bg: var(--brass); --_fg: var(--on-warm); }
.fl-avatar--more { --_bg: var(--surface-sunk); --_fg: var(--ink-soft); font-size: 12px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--line); }
.fl-avatar__status { position: absolute; right: -1px; bottom: -1px; width: calc(var(--_z) * .28); height: calc(var(--_z) * .28); min-width: 10px; min-height: 10px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ink-soft); }
.fl-avatar__status.is-available { background: var(--leaf); }
.fl-avatar__status.is-on-job { background: var(--flame); }
.fl-avatars { display: inline-flex; padding-left: 8px; }
.fl-avatars > .fl-avatar { margin-left: -8px; }

/* ================= Accordion ================= */
.fl-acc { border-top: 1px solid var(--line); }
.fl-acc__item { border-bottom: 1px solid var(--line); }
.fl-acc__head { margin: 0; font: inherit; }
.fl-acc__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; border: 0; background: none; text-align: left; cursor: pointer; font: 600 17px/24px var(--font-display); color: var(--ink); border-radius: var(--radius-md); -webkit-tap-highlight-color: transparent; }
.fl-acc__btn:hover .fl-acc__q { color: var(--copper); }
.fl-acc__btn:focus-visible { box-shadow: inset 0 0 0 2px var(--cold); }
.fl-acc__handle { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--fl-quick); }
.fl-acc__h, .fl-acc__v { position: absolute; left: 10px; top: 15.75px; width: 14px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform var(--fl-turn) var(--fl-e-valve), background-color var(--fl-quick); }
.fl-acc__v { transform: rotate(90deg); }
.fl-acc__item.is-open .fl-acc__handle { background: var(--copper); }
.fl-acc__item.is-open .fl-acc__h, .fl-acc__item.is-open .fl-acc__v { background: var(--on-fill); }
.fl-acc__item.is-open .fl-acc__v { transform: rotate(0deg); }
.fl-acc__panel.is-in { animation: fl-fall var(--fl-settle) var(--fl-e-press) backwards; }
@keyframes fl-fall { from { opacity: 0; transform: translateY(-4px); } }
.fl-acc__a { padding: 0 52px 20px 4px; color: var(--ink-soft); }
.fl-acc__a p { margin: 0 0 8px; }

/* ================= Modal and Sheet ================= */
.fl-layer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.fl-layer__scrim { position: absolute; inset: 0; background: rgb(18 26 29 / .55); opacity: 0; transition: opacity var(--fl-settle) var(--fl-e-press); }
[data-theme="dark"] .fl-layer__scrim { background: rgb(0 0 0 / .66); }
.fl-layer.is-open .fl-layer__scrim { opacity: 1; }
.fl-dlg { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--ink); outline: none; opacity: 0; transform: translateY(16px); transition: transform var(--fl-settle) var(--fl-e-valve), opacity var(--fl-quick); }
.fl-layer.is-open .fl-dlg { opacity: 1; transform: none; }
.fl-layer.is-closing .fl-dlg { opacity: 0; transform: translateY(10px); transition: transform 200ms var(--fl-e-exit), opacity 200ms var(--fl-e-exit); }
.fl-layer.is-closing .fl-layer__scrim { opacity: 0; transition-duration: 220ms; }
.fl-dlg--lg { width: min(880px, 100%); }
.fl-dlg--xl { width: min(1120px, 100%); }
.fl-dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 0 24px; }
.fl-dlg__title { margin: 2px 0 0; font: 600 22px/28px var(--font-display); }
.fl-dlg__x { margin-bottom: 0; }
.fl-dlg__body { flex: 1; overflow: auto; padding: 16px 24px 24px; overscroll-behavior: contain; }
.fl-dlg__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--line); }
.fl-layer--sheet { place-items: end center; padding: 0; }
.fl-dlg--sheet { width: min(1040px, 100%); max-height: 94vh; max-height: 94dvh; border-radius: 24px 24px 0 0; border-bottom: 0; opacity: 1; transform: translateY(100%); transition: transform var(--fl-settle) cubic-bezier(.2, .9, .3, 1); }
.fl-layer.is-closing .fl-dlg--sheet { opacity: 1; transform: translateY(100%); transition: transform 240ms var(--fl-e-exit); }
.fl-dlg__grab { display: block; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--line); }
@media (max-width: 640px) {
  .fl-dlg__head { padding: 16px 16px 0 20px; }
  .fl-dlg__body { padding: 14px 20px 20px; }
  .fl-dlg__foot { padding: 14px 20px 18px; }
  .fl-dlg__foot .fl-btn { flex: 1; }
}

/* ================= Tooltip ================= */
.fl-tip-wrap { position: relative; display: inline-flex; }
.fl-tip__trigger { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-sunk); color: var(--ink-soft); cursor: help; box-shadow: inset 0 0 0 1px var(--line); }
.fl-tip__trigger:hover { color: var(--copper); }
.fl-tip { position: fixed; z-index: 200; left: 0; top: 0; max-width: min(260px, calc(100vw - 16px)); padding: 9px 12px; border-radius: var(--radius-sm); background: var(--ink); color: var(--page); font: 400 14px/20px var(--font-body); box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity var(--fl-quick), transform var(--fl-quick) var(--fl-e-press); }
.fl-tip[data-side="bottom"] { transform: translateY(-4px); }
.fl-tip[data-side="left"] { transform: translateX(4px); }
.fl-tip[data-side="right"] { transform: translateX(-4px); }
.fl-tip.is-open { opacity: 1; transform: none; }
.fl-tip__title { display: block; font: 600 13px/18px var(--font-display); color: var(--brass); }
.fl-tip__arrow { position: absolute; width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.fl-tip[data-side="top"] .fl-tip__arrow { bottom: -4px; left: var(--ax, 50%); margin-left: -5px; }
.fl-tip[data-side="bottom"] .fl-tip__arrow { top: -4px; left: var(--ax, 50%); margin-left: -5px; }
.fl-tip[data-side="left"] .fl-tip__arrow { right: -4px; top: var(--ay, 50%); margin-top: -5px; }
.fl-tip[data-side="right"] .fl-tip__arrow { left: -4px; top: var(--ay, 50%); margin-top: -5px; }

/* ================= Toast ================= */
.fl-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 150; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.fl-toast { --_c: var(--cold); --_on: var(--on-fill); pointer-events: auto; position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 30px; gap: 12px; align-items: start; padding: 14px 12px 18px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; color: var(--ink); animation: fl-toast-in var(--fl-settle) var(--fl-e-valve) backwards; transition: opacity 200ms var(--fl-e-exit), transform 200ms var(--fl-e-exit); }
@keyframes fl-toast-in { from { opacity: 0; transform: translateY(18px); } }
.fl-toast.is-leaving { opacity: 0; transform: translateY(10px); }
.fl-toast--success { --_c: var(--leaf); } .fl-toast--danger { --_c: var(--ember); } .fl-toast--water { --_c: var(--water); }
.fl-toast--warning { --_c: var(--brass); --_on: var(--on-warm); } .fl-toast--heat { --_c: var(--flame); --_on: var(--on-warm); }
.fl-toast__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--_c); color: var(--_on); }
.fl-toast__txt { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; min-width: 0; }
.fl-toast__txt b { font: 600 15px/20px var(--font-display); }
.fl-toast__txt span { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fl-toast__act { align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--copper); font: 600 14px/20px var(--font-display); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fl-toast__x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; }
.fl-toast__x:hover { background: var(--surface-sunk); color: var(--ink); }
.fl-toast__drain { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--_c); transform-origin: 0 50%; animation: fl-drain var(--t, 5000ms) linear forwards; }
.fl-toast:hover .fl-toast__drain, .fl-toast:focus-within .fl-toast__drain { animation-play-state: paused; }
@keyframes fl-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) { .fl-toasts { left: 16px; right: 16px; width: auto; } }

/* ================= Progress: water in a pipe ================= */
.fl-progress { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fl-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fl-progress__label { font: 600 14px/18px var(--font-display); color: var(--ink); }
.fl-progress__val { font: 600 14px/18px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.fl-progress__note { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-pipe { position: relative; display: flex; align-items: center; height: 24px; }
.fl-pipe__collar { position: relative; z-index: 1; flex: none; width: 10px; height: 24px; border-radius: 3px; background: var(--copper); box-shadow: inset 0 2px 0 rgb(255 255 255 / .3), inset 0 -2px 0 rgb(0 0 0 / .15); transition: background-color var(--fl-quick); }
.fl-pipe__bore { position: relative; flex: 1; height: 14px; margin: 0 -2px; overflow: hidden; background: var(--surface-sunk); box-shadow: var(--shadow-well), inset 0 0 0 1.5px var(--ink-soft); }
.fl-pipe__water { position: absolute; inset: 0; background: var(--water); background-image: linear-gradient(180deg, rgb(255 255 255 / 0) 2px, rgb(255 255 255 / .28) 2px, rgb(255 255 255 / .28) 4px, rgb(255 255 255 / 0) 4px); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform var(--fl-fill) var(--fl-e-water); }
.fl-pipe.is-full .fl-pipe__collar--r { background: var(--leaf); }
.fl-pipe--sm { height: 16px; } .fl-pipe--sm .fl-pipe__collar { width: 8px; height: 16px; } .fl-pipe--sm .fl-pipe__bore { height: 10px; }
.fl-pipe--lg { height: 32px; } .fl-pipe--lg .fl-pipe__collar { width: 12px; height: 32px; } .fl-pipe--lg .fl-pipe__bore { height: 20px; }
.fl-pipe.is-flowing .fl-pipe__water { right: auto; width: 34%; transform: translateX(-100%); animation: fl-flow 1500ms var(--fl-e-water) infinite; }
@keyframes fl-flow { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ================= PipeSteps ================= */
.fl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.fl-steps__item { position: relative; display: flex; justify-content: center; text-align: center; }
.fl-steps__pipe { position: absolute; top: 14px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 9px; border-radius: 5px; overflow: hidden; background: var(--surface-sunk); box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.fl-steps__water { position: absolute; inset: 0; background: var(--water); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--fl-fill) var(--fl-e-water); }
.fl-steps__item.is-done .fl-steps__water, .fl-steps__item.is-current .fl-steps__water { transform: scaleX(1); }
.fl-steps__node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink-soft); font: inherit; min-width: 0; }
button.fl-steps__node:not(:disabled) { cursor: pointer; }
button.fl-steps__node:not(:disabled):hover .fl-steps__label { color: var(--copper); }
.fl-steps__num { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-soft); color: var(--ink-soft); font: 600 15px/1 var(--font-display); font-variant-numeric: tabular-nums; transition: background-color var(--fl-quick), border-color var(--fl-quick), color var(--fl-quick); }
.fl-steps__num > * { grid-area: 1 / 1; }
.fl-steps__num .fl-ico { opacity: 0; transform: scale(.4); transition: transform var(--fl-turn) var(--fl-e-stamp), opacity var(--fl-press); }
.fl-steps__item.is-done .fl-steps__num { background: var(--water); border-color: var(--water); color: var(--on-fill); }
.fl-steps__item.is-done .fl-steps__n { opacity: 0; }
.fl-steps__item.is-done .fl-steps__num .fl-ico { opacity: 1; transform: none; }
.fl-steps__item.is-current .fl-steps__num { background: var(--brass); border-color: var(--brass-deep); color: var(--on-warm); box-shadow: 0 3px 0 var(--brass-deep); }
.fl-steps__label { font: 500 13px/16px var(--font-display); color: var(--ink-soft); padding: 0 4px; }
.fl-steps__item.is-current .fl-steps__label { color: var(--ink); font-weight: 600; }
.fl-steps__node:focus-visible .fl-steps__num { box-shadow: var(--fl-ring); }

/* ================= Header ================= */
.fl-header { position: relative; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.fl-header--sticky { position: sticky; top: 0; }
.fl-header__bar { display: flex; align-items: center; gap: 20px; max-width: 1240px; min-height: 76px; margin: 0 auto; padding: 10px 32px; }
.fl-nav { display: flex; gap: 2px; flex: 1; justify-content: center; min-width: 0; }
.fl-nav__link { position: relative; padding: 10px 12px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font: 500 15px/20px var(--font-display); white-space: nowrap; transition: background-color var(--fl-quick), color var(--fl-quick); }
.fl-nav__link:hover { background: var(--surface-sunk); }
.fl-nav__link[aria-current="page"] { color: var(--copper); }
.fl-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--copper); }
.fl-header__end { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.fl-header__end .fl-btn, .fl-header__end .fl-ibtn { margin-bottom: 3px; }
.fl-header__call { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.fl-header__call-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--water-soft); color: var(--water); }
.fl-header__call:hover .fl-header__call-ico { background: var(--water); color: var(--on-fill); }
.fl-header__call-txt { display: flex; flex-direction: column; }
.fl-header__call-txt small { font-size: 12px; line-height: 14px; color: var(--ink-soft); }
.fl-header__call-txt b { font: 600 17px/22px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.fl-header__burger { display: none; }
.fl-header__menu { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 76px); overflow: auto; padding: 8px 16px 24px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.fl-header__menu.is-open { animation: fl-menu-in var(--fl-settle) var(--fl-e-press) backwards; }
@keyframes fl-menu-in { from { opacity: 0; transform: translateY(-8px); } }
.fl-header__menu-links { display: flex; flex-direction: column; margin-bottom: 16px; }
.fl-header__menu-link { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 600 18px/24px var(--font-display); }
.fl-header__menu-link .fl-ico { color: var(--ink-soft); }
.fl-header__menu-link[aria-current="page"] { color: var(--copper); }
.fl-header__menu-call { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--water-soft); color: var(--ink); text-decoration: none; }
.fl-header__menu-call > .fl-ico { color: var(--water); }
.fl-header__menu-call span { display: flex; flex-direction: column; }
.fl-header__menu-call b { font: 600 20px/26px var(--font-display); font-variant-numeric: tabular-nums; }
.fl-header__menu-call small { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 1080px) {
  .fl-nav { display: none; }
  .fl-header__burger { display: inline-flex; }
}
@media (max-width: 640px) {
  .fl-header__bar { min-height: 64px; padding: 8px 16px; gap: 12px; }
  .fl-header__call-txt, .fl-header__cta { display: none; }
  .fl-header__end { gap: 10px; }
  .fl-header .fl-brand__sub { display: none; }
  .fl-header__menu { max-height: calc(100vh - 64px); }
}

/* ================= Footer ================= */
.fl-footer { position: relative; background: var(--surface-sunk); color: var(--ink); }
.fl-footer__fins { position: absolute; left: 0; right: 0; top: -20px; padding-left: 32px; padding-right: 32px; height: 28px; }
.fl-footer__inner { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 48px; max-width: 1240px; margin: 0 auto; padding: 56px 32px 32px; }
.fl-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fl-footer__blurb { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 22px; max-width: 340px; }
.fl-footer__phone, .fl-footer__mail { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.fl-footer__phone { font: 600 22px/28px var(--font-display); font-variant-numeric: tabular-nums; }
.fl-footer__phone .fl-ico, .fl-footer__mail .fl-ico { color: var(--copper); }
.fl-footer__phone:hover, .fl-footer__mail:hover { color: var(--copper); }
.fl-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; }
.fl-footer__h { margin: 0 0 12px; font: 600 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.fl-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fl-footer__col a { color: var(--ink); text-decoration: none; font-size: 15px; line-height: 22px; }
.fl-footer__col a:hover { color: var(--copper); text-decoration: underline; }
.fl-footer__base { max-width: 1240px; margin: 0 auto; padding: 20px 32px 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.fl-footer__creds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fl-footer__creds li { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-display); color: var(--ink); }
.fl-footer__creds .fl-ico { color: var(--leaf); }
.fl-footer__small { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
@media (max-width: 760px) {
  .fl-footer__inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 16px 24px; }
  .fl-footer__cols { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .fl-footer__base { padding: 16px 16px 24px; }
  .fl-footer__fins { padding-left: 16px; padding-right: 16px; }
}
/* forced phone layout, e.g. inside a narrow frame */
.fl-header--compact .fl-nav, .fl-header--compact .fl-header__call-txt, .fl-header--compact .fl-header__cta, .fl-header--compact .fl-brand__sub { display: none; }
.fl-header--compact .fl-header__burger { display: inline-flex; }
.fl-header--compact .fl-header__bar { min-height: 64px; padding: 8px 16px; gap: 12px; }
.fl-header--compact .fl-header__end { gap: 10px; }

/* ================= EmergencyBanner ================= */
.fl-emerg { color: var(--ink); }
.fl-drip { flex: none; overflow: visible; }
.fl-drip__pipe { fill: none; stroke: var(--on-fill); stroke-width: 7; stroke-linecap: round; opacity: .92; }
.fl-drip__collar { fill: var(--brass); stroke: var(--brass-deep); stroke-width: 1.2; }
.fl-drip__drop { fill: var(--on-fill); transform-box: fill-box; transform-origin: 50% 0; }
.fl-drip__ripple { fill: none; stroke: var(--on-fill); stroke-width: 2; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.fl-drip.is-dripping .fl-drip__drop { animation: fl-drop-fall var(--fl-drip) var(--fl-e-water) 1; }
.fl-drip.is-dripping .fl-drip__ripple { animation: fl-ripple var(--fl-drip) linear 1; }
@keyframes fl-drop-fall { 0%, 18% { transform: none; opacity: 1; } 55% { transform: translateY(13px); opacity: 0; } 56% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fl-ripple { 0%, 48% { opacity: 0; transform: scaleX(.3); } 56% { opacity: .9; } 80%, 100% { opacity: 0; transform: scaleX(1); } }
.fl-emerg__live { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 30%, transparent); }
.fl-emerg--strip { background: var(--ember); color: var(--on-fill); }
.fl-emerg--strip .fl-emerg__inner { display: flex; align-items: center; gap: 14px; max-width: 1240px; min-height: 56px; margin: 0 auto; padding: 6px 32px; }
.fl-emerg--strip .fl-drip { width: 34px; height: 40px; }
.fl-emerg--strip .fl-emerg__copy { margin: 0; flex: 1; min-width: 0; font-size: 15px; line-height: 20px; }
.fl-emerg--strip .fl-emerg__copy b { font: 600 16px/20px var(--font-display); }
.fl-emerg__avail { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/16px var(--font-display); white-space: nowrap; }
.fl-emerg--strip .fl-btn { margin-bottom: 3px; }
.fl-emerg--strip .fl-btn__label { font-variant-numeric: tabular-nums; }
.fl-emerg--panel { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fl-emerg__top { display: flex; align-items: flex-start; gap: 18px; padding: 24px; background: var(--ember); color: var(--on-fill); }
.fl-emerg__top .fl-drip { width: 44px; height: 52px; margin-top: 4px; }
.fl-emerg__over { display: flex; align-items: center; gap: 8px; font: 600 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.fl-emerg__title { margin: 6px 0 6px; font: 650 28px/34px var(--font-display); letter-spacing: -.01em; }
.fl-emerg--panel .fl-emerg__msg { margin: 0; font-size: 16px; line-height: 24px; }
.fl-emerg__list { list-style: none; margin: 0; padding: 20px 24px 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.fl-emerg__list li { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; }
.fl-emerg__list .fl-ico { color: var(--leaf); }
.fl-emerg__act { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 16px 24px 16px; }
.fl-emerg--panel .fl-emerg__call { --_face: var(--ember); --_ink: var(--on-fill); --_rim: var(--fl-rim-danger); background-image: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 60%); }
.fl-emerg--panel .fl-emerg__call .fl-btn__face { box-shadow: none; font-variant-numeric: tabular-nums; }
.fl-emerg__eta { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/18px var(--font-display); color: var(--ink); }
.fl-emerg__eta .fl-ico { color: var(--copper); }
.fl-emerg__gas { display: flex; gap: 10px; margin: 0; padding: 14px 24px; background: var(--surface-sunk); font-size: 14px; line-height: 20px; }
.fl-emerg__gas > .fl-ico { color: var(--ember); margin-top: 1px; }
.fl-emerg__gas a { font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) {
  .fl-emerg--strip .fl-emerg__inner { padding: 8px 16px; gap: 10px; flex-wrap: wrap; }
  .fl-emerg--strip .fl-emerg__msg, .fl-emerg__avail { display: none; }
  .fl-emerg--strip .fl-drip { width: 26px; height: 32px; }
  .fl-emerg__list { grid-template-columns: 1fr; }
  .fl-emerg__top { padding: 20px; gap: 12px; }
  .fl-emerg__title { font-size: 24px; line-height: 30px; }
}
@media (max-width: 420px) {
  .fl-emerg--strip .fl-emerg__copy b { font-size: 15px; }
  .fl-emerg--strip .fl-btn__face { padding: 0 10px; }
}

/* ================= GasSafeStamp and Accreditations ================= */
.fl-stamp { position: relative; flex: none; display: inline-block; transform: rotate(-8deg); }
.fl-stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fl-stamp__disc { fill: var(--brass); }
.fl-stamp__line { fill: none; stroke: var(--on-warm); stroke-width: 2.2; }
.fl-stamp__line--in { stroke-width: 1.4; }
.fl-stamp__ring { fill: var(--on-warm); font: 700 8.6px/1 var(--font-display); letter-spacing: .16em; }
.fl-stamp__flame { fill: var(--flame); stroke: var(--on-warm); stroke-width: 1.8; stroke-linejoin: round; }
.fl-stamp__reg { fill: var(--on-warm); font: 700 6.6px/1 var(--font-display); letter-spacing: .2em; }
.fl-stamp__num { fill: var(--on-warm); font: 700 12.5px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.fl-stamp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--brass); opacity: 0; pointer-events: none; }
.fl-stamp.is-waiting { opacity: 0; transform: rotate(-8deg) scale(1.35); }
.fl-stamp.is-landing { animation: fl-stamp var(--fl-settle) var(--fl-e-stamp) backwards; }
.fl-stamp.is-landing::after { animation: fl-stamp-ink 600ms var(--fl-e-press) 160ms backwards; }
@keyframes fl-stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.35); } 40% { opacity: 1; } }
@keyframes fl-stamp-ink { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.28); } }
.fl-creds { display: flex; align-items: center; gap: 28px; }
.fl-creds__list { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 12px; }
.fl-creds__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.fl-creds__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-sunk); color: var(--copper); }
.fl-creds__txt { display: flex; flex-direction: column; min-width: 0; }
.fl-creds__txt b { font: 600 14px/18px var(--font-display); }
.fl-creds__txt small { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
@media (max-width: 640px) {
  .fl-creds { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fl-creds__list { width: 100%; grid-template-columns: 1fr; }
}

/* ================= Thermostat ================= */
.fl-thermo { --fl-temp: var(--brass); --fl-temp-ink: var(--on-warm); display: inline-flex; flex-direction: column; align-items: center; gap: 10px; width: 300px; max-width: 100%; padding: 18px 20px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow-md); color: var(--ink); }
.fl-thermo[data-step="cold"] { --fl-temp: var(--cold); --fl-temp-ink: var(--on-fill); }
.fl-thermo[data-step="water"] { --fl-temp: var(--water); --fl-temp-ink: var(--on-fill); }
.fl-thermo[data-step="brass"] { --fl-temp: var(--brass); --fl-temp-ink: var(--on-warm); }
.fl-thermo[data-step="flame"] { --fl-temp: var(--flame); --fl-temp-ink: var(--on-warm); }
.fl-thermo[data-step="ember"] { --fl-temp: var(--ember); --fl-temp-ink: var(--on-fill); }
.fl-thermo__title { display: flex; align-items: baseline; justify-content: space-between; width: 100%; padding: 0 6px; }
.fl-thermo__title b { font: 600 15px/20px var(--font-display); }
.fl-thermo__dial { position: relative; width: 256px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: grab; outline: none; -webkit-tap-highlight-color: transparent; }
.fl-thermo.is-turning .fl-thermo__dial { cursor: grabbing; }
.fl-thermo__dial:focus-visible { box-shadow: var(--fl-ring); }
.fl-thermo__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fl-thermo__bezel { fill: var(--surface-sunk); stroke: var(--line); stroke-width: 1; }
.fl-thermo__ticks line { stroke: var(--ink-soft); stroke-width: 1.4; stroke-linecap: round; }
.fl-thermo__ticks line.is-major { stroke: var(--ink); stroke-width: 2.2; }
.fl-thermo__ticks text { fill: var(--ink-soft); font: 600 10px/1 var(--font-display); }
.fl-thermo__track { fill: none; stroke: var(--line); stroke-width: 11; stroke-linecap: round; }
.fl-thermo__active { fill: none; stroke: var(--fl-temp); stroke-width: 11; stroke-linecap: round; }
.fl-thermo__now { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.fl-thermo__face { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.fl-thermo__pointer { transform-box: view-box; transform-origin: 120px 120px; transition: transform var(--fl-turn) var(--fl-e-valve); }
.fl-thermo.is-turning .fl-thermo__pointer { transition: none; }
.fl-thermo__pointer rect:first-child { fill: var(--brass); stroke: var(--brass-deep); stroke-width: 2; }
.fl-thermo__pointer-line { fill: var(--brass-deep); }
.fl-thermo__read { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.fl-thermo__step { padding: 3px 10px; border-radius: var(--radius-pipe); background: var(--fl-temp); color: var(--fl-temp-ink); font: 600 11px/14px var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.fl-thermo__big { display: flex; align-items: flex-start; font: 600 54px/58px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); }
.fl-thermo__unit { margin: 8px 0 0 2px; font-size: 18px; line-height: 20px; color: var(--ink-soft); letter-spacing: 0; }
.fl-thermo__status { display: flex; align-items: center; gap: 4px; min-height: 18px; font: 600 12.5px/18px var(--font-display); color: var(--ink-soft); white-space: nowrap; }
.fl-thermo.is-heating .fl-thermo__status { color: var(--ink); }
.fl-thermo.is-heating .fl-thermo__status .fl-ico { color: var(--copper); }
.fl-thermo__ctrls { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 4px; }
.fl-thermo__now-txt { display: flex; flex-direction: column; align-items: center; }
.fl-thermo__now-txt small { font-size: 12px; line-height: 16px; color: var(--ink-soft); }
.fl-thermo__now-txt b { font: 600 18px/22px var(--font-display); font-variant-numeric: tabular-nums; }
.fl-thermo--compact { width: 240px; padding: 14px 14px 12px; }
.fl-thermo--compact .fl-thermo__dial { width: 204px; }
.fl-thermo--compact .fl-thermo__big { font-size: 42px; line-height: 46px; }

/* ================= ServicePlan ================= */
.fl-plans__bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 32px; }
.fl-plans__note { margin: 0; font-size: 14px; color: var(--ink-soft); }
.fl-plans__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: stretch; }
.fl-plan { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 28px 24px 22px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--fl-quick) var(--fl-e-press), box-shadow var(--fl-quick), border-color var(--fl-quick); }
.fl-plan::after { content: ""; position: absolute; z-index: -1; inset: 0 -6px -8px 0; }
.fl-plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fl-plan.is-popular { border-color: var(--brass); }
.fl-plan.is-selected { border-color: var(--water); box-shadow: 0 0 0 3px var(--water-soft), var(--shadow-md); }
.fl-plan__flag { position: absolute; top: -14px; left: 22px; }
.fl-plan__head { display: flex; align-items: flex-start; gap: 12px; }
.fl-plan__ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--surface-sunk); color: var(--copper); }
.fl-plan.is-popular .fl-plan__ico { background: var(--flame); color: var(--on-warm); }
.fl-plan__name { margin: 0; font: 600 22px/28px var(--font-display); }
.fl-plan__tag { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fl-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; min-height: 70px; }
.fl-plan__amt { font: 600 44px/48px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fl-plan__per { font-size: 16px; color: var(--ink-soft); }
.fl-plan__note { flex-basis: 100%; font: 600 13px/18px var(--font-display); color: var(--leaf); }
.fl-plan__fins { height: 24px; margin: -4px 0 0; }
.fl-plan__fins .fl-fins__cap { width: 10px; height: 14px; }
.fl-plan__fins .fl-fins__fin { flex-basis: 5px; }
.fl-plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fl-plan__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; }
.fl-plan__list li.is-out { color: var(--ink-soft); }
.fl-plan__mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-sunk); color: var(--ink-soft); }
.fl-plan__list li.is-in .fl-plan__mark { background: var(--leaf); color: var(--on-fill); }
.fl-plan__foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.fl-plan__small { margin: 0; text-align: center; font-size: 13px; line-height: 18px; color: var(--ink-soft); }

/* ================= FinanceCalculator ================= */
.fl-fin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.fl-fin__inputs { display: flex; flex-direction: column; gap: 22px; padding: 24px; }
.fl-fin__termrow { display: flex; flex-direction: column; gap: 8px; }
.fl-fin__out { display: flex; flex-direction: column; gap: 4px; padding: 24px; background: var(--water-soft); }
.fl-fin__big { display: flex; align-items: baseline; gap: 6px; }
.fl-fin__monthly { font: 600 52px/58px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fl-fin__mo { font-size: 16px; color: var(--ink-soft); }
.fl-fin__term { font-size: 14px; line-height: 20px; color: var(--ink-soft); min-height: 20px; }
.fl-fin__dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 0; margin: 14px 0 12px; padding-top: 14px; border-top: 1.5px dashed var(--ink-soft); }
.fl-fin__dl dt { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fl-fin__dl dd { margin: 0; padding-left: 16px; text-align: right; font: 600 15px/20px var(--font-display); font-variant-numeric: tabular-nums; }
.fl-fin__dl dt:last-of-type, .fl-fin__dl dd:last-of-type { padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.fl-fin__rep { margin: auto 0 0; font-size: 12px; line-height: 17px; color: var(--ink-soft); }
@media (max-width: 720px) { .fl-fin { grid-template-columns: 1fr; } .fl-fin__inputs, .fl-fin__out { padding: 20px; } .fl-fin__monthly { font-size: 44px; line-height: 48px; } }

/* ================= Stars, EngineerProfile ================= */
.fl-stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.fl-stars__s { position: relative; display: block; color: var(--line); }
.fl-stars__fill { position: absolute; inset: 0; color: var(--flame); clip-path: inset(0 calc((1 - var(--f, 1)) * 100%) 0 0); }
.fl-eng { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fl-eng__eta { display: flex; align-items: center; gap: 8px; margin: -24px -24px 0; padding: 10px 24px; background: var(--water-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; font: 600 14px/20px var(--font-display); color: var(--ink); }
.fl-eng__eta .fl-emerg__live { color: var(--leaf); }
.fl-eng__eta .fl-ico { color: var(--water); }
.fl-eng__head { display: flex; align-items: center; gap: 16px; }
.fl-eng__who { min-width: 0; }
.fl-eng__name { margin: 0; font: 600 22px/28px var(--font-display); }
.fl-eng__role { margin: 0 0 4px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fl-eng__rating { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-eng__id { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: var(--surface-sunk); border-radius: var(--radius-md); font-size: 14px; line-height: 20px; }
.fl-eng__id > .fl-ico { color: var(--leaf); }
.fl-eng__id b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.fl-eng__verified { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 600 12px/16px var(--font-display); color: var(--leaf); letter-spacing: .04em; text-transform: uppercase; }
.fl-eng__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fl-eng__stat { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: var(--radius-md); text-align: center; }
.fl-eng__stat b { font: 600 22px/26px var(--font-display); font-variant-numeric: tabular-nums; }
.fl-eng__stat small { font-size: 12px; line-height: 16px; color: var(--ink-soft); }
.fl-eng__skills { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-eng__quote { margin: 0; font-size: 16px; line-height: 24px; font-style: italic; color: var(--ink); }
.fl-eng__foot { margin-top: auto; }
.fl-eng--compact { gap: 12px; padding: 18px; }

/* ================= Reviews ================= */
.fl-revs { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: start; }
.fl-revs__sum { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fl-revs__score { display: flex; align-items: center; gap: 14px; }
.fl-revs__score > b { font: 650 64px/64px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.fl-revs__score small { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fl-revs__dist { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fl-revs__dist li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 46px; align-items: center; gap: 8px; font: 500 13px/18px var(--font-display); font-variant-numeric: tabular-nums; }
.fl-revs__bar { height: 8px; border-radius: 4px; background: var(--surface-sunk); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.fl-revs__bar span { display: block; height: 100%; background: var(--flame); transform-origin: 0 50%; }
.fl-revs__pc { text-align: right; color: var(--ink-soft); }
.fl-revs__main { min-width: 0; }
.fl-revs__bar-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.fl-revs__nav { display: flex; gap: 8px; }
.fl-revs__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; margin: -4px -2px 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; outline: none; }
.fl-revs__track:focus-visible { box-shadow: var(--fl-ring); border-radius: var(--radius-lg); }
.fl-rev { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fl-revs__track.is-in .fl-rev { animation: fl-rise var(--fl-settle) var(--fl-e-press) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.fl-rev__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fl-rev__title { margin: 0; font: 600 17px/22px var(--font-display); }
.fl-rev__txt { margin: 0; flex: 1; font-size: 15px; line-height: 22px; }
.fl-rev__by { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.fl-rev__by > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.fl-rev__by b { font: 600 14px/18px var(--font-display); }
.fl-rev__by small { font-size: 13px; line-height: 18px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-rev__by b { display: flex; align-items: center; gap: 6px; }
.fl-rev__ok { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--leaf); color: var(--on-fill); }
@media (max-width: 900px) { .fl-revs { grid-template-columns: 1fr; gap: 20px; } .fl-revs__track { grid-auto-columns: minmax(260px, 46%); } }
@media (max-width: 560px) { .fl-revs__track { grid-auto-columns: 86%; } .fl-revs__score > b { font-size: 56px; line-height: 56px; } }

/* ================= BookingSlots ================= */
.fl-slots { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fl-slots__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fl-slots__title { margin: 2px 0 0; font: 600 22px/28px var(--font-display); }
.fl-slots__price { text-align: right; }
.fl-slots__price b { display: block; font: 600 28px/32px var(--font-display); font-variant-numeric: tabular-nums; }
.fl-slots__price small { font-size: 13px; color: var(--ink-soft); }
.fl-slots__daysWrap { overflow-x: auto; margin: 0 -24px; padding: 4px 24px 8px; scrollbar-width: none; }
.fl-slots__daysWrap::-webkit-scrollbar { display: none; }
.fl-slots__days { display: flex; gap: 8px; }
.fl-day { position: relative; flex: 1 0 76px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 6px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-md); cursor: pointer; box-shadow: 0 3px 0 var(--line); transition: transform var(--fl-quick) var(--fl-e-press), border-color var(--fl-quick), background-color var(--fl-quick), box-shadow var(--fl-quick); -webkit-tap-highlight-color: transparent; }
.fl-day:hover:not(.is-full) { border-color: var(--copper); transform: translateY(-2px); box-shadow: 0 5px 0 var(--line); }
.fl-day:active:not(.is-full) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.fl-day__dow { font: 600 11px/14px var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.fl-day__date { font: 600 26px/30px var(--font-display); font-variant-numeric: tabular-nums; }
.fl-day__mon { font-size: 12px; line-height: 14px; color: var(--ink-soft); }
.fl-day__free { margin-top: 5px; font: 600 11px/14px var(--font-display); color: var(--leaf); }
.fl-day:has(input:checked) { background: var(--water); border-color: var(--water); box-shadow: 0 3px 0 var(--fl-rim-water); }
.fl-day:has(input:checked) > span, .fl-day:has(input:checked) > b { color: var(--on-fill); }
.fl-day:has(:focus-visible), .fl-slot:has(:focus-visible) { box-shadow: var(--fl-ring); }
.fl-day.is-full { cursor: not-allowed; background: var(--surface-sunk); box-shadow: none; }
.fl-day.is-full .fl-day__free { color: var(--ink-soft); }
.fl-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; min-height: 142px; align-content: start; }
.fl-slots__grid.is-in { animation: fl-rise var(--fl-settle) var(--fl-e-press) backwards; }
.fl-slot { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-md); cursor: pointer; box-shadow: 0 3px 0 var(--line); transition: transform var(--fl-quick) var(--fl-e-press), border-color var(--fl-quick), background-color var(--fl-quick), box-shadow var(--fl-quick); -webkit-tap-highlight-color: transparent; }
.fl-slot b { font: 600 16px/20px var(--font-display); font-variant-numeric: tabular-nums; }
.fl-slot small { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-slot:hover:not(.is-full) { border-color: var(--copper); }
.fl-slot:active:not(.is-full) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.fl-slot:has(input:checked) { background: var(--brass); border-color: var(--brass-deep); box-shadow: 0 3px 0 var(--brass-deep); }
.fl-slot:has(input:checked) b, .fl-slot:has(input:checked) small { color: var(--on-warm); }
.fl-slot.is-full { cursor: not-allowed; background: var(--surface-sunk); box-shadow: none; }
.fl-slot.is-full b { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.fl-slots__hint { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 140px; margin: 0; border: 1.5px dashed var(--ink-soft); border-radius: var(--radius-md); color: var(--ink-soft); font-size: 15px; }
.fl-slots__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.fl-slots__sum { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 15px; line-height: 20px; color: var(--ink-soft); }
.fl-slots__sum b { color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.fl-slots__sum > .fl-ico { color: var(--leaf); }
@media (max-width: 560px) { .fl-slots { padding: 20px 16px; } .fl-slots__daysWrap { margin: 0 -16px; padding: 4px 16px 8px; } .fl-slots__grid { grid-template-columns: 1fr 1fr; min-height: 210px; } .fl-slots__foot .fl-btn { width: 100%; } }

/* ================= Boiler art and BoilerCard ================= */
.fl-art { display: block; height: 100%; width: auto; overflow: visible; }
.fl-art__body { fill: var(--surface); stroke: var(--ink-soft); stroke-width: 2; }
.fl-art__panel { fill: var(--surface-sunk); stroke: var(--line); stroke-width: 1.5; }
.fl-art__screen { fill: #24160a; }
.fl-art__digits { fill: #f2c25f; font: 600 10px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.fl-art__knob { fill: var(--brass); stroke: var(--brass-deep); stroke-width: 1.5; }
.fl-art__flame { fill: var(--flame); }
.fl-art__line { stroke: var(--line); stroke-width: 2; stroke-linecap: round; fill: none; }
.fl-art__pipes { stroke: var(--copper); stroke-width: 5; stroke-linecap: round; fill: none; }
.fl-art__valves { stroke: var(--brass); stroke-width: 4; stroke-linecap: round; fill: none; }
.fl-art__cyl { fill: var(--surface); stroke: var(--ink-soft); stroke-width: 2; }
.fl-art__shadow { fill: var(--line); }
.fl-art--hp .fl-art__panel { fill: var(--surface-sunk); stroke: var(--ink-soft); stroke-width: 2; }
.fl-art__grille { stroke: var(--ink-soft); stroke-width: 1.6; fill: none; }
.fl-art__hub { fill: var(--brass); stroke: var(--brass-deep); stroke-width: 1.5; }
.fl-art__fins { stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; fill: none; }
.fl-art__leaf { fill: var(--leaf); }
.fl-boiler { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 20px 20px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--fl-quick) var(--fl-e-press), box-shadow var(--fl-quick), border-color var(--fl-quick); }
.fl-boiler::after { content: ""; position: absolute; z-index: -1; inset: 0 -6px -8px 0; }
.fl-boiler:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fl-boiler.is-popular { border-color: var(--brass); }
.fl-boiler.is-selected { border-color: var(--water); box-shadow: 0 0 0 3px var(--water), var(--shadow-md); }
.fl-boiler__top { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.fl-boiler__tier { font: 600 12px/16px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--copper); }
.fl-boiler__art { position: relative; display: grid; place-items: center; height: 172px; padding: 12px 0 0; border-radius: var(--radius-md); background-color: var(--surface-sunk); background-image: var(--fl-tiles); background-size: 36px 36px; overflow: hidden; }
.fl-boiler__art .fl-art { height: 158px; }
.fl-boiler__art .fl-art--hp { height: 130px; align-self: center; }
.fl-boiler__tick { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--water); color: var(--on-fill); opacity: 0; transform: scale(.4); transition: transform var(--fl-turn) var(--fl-e-stamp), opacity var(--fl-press); }
.fl-boiler.is-selected .fl-boiler__tick { opacity: 1; transform: none; }
.fl-boiler__tick.is-landing { animation: fl-tick-land var(--fl-settle) var(--fl-e-stamp) backwards; }
@keyframes fl-tick-land { from { opacity: 0; transform: scale(1.6); } }
.fl-boiler__id small { display: block; font: 600 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.fl-boiler__name { margin: 0; font: 600 22px/28px var(--font-display); letter-spacing: -.01em; }
.fl-boiler__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fl-boiler__spec { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: var(--radius-md); background: var(--surface-sunk); text-align: center; }
.fl-boiler__spec b { font: 600 15px/20px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-boiler__spec small { font-size: 12px; line-height: 16px; color: var(--ink-soft); }
.fl-boiler__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fl-boiler__list li { display: flex; gap: 8px; font-size: 14px; line-height: 20px; }
.fl-boiler__list .fl-ico { color: var(--leaf); margin-top: 2px; }
.fl-boiler__price { display: flex; flex-direction: column; margin-top: auto; padding-top: 12px; border-top: 1.5px dashed var(--line); min-height: 104px; }
.fl-boiler__amt { font: 600 40px/44px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fl-boiler__pnote { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-boiler__alt { margin-top: 4px; font: 500 14px/20px var(--font-body); color: var(--ink); }

/* ================= InstantBoilerQuote ================= */
.fl-quote { position: relative; min-width: 0; padding: 26px 32px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); color: var(--ink); }
.fl-quote__head { display: flex; flex-direction: column; gap: 22px; margin-bottom: 30px; }
.fl-quote__brandline { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.fl-quote__back { margin-bottom: 0; }
.fl-quote__meter { display: none; }
.fl-quote__stage { position: relative; }
.fl-quote__stage > .is-enter-fwd { animation: fl-step-fwd var(--fl-settle) var(--fl-e-press) backwards; }
.fl-quote__stage > .is-enter-back { animation: fl-step-back var(--fl-settle) var(--fl-e-press) backwards; }
.fl-quote__stage > .is-leaving { opacity: 0; transition: opacity 140ms var(--fl-e-exit); pointer-events: none; }
@keyframes fl-step-fwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes fl-step-back { from { opacity: 0; transform: translateX(-28px); } }
.fl-quote__title { margin: 0; font: 650 32px/38px var(--font-display); letter-spacing: -.015em; outline: none; text-wrap: balance; }
.fl-quote__hint { margin: 8px 0 0; max-width: 680px; font-size: 16px; line-height: 24px; color: var(--ink-soft); }
.fl-quote__tiles { display: grid; gap: 14px; margin-top: 26px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fl-quote__tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fl-quote__tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
.fl-qtile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; padding: 24px 12px 18px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 4px 0 var(--line); text-align: center; cursor: pointer; transition: transform var(--fl-quick) var(--fl-e-press), border-color var(--fl-quick), box-shadow var(--fl-quick), background-color var(--fl-quick); animation: fl-rise var(--fl-settle) var(--fl-e-press) backwards; animation-delay: calc(var(--i, 0) * 45ms + 60ms); -webkit-tap-highlight-color: transparent; }
.fl-qtile::after { content: ""; position: absolute; z-index: -1; inset: 0 -6px -10px 0; }
.fl-qtile:hover { border-color: var(--copper); transform: translateY(-2px); box-shadow: 0 6px 0 var(--line); }
.fl-qtile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); transition-duration: var(--fl-press); }
.fl-qtile:has(input:checked), .fl-qtile.is-picked { border-color: var(--water); background: var(--water-soft); box-shadow: 0 4px 0 var(--water); }
.fl-qtile:has(:focus-visible) { box-shadow: 0 4px 0 var(--line), var(--fl-ring); }
.fl-qtile__art { display: grid; place-items: center; height: 56px; color: var(--ink); }
.fl-picto { display: block; width: 56px; height: 56px; }
.fl-picto__ground { stroke: var(--copper); }
.fl-picto--ico { display: grid; place-items: center; color: var(--copper); }
.fl-picto--ico .fl-ico { width: 40px; height: 40px; }
.fl-picto--num { display: grid; place-items: center; width: auto; font: 650 44px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--copper); letter-spacing: -.02em; }
.fl-qtile__txt { display: flex; flex-direction: column; gap: 2px; }
.fl-qtile__txt b { font: 600 16px/20px var(--font-display); }
.fl-qtile__txt small { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-qtile__tick { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--water); color: var(--on-fill); opacity: 0; transform: scale(.4); transition: transform var(--fl-turn) var(--fl-e-stamp), opacity var(--fl-press); }
.fl-qtile:has(input:checked) .fl-qtile__tick, .fl-qtile.is-picked .fl-qtile__tick { opacity: 1; transform: none; }
.fl-quote__help { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 26px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fl-quote__help > .fl-ico { color: var(--water); }
.fl-quote__help a { font-weight: 700; }
.fl-quote__res-head { display: grid; gap: 16px; }
.fl-quote__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-quote__paybar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 24px 0 22px; padding: 12px 16px; background: var(--surface-sunk); border-radius: var(--radius-md); }
.fl-quote__vat { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-quote__vat > .fl-ico { color: var(--leaf); }
.fl-quote__boilers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.fl-quote__boilers > .fl-boiler { animation: fl-rise var(--fl-settle) var(--fl-e-press) backwards; }
.fl-quote__boilers > .fl-boiler:nth-child(2) { animation-delay: 70ms; }
.fl-quote__boilers > .fl-boiler:nth-child(3) { animation-delay: 140ms; }
.fl-quote__confirm { margin-top: 24px; padding: 24px; background: var(--water-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); scroll-margin: 96px; }
.fl-quote__confirm.is-in { animation: fl-rise var(--fl-settle) var(--fl-e-press) backwards; }
.fl-quote__confirm-in { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; }
.fl-quote__pick h3 { margin: 4px 0 4px; font: 600 24px/30px var(--font-display); }
.fl-quote__pick p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.fl-quote__form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fl-quote__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fl-quote__form > .fl-btn { align-self: flex-start; }
.fl-quote__small { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-quote__small > .fl-ico { color: var(--leaf); }
.fl-quote__done { display: flex; align-items: center; gap: 22px; }
.fl-quote__done-title { margin: 4px 0 6px; font: 600 24px/30px var(--font-display); }
.fl-quote__done p { margin: 0; color: var(--ink); max-width: 560px; }
@media (max-width: 960px) {
  .fl-quote__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fl-quote__tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-quote__boilers { grid-template-columns: 1fr; max-width: 520px; }
  .fl-quote__confirm-in { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .fl-quote { padding: 18px 16px 22px; border-radius: var(--radius-lg); }
  .fl-quote__head { gap: 14px; margin-bottom: 22px; }
  .fl-quote__steps { display: none; }
  .fl-quote__meter { display: block; }
  .fl-quote__title { font-size: 26px; line-height: 32px; }
  .fl-quote__tiles, .fl-quote__tiles--4, .fl-quote__tiles--3 { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .fl-qtile { flex-direction: row; text-align: left; gap: 14px; padding: 12px 44px 12px 14px; }
  .fl-qtile__art { width: 52px; height: 44px; flex: none; }
  .fl-picto { width: 46px; height: 46px; }
  .fl-picto--num { font-size: 34px; }
  .fl-qtile__tick { top: 50%; margin-top: -13px; right: 14px; }
  .fl-quote__vat { margin-left: 0; }
  .fl-quote__paybar .fl-seg { width: 100%; display: grid; }
  .fl-quote__fields { grid-template-columns: 1fr; }
  .fl-quote__form > .fl-btn { align-self: stretch; }
  .fl-quote__confirm { padding: 18px 16px; }
  .fl-quote__done { flex-direction: column; align-items: flex-start; }
}

/* ================= QuoteStarter ================= */
.fl-qstart { min-width: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--ink); }
.fl-qstart__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fl-qstart__time { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/16px var(--font-display); color: var(--ink-soft); }
.fl-qstart__title { margin: 10px 0 4px; font: 650 26px/32px var(--font-display); letter-spacing: -.01em; }
.fl-qstart__q { margin: 0 0 16px; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.fl-qstart__q b { color: var(--copper); font-family: var(--font-display); font-weight: 600; }
.fl-qstart__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fl-qtile--mini { gap: 6px; padding: 14px 6px 12px; border-radius: var(--radius-md); }
.fl-qtile--mini .fl-qtile__art { height: 44px; }
.fl-qtile--mini .fl-picto { width: 44px; height: 44px; }
.fl-qtile--mini .fl-qtile__txt b { font-size: 14px; line-height: 18px; }
.fl-qtile--mini .fl-qtile__tick { width: 22px; height: 22px; top: 6px; right: 6px; }
.fl-qstart__trust { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.fl-qstart__trust li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.fl-qstart__trust .fl-ico { color: var(--leaf); }
@media (max-width: 640px) {
  .fl-qstart { padding: 20px 16px; }
  .fl-qstart__tiles .fl-qtile--mini { flex-direction: column; text-align: center; padding: 12px 4px 10px; }
  .fl-qstart__tiles .fl-qtile__art { width: auto; }
  .fl-qstart__tiles .fl-qtile__tick { top: 6px; margin-top: 0; right: 6px; }
}

/* ================= AreaChecker ================= */
.fl-area { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.25fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.fl-area__side { display: flex; flex-direction: column; gap: 14px; padding: 24px; min-width: 0; }
.fl-area__title { margin: 0; font: 600 24px/30px var(--font-display); }
.fl-area__form { display: flex; align-items: flex-end; gap: 10px; }
.fl-area__form .fl-field { flex: 1; }
.fl-area__form .fl-field.is-error + .fl-btn { align-self: center; }
.fl-area__res { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); font-size: 15px; line-height: 22px; }
.fl-area__res:empty { display: none; }
.fl-area__res.is-yes { background: color-mix(in srgb, var(--leaf) 13%, var(--surface)); } .fl-area__res.is-yes > .fl-ico { color: var(--leaf); }
.fl-area__res.is-near { background: var(--water-soft); } .fl-area__res.is-near > .fl-ico { color: var(--water); }
.fl-area__res.is-no { background: color-mix(in srgb, var(--ember) 11%, var(--surface)); } .fl-area__res.is-no > .fl-ico { color: var(--ember); }
.fl-area__res.is-in { animation: fl-fall var(--fl-settle) var(--fl-e-press) backwards; }
.fl-area__res > .fl-ico { margin-top: 1px; }
.fl-area__chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fl-area__chips .fl-tag { height: 28px; padding: 0 10px; font-size: 13px; }
.fl-area__mapbox { display: grid; place-items: center; padding: 20px; background-color: var(--surface-sunk); border-left: 1px solid var(--line); }
.fl-area__map { width: 100%; max-width: 520px; height: auto; overflow: visible; }
.fl-area__pipe { fill: none; stroke: var(--copper); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.fl-area__ring { fill: var(--surface); stroke: var(--copper); stroke-width: 3; transform-box: fill-box; transform-origin: 50% 50%; transition: fill var(--fl-quick), stroke var(--fl-quick); }
.fl-area__dot { fill: var(--brass); stroke: var(--brass-deep); stroke-width: 1.5; transition: fill var(--fl-quick); }
.fl-area__lbl { fill: var(--ink); font: 600 10.5px/1 var(--font-display); letter-spacing: .04em; paint-order: stroke; stroke: var(--surface-sunk); stroke-width: 3px; }
.fl-area__node.is-hit .fl-area__ring { fill: var(--water); stroke: var(--water); animation: fl-ping var(--fl-settle) var(--fl-e-stamp) backwards; }
.fl-area__node.is-hit .fl-area__dot { fill: var(--on-fill); stroke: none; }
@keyframes fl-ping { from { transform: scale(1.9); opacity: 0; } }
@media (max-width: 760px) { .fl-area { grid-template-columns: 1fr; } .fl-area__mapbox { border-left: 0; border-top: 1px solid var(--line); padding: 16px; } .fl-area__side { padding: 20px 16px; } }

/* ================= JobTracker ================= */
.fl-track { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fl-track__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fl-track__title { margin: 2px 0 0; font: 600 22px/28px var(--font-display); }
.fl-track__eta { text-align: right; min-width: 120px; }
.fl-track__eta-n { display: block; font: 650 30px/34px var(--font-display); font-variant-numeric: tabular-nums; color: var(--water); }
.fl-track__eta-l { display: block; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-track__who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-sunk); border-radius: var(--radius-md); }
.fl-track__who > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fl-track__who b { font: 600 15px/20px var(--font-display); }
.fl-track__who small { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-track__who .fl-ibtn { margin-bottom: 3px; }
.fl-track__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fl-track__item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; min-height: 58px; padding-bottom: 14px; }
.fl-track__item:last-child { min-height: 0; padding-bottom: 0; }
.fl-track__node { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-soft); color: transparent; transition: background-color var(--fl-quick), border-color var(--fl-quick), color var(--fl-quick); }
.fl-track__item.is-done .fl-track__node { background: var(--water); border-color: var(--water); color: var(--on-fill); }
.fl-track__item.is-current .fl-track__node { background: var(--brass); border-color: var(--brass-deep); box-shadow: 0 2px 0 var(--brass-deep); }
.fl-track__item.is-current .fl-track__node::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-warm); }
.fl-track__item.is-current .fl-track__node .fl-ico { display: none; }
.fl-track__pipe { position: absolute; left: 10px; top: 30px; bottom: 2px; width: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-sunk); box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.fl-track__water { position: absolute; inset: 0; background: var(--water); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--fl-fill) var(--fl-e-water); }
.fl-track__item.is-done .fl-track__water { transform: scaleY(1); }
.fl-track__item.is-current .fl-track__water { transform: scaleY(.45); }
.fl-track__txt { display: flex; flex-direction: column; padding-top: 3px; }
.fl-track__txt b { font: 600 15px/20px var(--font-display); }
.fl-track__txt small { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-track__item:not(.is-done):not(.is-current) .fl-track__txt b { color: var(--ink-soft); font-weight: 500; }
.fl-track__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.fl-track__foot small { font-size: 13px; color: var(--ink-soft); }
.fl-track__foot .fl-btn { margin-bottom: 3px; }

/* ================= SavingsEstimator ================= */
.fl-save { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fl-save__title { margin: -8px 0 0; font: 600 22px/28px var(--font-display); }
.fl-save > div > .fl-field__label { display: block; margin-bottom: 8px; }
.fl-save__bars { display: flex; flex-direction: column; gap: 10px; }
.fl-save__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 64px; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.fl-save__row b { text-align: right; font: 600 15px/20px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.fl-save__track { height: 20px; border-radius: 5px; background: var(--surface-sunk); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.fl-save__fill { display: block; height: 100%; transform-origin: 0 50%; transition: transform var(--fl-settle) var(--fl-e-water); }
.fl-save__fill--old { background: var(--flame); }
.fl-save__fill--new { background: var(--leaf); }
.fl-save__out { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--leaf) 12%, var(--surface)); }
.fl-save__out small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-save__big { display: block; font: 650 40px/44px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--leaf); }
.fl-save__eff { max-width: 150px; text-align: right; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fl-save__small { margin: 0; font-size: 12px; line-height: 17px; color: var(--ink-soft); }