/* ===========================================================================
   forms.css — real lead-capture forms for the clone.

   Owned by the FORMS lane (see FORMS-LANE.md). Linked only from the pages that
   carry a form, so it never touches site.css while another session is editing
   it. Folds into site.css at the merge.

   Deliberately plain: the markup is a semantic <form> with no vendor script and
   no recognisable third-party DOM. That is the whole anti-spam premise — bots
   fingerprint known embeds (HubSpot, Typeform, Wix) and attack what they
   recognise. Nothing here announces a vendor.

   Contrast follows the site rule for light surfaces: --line is 3:1 against
   white for borders, --ink-2 is 4.5:1+ for helper text. No pale grey on white.
   ========================================================================= */

/* Error text needs a darker red than UI Red -------------------------------
   MEASURED, 2026-08-19. UI Red #ff3a42 as TEXT measures 3.54:1 on white and
   3.24:1 on a --surface panel. That clears the 3:1 floor for UI components and
   large text, but validation messages are small body text and need 4.5:1.
   Error copy is the last thing on a form that should be hard to read.

   --red-text exists ONLY to carry small red text on light surfaces. It is not a
   new brand colour and must not be used for buttons, bars, eyebrows, icons or
   accents — those stay UI Red, which is what the site rule governs. Field
   borders and focus rings also stay UI Red, correctly: they are UI components
   at the 3:1 floor, not text.

   Measured: #c81e25 = 5.72:1 on #fff, 5.25:1 on #f4f5f7. Chose it over the
   lightest passing shade (#d32029, 4.80 on surface) because the site rule says
   take the darker option when a shade is borderline. */
.lgform, .lgdone { --red-text: #c81e25; }


/* ---- /contact-us lede ----------------------------------------------------
   Live's contact lede is a LIGHT section: copy and form share the left column,
   the office photo is a rounded card on the right. The clone had been rendering
   it as the dark full-bleed photo hero, which is a different page entirely. */
.contactlede { background: var(--page); }

.cform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
@media (max-width: 980px) {
  .cform { grid-template-columns: 1fr; }
}

.cform__copy h1 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.03;
  letter-spacing: -.025em;
  margin: 0 0 1.1rem;
}

.cform__intro {
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
  max-width: 52ch;
}

.cform__rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.9rem 0 2.1rem;
}

/* The photo is natively 1134x2016 — portrait already — so it keeps its own
   aspect ratio. No object-fit crop: the site rule forbids forcing an image into
   a shape it does not have, and here it does not need one. */
.cform__media {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.cform__media img { display: block; width: 100%; height: auto; }

@media (max-width: 980px) {
  .cform__media { order: -1; margin-bottom: 1rem; }
}


/* ---- The form ------------------------------------------------------------ */
.lgform { display: grid; gap: 1.05rem; }

.lgform__row {
  display: grid;
  gap: 1.05rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 560px) {
  .lgform__row { grid-template-columns: 1fr; }
}

.lgfield { display: grid; gap: .38rem; }
.lgfield[hidden] { display: none; }

/* Country is visibly narrower than the rest on live. */
.lgfield--narrow { max-width: 15rem; }

/* Labels are sentence case on live, not the uppercase display treatment the
   Book a Meeting form in site.css uses. */
.lgfield__label {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: .8rem;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}

.lgfield__req { color: var(--red-text); margin-left: .1em; }

/* Pill inputs, matching live. The textarea keeps a softer radius because a
   full pill on a multi-line box eats the corners of the text. */
.lgfield__input,
.lgfield__select,
.lgfield__textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  font-family: var(--font-text);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .72rem 1.1rem;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.lgfield__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  background-size: 10px 6px;
  cursor: pointer;
}

.lgfield__textarea {
  min-height: 7rem;
  border-radius: 1.5rem;
  resize: vertical;
  line-height: 1.5;
}

.lgfield__input::placeholder,
.lgfield__textarea::placeholder { color: var(--ink-3); }

.lgfield__input:hover,
.lgfield__select:hover,
.lgfield__textarea:hover { border-color: var(--ink-3); }

.lgfield__input:focus-visible,
.lgfield__select:focus-visible,
.lgfield__textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}

/* Invalid state. Applied by forms.js on blur/submit, not by :invalid, so a
   field the user has not reached yet is never marked red. */
.lgfield--bad .lgfield__input,
.lgfield--bad .lgfield__select,
.lgfield--bad .lgfield__textarea {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-line);
}

.lgfield__msg { margin: 0; }
.lgfield__msg[hidden] { display: none; }


/* ---- Consent -------------------------------------------------------------
   Real <input type=checkbox> so it stays keyboard operable and is announced
   correctly. Only the box size and accent colour are styled. */
.lgconsent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  margin-top: .3rem;
}

