/* The homepage rewrite under review at /v2/ — staging only, linked from nothing.
 *
 * Everything here is scoped to `.v2`, so it cannot reach the live home or the client area.
 * Loaded only for the page that sets `homeV2: true` in PAGES_ALL (see the CSS() list in
 * scripts/build_site.mjs). ONE deliberate exception: the shared-footer block at the foot of
 * this file, scoped to `.v2-host ~ [data-ql-region="footer"]` — a sibling selector that can
 * only ever match on this page, because only this page renders `.v2-host`.
 *
 * Colours are the Elementor kit's own globals rather than new hex values, so the page is the
 * brand's and not a second palette: --e-global-color-primary is the purple #9108DC,
 * --e-global-color-356bd45 the pink #FF5479, --e-global-color-65e99da the navy #152F4E.
 * Fallbacks are spelled out because this stylesheet must also be readable on its own.
 *
 * NO JAVASCRIPT. The quotes scroll-snap, the steps are a grid, the clip is a <video> with
 * autoplay/muted/loop/playsinline. Nothing on this page needs a script, which is one fewer
 * thing than the live home (it loads Swiper for the same seven quotes).
 */

.v2 {
  --v2-ink: #152F4E;
  --v2-ink-2: #4a5c72;
  --v2-purple: var(--e-global-color-primary, #9108DC);
  --v2-pink: var(--e-global-color-356bd45, #FF5479);
  --v2-navy: var(--e-global-color-65e99da, #152F4E);
  --v2-line: #e4e7ee;
  --v2-card: #ffffff;
  --v2-soft: #f6f5fb;
  --v2-max: 1080px;

  color: var(--v2-ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* The one thing borrowed from Elementor is the outer container, and its flex defaults would
   lay these sections out in a row. Take the layout back. */
.v2-host { display: block !important; width: 100%; max-width: none; padding: 0; }

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

.v2-sec {
  max-width: var(--v2-max);
  margin: 0 auto;
  padding: 72px 24px;
}

/* ---------------------------------------------------------------- type
 * EVERY HEADING RULE IS `.v2 .v2-hN`, TWO CLASSES, AND THAT IS NOT TIDINESS. The Elementor kit
 * styles bare elements at `.elementor-kit-74 h1` — one class and one element, which outranks a
 * single class of ours. The first draft of this file used `.v2-h1 { color: #fff }` and the hero
 * headline rendered in the kit's near-black, white-on-white-adjacent over a dark photo and all
 * but invisible. Anything here that sets a property the kit also sets needs the second class.
 */
.v2 .v2-h1 {
  font-size: clamp(32px, 5.4vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 18px;
  color: #fff;
}
.v2 .v2-h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 750;
  margin: 0 0 12px;
  color: var(--v2-navy);
}
.v2 .v2-h2-quiet { color: inherit; }
.v2 .v2-h3 { font-size: 20px; line-height: 1.3; font-weight: 700; margin: 0 0 6px; color: var(--v2-navy); }
.v2 .v2-h4 { font-size: 17px; line-height: 1.3; font-weight: 700; margin: 0 0 6px; color: var(--v2-navy); }

.v2-prose p { margin: 0 0 12px; color: var(--v2-ink-2); }
.v2-prose p:last-child { margin-bottom: 0; }
.v2-prose strong { color: var(--v2-ink); font-weight: 700; }
.v2-prose a { color: var(--v2-purple); text-decoration: underline; text-underline-offset: 2px; }

.v2-lead { font-size: 19px; max-width: 62ch; }
.v2-lead p { color: var(--v2-ink-2); }
.v2-small { font-size: 15px; }

/* ---------------------------------------------------------------- CTA */
.v2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.v2-cta {
  display: inline-block;
  background: var(--v2-purple);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  padding: 17px 30px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(145, 8, 220, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.v2-cta:hover, .v2-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(145, 8, 220, .34);
}
.v2-cta-note { font-size: 15px; color: var(--v2-ink-2); }

/* ---------------------------------------------------------------- hero
   THE PHOTOGRAPH MOVED OUT OF CSS AND INTO THE MARKUP (September 2026). It used to be a
   `background: url(...)` here, which meant one file at every width, no fetchpriority, and a
   411 KB download on a phone. It is now a <picture> in home-v2.html with six widths in
   AVIF/WebP/JPEG; see the comment there. What is left below is the colour underneath it (still
   needed: it shows for the instant before the image paints, and forever if it 404s) and the
   rules that make the <img> behave like the background it replaces.

   The colour is the photograph's own sky, sampled, so the swap is invisible.

   THE CASTLE CANNOT FIT, AND THAT IS ARITHMETIC. This frame is 16:9 and the castle fills 74%
   of its height; a 1920x670 hero is 2.87:1 and can only show 62% of any image's height. Every
   castle photograph in the WordPress library is framed at least that tightly, so at desktop
   widths the castle is always cut somewhere - the only choice is where. `50% 34%` was picked by
   simulating this exact crop at 1920x670, 1440x558 and 390x470: it keeps the spire clear of the
   top edge and cuts low, below the topiary, where the eye reads it as a vista rather than as a
   mistake. Narrow screens crop horizontally instead of vertically and show the castle whole. */
.v2-hero {
  position: relative;
  overflow: hidden;
  background: #35506e;
  padding: 0 24px;
  min-height: 62vh;
  display: flex;
  align-items: center;
}
.v2-hero > picture { position: absolute; inset: 0; z-index: 0; }
/* `.v2 .v2-hero-img`, TWO CLASSES, FOR THE SAME REASON THE HEADINGS ABOVE NEED TWO — and this
   one shipped broken for a week because the rule was written with one.
   `01-elementor-frontend.css` carries `.elementor img { height: auto }` at (0,1,1), and
   `12-hello.css` carries a bare `img { height: auto }` at (0,0,1). A single `.v2-hero-img` is
   (0,1,0) and LOSES to the first of them, so `height: 100%` never applied and the <img> fell
   back to its intrinsic 16:9 box. Measured on the live site, 4 September 2026: at 390x844 the
   hero was 577px tall and the photograph 219px of it — coverage 0.38, the rest flat #35506e
   under the scrim, which is what Pol saw. `object-fit` and `object-position` were both applied
   and both inert, because a box already at the image's own ratio has nothing to crop.
   Desktop hid it: at 1440 the intrinsic height is 810px in a 558px section, so it overflowed
   and `overflow: hidden` clipped it — a cover fit by accident, anchored at the TOP, i.e. an
   effective `50% 0%` rather than the `50% 34%` written here. See
   docs/hero-mobile-fill-2026-09-04.md. */
.v2 .v2-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}
/* AT PHONE WIDTHS THE <picture> HANDS OVER A DIFFERENT FRAME, so it needs a different anchor.
   home-v2.html serves a 3:4 crop below 481px (see the note there and in the CREDITS file); this
   breakpoint must stay in step with that `media` attribute or the anchor lands on the wrong
   photograph. 34% was chosen for the 16:9 frame in a letterbox hero and is wrong here: the
   spire tip is 8.6% down the crop (measured), and 34% of the vertical overflow at the widest box
   in this band - 480x513, which discards 20% of the crop's height - would cut 6.7% off the top
   and leave under two percent of clear sky above the spire. 10% cuts 2.0% instead. It is the
   robustness that matters more than the framing: the hero's height is content-driven below
   560px, so a shorter headline in another language makes the box wider in aspect and the cut
   deeper, and at this anchor the castle still cannot be decapitated by a translation. */
@media (max-width: 480px) {
  .v2 .v2-hero-img { object-position: 50% 10%; }
}
/* THE SCRIM IS MEASURED, NOT EYEBALLED, AND THERE ARE TWO OF THEM.
 *
 * Three review rounds now (Pol: 26 August 2026 twice, 4 September 2026 "a bit less dark"). The
 * answer in August was that no scrim tuning fixes a NIGHT photograph; this one is broad
 * daylight, so the wash can be light AND the copy can still pass WCAG - but only if it is aimed
 * at where the copy actually is.
 *
 * WHAT CHANGED ON 4 SEPTEMBER, AND WHY IT IS NOT SIMPLY "LIGHTER". The table this comment used
 * to carry was produced by a MODEL of the hero - a sharp composite over rectangles computed from
 * the layout rather than read from it - and the model was wrong in the direction that matters.
 * It capped the lead's rectangle at 640px on wide layouts; the rendered lead is 766px at 1440
 * and runs to 71% of the viewport at 1024, well past where the old horizontal wash had faded to
 * nothing. Re-measured in Chrome, on the rendered page, over the text's real per-line extents,
 * the scrim that comment described as passing was in fact failing at five of eight widths:
 *
 *      width           360   390   768  1024  1152  1280  1440  1920
 *      h1  before     5.94  5.90  5.81  3.94  2.98! 3.94  4.13  4.09    (needs 3.0)
 *      h1  after      4.07  4.05  4.50  4.27  4.15  4.74  5.07  4.96
 *      lead before    4.99  4.92  4.99  2.64! 3.23! 3.62! 4.45! 5.22    (needs 4.5)
 *      lead after     5.57  5.67  5.61  5.63  5.68  4.90  5.04  4.92
 *
 * So "less dark" had to be paid for out of headroom rather than taken off the top, and there was
 * plenty of headroom - just not where the ink was. Two structural changes, both of which make
 * the hero lighter where a reader perceives darkness and firmer where the text needs it:
 *
 * 1. THE VERTICAL RAMP WAS UPSIDE DOWN. It ran .50 at the top to .38 at the bottom - darkest
 *    over the sky, lightest over the crowd. But at 390px the h1 occupies 12-31% of the hero and
 *    scored 5.90 against a threshold of 3.0, while the lead occupies 34-68% and scored 4.92
 *    against 4.5. All of the slack was at the top and all of the risk below it. The ramp now
 *    opens at .22, reaching full density by the top of the lead. That is what actually answers
 *    the review: the sky and the top of the spire come out from under the veil.
 *
 * 2. THE HORIZONTAL WASH STARTED 176px TOO EARLY. It exists to leave the right of the frame
 *    alone while darkening a left-hand column - but at 1024 the 1080px column is 95% of the
 *    viewport, so there is no left-hand column and the wash was fading out underneath the text.
 *    It now starts at 1200px, and below that the even veil (which passes) applies. The left edge
 *    also comes down from a combined .865 to .544, because the far left is the single darkest
 *    part of the old hero and nothing is written there.
 *
 * The base rule below is the SAFE one and applies everywhere; the min-width rule swaps in the
 * horizontal wash. Getting the order this way round matters: if the media query is ever lost,
 * what is left is the version that passes, not the version that fails.
 *
 * Every figure above is a WORST pixel - the brightest point anywhere under a line of type, with
 * the copy hidden and the backdrop photographed. Mean contrast over the copy is around 10:1, so
 * these are a cloud edge behind two or three glyphs, not a dim hero. The harness that produced
 * them is described in docs/hero-mobile-fill-2026-09-04.md; re-measure with it before changing
 * a number here, because the previous model disagreed with the browser by up to 2.2 points.
 *
 * The headline keeps its text-shadow. Contrast does not ride on it - every number above is
 * without it - but it is what keeps a thin glyph legible against a cloud edge. */
.v2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 12, 22, .22) 0%, rgba(8, 12, 22, .38) 20%, rgba(8, 12, 22, .50) 34%, rgba(8, 12, 22, .52) 70%, rgba(8, 12, 22, .44) 100%),
    linear-gradient(100deg, rgba(8, 12, 22, .28) 0%, rgba(8, 12, 22, .18) 100%);
}
@media (min-width: 1200px) {
  .v2-hero::before {
    background:
      linear-gradient(90deg, rgba(8, 12, 22, .40) 0%, rgba(8, 12, 22, .46) 40%, rgba(8, 12, 22, .48) 70%, rgba(8, 12, 22, .20) 88%, rgba(8, 12, 22, 0) 100%),
      linear-gradient(100deg, rgba(8, 12, 22, .24) 0%, rgba(8, 12, 22, .24) 55%, rgba(8, 12, 22, .06) 100%);
  }
}
.v2 .v2-h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.v2-hero-in {
  position: relative;
  z-index: 2;
  max-width: var(--v2-max);
  width: 100%;
  margin: 0 auto;
  padding: 96px 0;
}
/* THE HERO'S TEXT IS OPAQUE WHITE, AND THAT IS AN ACCESSIBILITY FIX, NOT A STYLE PREFERENCE.
 *
 * These two were `rgba(255, 255, 255, .90)` and `.78`. Over a photograph that is not a style
 * choice with a contrast cost, it is only a contrast cost: a translucent glyph composites over
 * its own backdrop, so the darker the photo behind it the dimmer the letter gets, and the scrim
 * table above - which measures the BACKDROP against white - overstates both of them.
 *
 * Measured with each element composited at its real opacity, against the scrim as it now ships:
 *
 *      width                    360   390   768  1024  1152  1280  1440  1920
 *      lead at .90             4.88  4.96  4.92  4.93  4.97  4.33! 4.45! 4.35!   (needs 4.5)
 *      lead at #fff            5.57  5.67  5.61  5.63  5.68  4.90  5.04  4.92
 *      cta-note at .78         3.83! 3.85! 4.39! 4.30! 4.25! 3.74! 3.85! 3.72!   (needs 4.5)
 *      cta-note at #fff        5.10  5.14  5.97  5.83  5.75  4.96  5.13  4.93
 *
 * The note failed at every width and had done since it shipped; the lead failed at the three
 * widest. .94 on the note was tried and clears 4.5 by 0.06, which is not a margin. Opaque white
 * clears it by at least 0.43 at every width.
 *
 * The note keeps its place in the hierarchy through SIZE - 15px against the lead's 20px, beside
 * a filled purple button - which costs a reader nothing. Opacity was doing that job by making
 * the text harder to see, which is the one way of expressing hierarchy that has a victim. */
.v2-hero .v2-prose p { color: #fff; }
.v2-hero .v2-lead { max-width: 56ch; font-size: 20px; }
.v2-hero .v2-cta-note { color: #fff; }

/* ---------------------------------------------------------------- steps */
.v2-steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.v2-step {
  background: var(--v2-card);
  border: 1px solid var(--v2-line);
  border-radius: 18px;
  padding: 24px 22px 22px;
  position: relative;
}
.v2-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--v2-purple);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 14px;
}

/* -------------------------------------------------------- emphasis band
   Used twice: the delegation promise and the close. Same treatment on purpose — they are the
   same idea said at the start and at the end, and giving the close a different skin would read
   as a second, competing offer. */
.v2-band {
  background: linear-gradient(120deg, var(--v2-navy) 0%, #23124a 62%, #3d1063 100%);
  color: #fff;
  padding: 64px 24px;
}
.v2-band-in { max-width: 760px; margin: 0 auto; }
.v2-band .v2-prose p { color: rgba(255, 255, 255, .88); }
.v2-band .v2-prose strong { color: #fff; }
.v2 .v2-band .v2-h2 { color: #fff; }
.v2-cierre { text-align: center; }
.v2-cierre .v2-actions { justify-content: center; }

/* ------------------------------------------------------------------ app */
.v2-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 52px;
  align-items: center;
}
.v2-feats { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.v2-feat { padding-left: 18px; border-left: 3px solid var(--v2-pink); }

.v2-phone-wrap { margin: 0; }
.v2-phone {
  background: #10131a;
  border-radius: 42px;
  padding: 11px;
  box-shadow: 0 26px 60px rgba(16, 22, 40, .30), 0 2px 0 rgba(255, 255, 255, .12) inset;
  max-width: 320px;
  margin: 0 auto;
}
/* The poster is behind the video as well as on it. That is what makes the reduced-motion rule
   at the foot of this file work with no script: hiding the <video> uncovers the same image the
   clip opens on, so the phone still shows the product instead of an empty rounded rectangle. */
.v2-phone-screen {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background: #f6f6f8 url("../media/app-demo-poster.jpg") center top / cover no-repeat;
  aspect-ratio: 390 / 844;
}
.v2-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-caption {
  margin: 16px auto 0;
  max-width: 320px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--v2-ink-2);
  text-align: center;
}

/* ---------------------------------------------------------- method cards */
.v2-grid4 {
  margin-top: 34px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.v2-card {
  background: var(--v2-soft);
  border: 1px solid var(--v2-line);
  border-radius: 16px;
  padding: 22px 20px;
}
.v2-card .v2-prose p { font-size: 15.5px; }

/* ------------------------------------------------------------ free tier
   Two cards, same skin as the method cards: the free tier is part of how the product works,
   not a second offer competing with the CTA. No price anywhere on this page (see the template
   head comment). */
.v2-grid2 {
  margin-top: 30px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ------------------------------------------------------------- opiniones */
.v2-quotes {
  margin-top: 28px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 300px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.v2-quote {
  scroll-snap-align: start;
  margin: 0;
  background: var(--v2-card);
  border: 1px solid var(--v2-line);
  border-radius: 16px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.v2-quote blockquote { margin: 0; }
.v2-quote .v2-prose p { font-size: 15.5px; color: var(--v2-ink); }
.v2-quote figcaption {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--v2-purple);
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .v2-app { grid-template-columns: 1fr; gap: 34px; }
  .v2-phone-wrap { order: -1; }
  .v2-precio { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .v2 { font-size: 16.5px; }
  .v2-sec { padding: 52px 18px; }
  .v2-hero { padding: 0 18px; min-height: 0; }
  .v2-hero-in { padding: 72px 0; }
  .v2-band { padding: 48px 18px; }
  .v2-lead, .v2-hero .v2-lead { font-size: 17.5px; }
}

/* A clip that plays itself is motion the reader did not ask for, and this page carries no
   script to pause one. So the video is REMOVED rather than merely calmed: the poster painted
   on .v2-phone-screen above is underneath it and takes its place, at the same size, showing the
   same thing. A reader who has asked for less motion gets a still of the app, not a hole. */
@media (prefers-reduced-motion: reduce) {
  .v2-video { display: none; }
  .v2-cta { transition: none; }
  .v2-cta:hover, .v2-cta:focus-visible { transform: none; }
}

/* ========================================================================================
 * THE SHARED FOOTER, ON THIS PAGE ONLY
 *
 * The footer markup is production's (_footer.html) and its Elementor rules in chrome.css keep
 * the desktop three-column row (20% logo / 50% spacer / 30% menu) at EVERY width, with
 * min-height:7vh and margin-bottom:-10% on the outer container. Without production's full
 * responsive CSS that renders, measured 26 August 2026 at 390px: a ~600px flat pink block, the
 * menu links crammed unreadably into the top-right corner, no visible logo, and the disclaimer
 * overflowing BELOW the band onto white at one word per line — Pol's review: "broken footer".
 * chrome.css line ~94 records the footer was known-broken and "another change is in flight
 * there"; this is that change, for the review page.
 *
 * Scoped by SIBLING: `.v2-host ~ [data-ql-region="footer"]` can only match on the one page
 * that renders `.v2-host`, so the other pages' footers are untouched even though this file
 * styles shared markup. When v2 wins the review, this block is the footer treatment to move
 * into chrome.css (dropping the .v2-host guard) — see themeparks#134 for the live home's own
 * footer defects.
 *
 * Navy, not production pink, for the same reason the client area chose navy (97-client-area.css,
 * Pol, August 2026): a hot-pink band is the loudest thing on the page and competes with every
 * CTA. This page's bands are already navy-to-purple; the footer joins them.
 *
 * `body .elementor` prefixes: chrome.css sets the pink background and the flex vars at
 * (0,4,0)-and-up specificity, so a bare sibling selector loses. The var overrides (--display,
 * --margin-*) matter as much as the properties — Elementor's e-con rules consume the vars.
 */
body .elementor .v2-host ~ .elementor-element[data-ql-region="footer"] {
  --display: block;
  --margin-top: 0%;
  --margin-bottom: 0%;
  --margin-left: 0%;
  --margin-right: 0%;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 40px 24px 30px;
  background-color: var(--e-global-color-65e99da, #152f4e);
}
body .elementor .v2-host ~ [data-ql-region="footer"] > .e-con-inner {
  --display: flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}
/* The three Elementor columns become content-sized rows; the middle one is an empty spacer
   that only existed to push the desktop columns apart. */
body .elementor .v2-host ~ [data-ql-region="footer"] .elementor-element-01fee65,
body .elementor .v2-host ~ [data-ql-region="footer"] .elementor-element-fe636df {
  --width: 100%;
  width: 100%;
  max-width: 100%;
  align-items: center;
}
body .elementor .v2-host ~ [data-ql-region="footer"] .elementor-element-5827b80 { display: none; }
/* The logo is an 800px-tall white PNG that chrome.css sizes as width:25%/height:100% of an
   unsized flex column — the main source of the giant empty band. A small mark instead. */
body .elementor .v2-host ~ [data-ql-region="footer"] .elementor-element-5d1ef96 img,
body .elementor .v2-host ~ [data-ql-region="footer"] .elementor-element-5d1ef96 img[srcset] {
  width: 72px;
  height: auto;
  opacity: .63;
}
/* The menu widget: chrome.css hands it half the column via --container-widget-width, which
   left it 171px wide and anchored at the page's midline (measured 26 August 2026). Full
   width, so the centring below actually centres on the page. */
body .elementor .v2-host ~ [data-ql-region="footer"] .elementor-widget-navigation-menu {
  --container-widget-width: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
/* The menu: a centred row that wraps, readable on navy. */
body .elementor .v2-host ~ [data-ql-region="footer"] .hfe-nav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 10px;
  margin: 0;
  padding: 0;
}
body .elementor .v2-host ~ [data-ql-region="footer"] .hfe-nav-menu li.menu-item { width: auto; }
body .elementor .v2-host ~ [data-ql-region="footer"] .hfe-nav-menu a.hfe-menu-item {
  display: block;
  padding: 8px 10px;
  color: rgba(255, 255, 255, .92);
  font-size: 14.5px;
  line-height: 1.3;
}
body .elementor .v2-host ~ [data-ql-region="footer"] .hfe-nav-menu a.hfe-menu-item:hover,
body .elementor .v2-host ~ [data-ql-region="footer"] .hfe-nav-menu a.hfe-menu-item:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The disclaimer stays inside the band, one readable paragraph. width:100% because it is a
   flex item of the same column that narrowed the menu widget; max-width keeps the line
   length sane on desktop. */
body .elementor .v2-host ~ [data-ql-region="footer"] .footer-disclaimer {
  width: 100%;
  max-width: 640px;
  margin: 4px auto 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
  text-align: center;
}