.lgconsent__box {
  width: 1.1rem;
  height: 1.1rem;
  margin: .1rem 0 0;
  accent-color: var(--red);
  flex: none;
}
.lgconsent__box:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.lgconsent__text a { color: var(--ink); text-decoration: underline; }
.lgconsent__text a:hover { color: var(--red-text); }
.lgconsent .lgfield__msg { grid-column: 1 / -1; }


/* ---- Fine print ---------------------------------------------------------- */
.lgform__fine { margin: 0; }
.lgform__fine a { color: var(--ink); text-decoration: underline; }
.lgform__fine a:hover { color: var(--red-text); }
.lgform__fine--em { font-style: italic; }


/* ---- Honeypot ------------------------------------------------------------
   A field only a bot fills. It must be reachable in the DOM (bots read the DOM,
   not the pixels) but invisible and unreachable for a human, including by
   keyboard and by screen reader. `display:none` is what naive bots check for,
   so this is positioned off-canvas instead. */
.lgpot {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ---- Submit + status ----------------------------------------------------- */
.lgform__send { justify-self: start; margin-top: .5rem; }
.lgform__send[disabled] { opacity: .55; cursor: not-allowed; }
.lgform__send[disabled]:hover { animation: none; }

.lgform__note {
  margin: 0;
  padding: .75rem .95rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
}
.lgform__note[hidden] { display: none; }
.lgform__note--warn { border-color: var(--red-line); background: var(--red-tint); }
.lgform__note--ok { border-color: rgba(31,157,85,.35); background: #eefaf2; }

/* Turnstile renders its own iframe. It sits in the same slot live gives its
   captcha, so the layout matches even though the mechanism differs. */
.lgform__check { min-height: 0; }
.lgform__check:not(:empty) { margin-top: .3rem; }


/* ---- Success panel -------------------------------------------------------
   Replaces the form in place on success, so there is no invented thank-you URL
   until we know live's real success slugs. */
.lgdone {
  display: grid;
  gap: .8rem;
  padding: 1.6rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.lgdone h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}


/* ---- Did-you-mean hint ---------------------------------------------------
   Not an error: the address may well be correct, so this is ink-coloured rather
   than red, and offers a button instead of blocking submission. */
.lgfield__hintbtn {
  font: inherit;
  font-weight: 700;
  color: var(--red-text);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
}
.lgfield__hintbtn:hover { color: var(--ink); }
.lgfield__hintbtn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }


/* ---- Specificity: form text that site.css would otherwise capture --------
   MEASURED BUG, 2026-08-19. site.css:479 carries

       .hero p { color: rgba(255,255,255,.92); font-size: clamp(1.05rem,1.15vw,1.3rem); }

   at (0,1,1), which beat a bare .lgform__fine at (0,1,0). When the form sat in
   the dark hero the result was white 20.8px text on a near-white panel at a
   contrast ratio of 1.09 — invisible, and precisely the light-surface failure
   the site rule exists to prevent. A screenshot would not have shown it; the
   computed-style probe did.

   The lede is a light section now so .hero p no longer reaches it, but every
   <p> role inside a form stays pinned at (0,2,0) anyway. This file is meant to
   be reusable on pages whose lede IS a hero, and site.css also carries a global
   `p { max-width: 66ch }` that would otherwise re-narrow the fine print. */
.lgform .lgform__fine,
.lgdone .lgform__fine {
  color: var(--ink-2);
  font-size: .84rem;
  line-height: 1.6;
  max-width: 58ch;
}

.lgform .lgfield__msg {
  color: var(--red-text);
  font-size: .84rem;
  line-height: 1.5;
}

.lgform .lgfield__hint {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

.lgform .lgform__note {
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.55;
}
.lgform .lgform__note--warn { color: var(--red-text); }
.lgform .lgform__note--ok { color: #14663a; }

.lgform .lgconsent__text {
  color: var(--ink-2);
  font-size: .88rem;
  line-height: 1.5;
  margin: 0;
}

.lgdone p { color: var(--ink-2); font-size: 1rem; line-height: 1.6; margin: 0; }


/* Select chevron, drawn inline so there is no icon font or sprite to go
   missing. Stroke is --ink so it clears contrast on the white field. */
.lgfield__select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23101114' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }


/* ---- Checkbox group (Get a Quote's nine product lines) -------------------
   A real <fieldset>/<legend> so a screen reader announces it as one question
   rather than nine unrelated checkboxes. */
.lgcheckset { border: 0; padding: 0; margin: 0; display: grid; gap: .55rem; }
.lgcheckset legend { padding: 0; margin-bottom: .1rem; }

.lgcheckset__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem 1.1rem;
}
@media (max-width: 560px) { .lgcheckset__grid { grid-template-columns: 1fr; } }

.lgcheck {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem;
  align-items: center;
  font-size: .9rem;
  line-height: 1.35;
  color: var(--ink-2);
  cursor: pointer;
}
.lgcheck:hover { color: var(--ink); }

.lgcheck__box {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--red);
  flex: none;
}
.lgcheck__box:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }


/* ---- /estimator-tool -----------------------------------------------------
   The tool itself is a framed third-party document (see tools/estimator_page.py
   for why it is still framed on launch day). Everything around it is ours, and
   the frame is sized so it reads as a section of the page rather than a boxed
   widget: full container width, generous height, its own surface and border. */
.estlede { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.estlede__copy h1 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.03;
  letter-spacing: -.025em;
  margin: 0 0 1.1rem;
}
.estlede__intro {
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}

.esthost__frame {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  /* The tool is a wizard, not a fixed-ratio embed: too short and its accordion
     scrolls inside a small box, which is what makes an embed feel like an
     embed. Tall enough that the whole step fits. */
  height: clamp(720px, 78vh, 1100px);
}
.esthost__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.esthost__note {
  margin: 1rem 0 0;
  font-size: .92rem;
  color: var(--ink-2);
}
.esthost__note a { color: var(--ink); text-decoration: underline; }
.esthost__note a:hover { color: #c81e25; }

@media (max-width: 700px) {
  .esthost__frame { height: clamp(640px, 86vh, 900px); }
}


/* ---- /set-up-meeting -----------------------------------------------------
   Single column like live: red kicker, big black title, a rule, two
   paragraphs, then the short cascade. The calendar arrives below the form in
   its own block when Send passes validation (forms.js + scheduler-map.js). */
.mlede h1 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.0;
  letter-spacing: -.02em;
  margin: 0 0 1.2rem;
}
.mlede__rule { border: 0; border-top: 1px solid var(--ink); margin: 0 0 2rem; }
.mlede__p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.65; max-width: 90ch; margin: 0 0 1rem; }
.mlede__p--bold { font-weight: 700; color: var(--ink); }

.lgform--meeting { margin-top: 1.6rem; max-width: 34rem; }

.mcal { margin-top: 2.2rem; }
.mcal__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 .9rem;
}
.mcal__frame {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  height: 760px;
}
.mcal__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- EN / FR switch on the manuals pages -------------------------------- */
.langbar { display: flex; gap: .4rem; align-items: center; margin: 1.2rem 0 0; }
.langbar__link {
  font-family: var(--font-text); font-weight: 700; font-size: .9rem;
  color: var(--ink-2); text-decoration: none;
  padding: .45rem 1rem; border: 1px solid var(--line); border-radius: var(--r-pill);
}
.langbar__link:hover { color: var(--ink); border-color: var(--ink-3); }
.langbar__link--on { color: #fff; background: var(--ink); border-color: var(--ink); }




/* ===========================================================================
   Blog article sidebar + case-study e-book modal
   ---------------------------------------------------------------------------
   The article grid (.artgrid in blog.css) is one 60rem reading column with a
   `minmax(--gutter, 1fr)` track on each side. At 1878px the right track is
   about 459px and empty, which is where live puts its sidebar. The aside is
   placed on that track, so the reading measure is untouched. Below 1400px the
   track is too narrow to hold it, so it drops under the article instead.
   ========================================================================= */
.artaside {
  display: grid;
  gap: 1.5rem;
  font-family: var(--font-text);
}

/* ---- category legend ---- */
.artaside__box {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .35rem .25rem;
  background: #fff;
}
.artaside__cats { list-style: none; margin: 0; padding: 0; }
.artaside__cat + .artaside__cat { border-top: 1px solid var(--line-soft); }
.artaside__cat a {
  display: block;
  padding: .62rem .85rem;
  font-size: .9rem;
  line-height: 1.3;
  color: var(--ink-2);
  text-decoration: none;
}
.artaside__cat a:hover { color: var(--ink); background: var(--surface); }
.artaside__n { color: var(--ink-3); }

/* ---- three recent posts ---- */
.artaside__posts { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.artaside__post a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .85rem;
  align-items: start;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  text-decoration: none;
}
.artaside__post a:hover { border-color: var(--ink-3); }
.artaside__ptext { display: grid; gap: .35rem; min-width: 0; }
.artaside__ptitle {
  font-size: .85rem;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.artaside__pdate { font-size: .78rem; color: var(--ink-3); }
.artaside__pthumb img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
}

/* ---- red download card ----
   Cover image sized to the card, not to its own pixel size: at 1360x983 the
   raw file would swamp a 19rem column. */
.ebookcard {
  background: var(--red);
  border-radius: var(--r);
  padding: 1.35rem 1.35rem 1.5rem;
  text-align: center;
  color: #fff;
}
.ebookcard__cover {
  display: block;
  width: min(15rem, 92%);
  height: auto;
  margin: 0 auto .9rem;
}
/* The wording is capped to the SAME width as the cover above it, so the text
   block and the picture share both edges. It used to run 256px wide under a
   176px picture, which read as two things that missed each other. */
.ebookcard__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.28;
  letter-spacing: .01em;
  text-transform: uppercase;
  width: min(15rem, 92%);
  margin: 0 auto 1.05rem;
  color: #fff;
}
.ebookcard__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .88rem;
  color: var(--red);
  background: #fff;
  border: 0;
  border-radius: var(--r-pill);
  padding: .62rem 1.5rem;
  cursor: pointer;
}
.ebookcard__btn:hover { background: #fff5f5; }
.ebookcard__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- the modal ---- */
.ebmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.ebmodal[hidden] { display: none; }
.ebmodal__scrim { position: absolute; inset: 0; background: rgba(13, 13, 13, .62); }
.ebmodal__panel {
  position: relative;
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: #fff;
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.ebmodal__x {
  position: absolute;
  top: .5rem; right: .7rem;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: .25rem .4rem;
  cursor: pointer;
}
.ebmodal__x:hover { color: var(--ink); }
.ebmodal__x:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ebmodal__h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 .8rem;
}
.ebmodal__intro {
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 1.4rem;
}

/* ---- multi-step form: /warranty-service-and-repair ------------------------
   Live runs warranty as three steps; the user's spec fixes the layout. One
   step visible at a time, a counted progress bar under the fields, and the two
   nav buttons pushed to opposite ends of the form. */
.lgstep { display: grid; gap: 1.05rem; }
.lgstep[hidden] { display: none; }

/* the counter is the accessible part; the bar is decoration */
.lgprog { margin-top: .35rem; }
.lgprog__count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.lgprog__track {
  height: 10px;
  width: 100%;
  background: #e3e5e9;          /* light grey remainder */
  border-radius: 999px;
  overflow: hidden;
}
.lgprog__fill {
  display: block;
  height: 100%;
  background: #4a4f57;          /* dark grey filled portion */
  border-radius: 999px;
}

/* Previous far left, Next / Submit far right, both the same size. */
.lgnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: .9rem;
}
.lgnav__spacer { display: block; }   /* holds Next on the right in step one */
.lgnav__btn {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  background: #4a4f57;
  border: 0;
  border-radius: var(--r-sm);
  padding: .72rem 2.1rem;
  min-width: 9.5rem;
  cursor: pointer;
  text-align: center;
}
.lgnav__btn:hover { background: #35393f; }
.lgnav__btn:focus-visible { outline: 3px solid var(--red-ui, #ff3a42); outline-offset: 2px; }

/* The phone field carries a country prefix on the left, as live does. It is a
   presentational prefix, not a second control: the value posted is whatever is
   typed in the input beside it. */
.lgfield--phone .lgfield__wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.lgphone__cc {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 0 .7rem;
  font-family: var(--font-text);
  font-size: .95rem;
  color: var(--ink);
  background: #eef0f3;
  border: 1px solid var(--lgfield-border, #b9c6cc);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  white-space: nowrap;
}
.lgfield--phone .lgfield__input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

@media (max-width: 640px) {
  .lgnav__btn { min-width: 0; flex: 1; padding-inline: 1rem; }
}

/* ---- tick-list of faults (warranty step one) ------------------------------
   Radio buttons, not a dropdown: a fault list is short and the choices matter,
   so they are all on screen. The fieldset carries no border or padding of its
   own -- browsers give it both by default and it would read as a box inside a
   box. */
.lgfield--radios { border: 0; margin: 0; padding: 0; min-width: 0; }
.lgradios { display: grid; gap: .5rem; margin-top: .55rem; }
.lgradio {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-family: var(--font-text);
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
}
.lgradio__box {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .18rem;
  accent-color: var(--red-ui, #ff3a42);
  cursor: pointer;
}
.lgradio__text { min-width: 0; }
.lgradio:hover .lgradio__text { color: #000; }
.lgradio__box:focus-visible { outline: 3px solid var(--red-ui, #ff3a42); outline-offset: 2px; }


/* ---- post-conversion "thank you" page -----------------------------------
   /set-up-meeting-success and any future <slug>-success page. Deliberately
   NOT built on .usection: that class lives in utility.css, which the form
   pages other than /contact-us do not load, so its padding would silently be
   nothing. Everything this layout needs is here, in the stylesheet every form
   page already carries.

   The eyebrow stays UI Red. --red-text is for small red BODY text only; the
   note at the top of this file rules eyebrows out of it explicitly. */
.lgsuccess__wrap {
  max-width: 46rem;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  text-align: center;
}
.lgsuccess__wrap h1 { margin-bottom: 1.1rem; }
.lgsuccess__wrap p { margin-inline: auto; }        /* max-width:66ch, centred */
.lgsuccess__actions { justify-content: center; }