/* index.html only. Loads third, after tokens.css and base.css.

   Three rules this file holds itself to:

   1. No color literal appears here. Every color is a var(--token) from
      tokens.css, or a color-mix() of one. `grep -nE "#[0-9a-fA-F]{3,8}"` on
      this file returns nothing, same bar as base.css.
   2. Every class qualifier.js emits is styled here. That module renders the
      entire form from config, so an unstyled slq-* class is an unstyled
      element on the highest-value part of the page. The list is enumerated
      from the source, not guessed.
   3. One thing on this page is allowed to be loud, and it is the qualifier
      box. It owns the only shadow, the only white surface above the fold and
      the only large solid-green element. Everything else is flat, hairline
      and quiet, because the moment a second element competes the form stops
      being the obvious thing to do. Adding a shadow, a tint, a gradient or a
      coloured heading anywhere below .startbox spends the budget twice.

      AMENDED 2026-09-07: the services accordion is a deliberate, single
      exception. Its closed tabs carry the brand bar's green gradient. It
      sits well below the fold where it competes with nothing above it, and
      the closed-green/open-white flip is not decoration - it is the only
      thing making a shut tab legible as a control, since there is no
      chevron. The exception is worth naming rather than quietly breaking
      the rule: if a SECOND gradient ever appears below .startbox, this has
      stopped being an exception and the rule has failed.

   What this file deliberately does NOT do:

   - It does not use base.css's .h-display. That class is uppercase Montserrat
     900 and it is right for the outcome pages, which have one heading each.
     Five of them on one page read as five billboards. Headings here are
     page-local classes: sentence case, Montserrat 800, signpost-sized.
   - It does not override base.css itself. Five other pages load that file. */

/* ---------------------------------------------------------------- Global */

/* qualifier.js and ghl.js both toggle visibility with the `hidden` property
   (#book, #slqEnd, .slq-field-error, .slq-error, the mount itself). The UA
   rule for [hidden] is display:none at author-zero specificity, so any
   display declaration below would silently defeat it. This makes hidden mean
   hidden. */
[hidden]{
  display:none !important;
}

iframe{
  max-width:100%;
}

.skip-link{
  position:absolute;
  top:0;
  left:-9999px;
  z-index:100;
  padding:.75rem 1.25rem;
  background:var(--brand);
  color:var(--surface);
  border-radius:0 0 var(--radius) 0;
  font-weight:600;
  text-decoration:none;
}

.skip-link:focus{
  left:0;
}

/* One background for the whole page. The alternating bands this file used to
   paint (tinted qualifier, white proof, dark final) gave every section its own
   surface and made the page read as a stack of templates. Section rhythm now
   comes from vertical space and two hairlines, and the footer is the only dark
   surface below the brand bar.

   The padding came DOWN when the bands came off, which is the opposite of what
   it looks like it should do. A tinted band is legible at any height because
   its edges say where it starts and stops; on one flat ground the same gap has
   nothing in it and just reads as the page having run out of content. */
.section{
  padding-block:clamp(2.25rem,4.5vw,3rem);
}

/* Buttons ------------------------------------------------------------
   base.css gives .btn-primary a 135deg gradient and a heavy green shadow.
   Both are overridden here rather than in base.css: the outcome pages use one
   button apiece as their single focal element, where the treatment is
   defensible, and this file is not the place to make that call for them.
   Scoped to this page, flat. Everything base.css contributes to hit area —
   the 56px min-height, the full-width-under-620px rule — is untouched,
   because that is accessibility and not decoration. */
.btn-primary{
  background:var(--brand);
  box-shadow:none;
}

.btn-primary:hover{
  background:var(--brand-dk);
  filter:none;
  transform:none;
}

/* ------------------------------------------------------------- Headings */

/* Sentence case, no text-transform anywhere on this page. Sizes are a long
   way down from where they were: the H1 tops out at 38px instead of 60, and
   the two section headings are a fixed 22px, which is a label rather than an
   announcement. */

.hero-h1{
  max-width:20ch;
  margin-inline:auto;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.625rem,1.15rem + 2vw,2.375rem);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--ink);
}

/* Two of these survive: the label on the form and the label on the FAQ. The
   trust and proof sections lost theirs — four cards that each state their own
   claim, and two quotes with five stars over them, do not need a line above
   them saying that cards and quotes follow. */
.section-h{
  font-family:var(--display);
  font-weight:800;
  font-size:1.375rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
}

.startsec .section-h{
  margin-inline:auto;
  text-align:center;
}

.final-h{
  max-width:26ch;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.375rem,1.15rem + 1vw,1.75rem);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* ------------------------------------------------------------------ Hero */

/* Flat. The radial green wash and the linear surface-to-bg fade are both
   gone, and so is the bottom hairline — with the band tint off the qualifier
   section, the headline now runs straight into the form with nothing drawn
   between them, which is the whole argument of this layout. */
.hero{
  background:var(--bg);
  padding-bottom:clamp(1.125rem,2.5vw,1.5rem);
}

/* The Siteline wordmark is white on transparency with no dark pixels in it,
   so it is invisible on a light ground. The brand bar is what gives it one,
   and that is the only reason it exists. Flat --ink, the same surface as the
   footer, so the two dark strips read as one frame rather than two different
   decisions. */
.hero-bar{
  background:var(--ink);
  padding-block:.875rem;
  margin-bottom:clamp(1.5rem,4vw,2.25rem);
}

.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  text-align:center;
}

/* The bar's .wrap is a centred box, but the logo inside it is display:block
   with an explicit width, so without this it hugs the left edge while the
   headline block below it is centred. */
.hero-logo{
  width:clamp(136px,26vw,172px);
  margin-inline:auto;
}

.hero-sub{
  max-width:54ch;
  margin-inline:auto;
  color:var(--ink-soft);
  font-size:clamp(1rem,.95rem + .3vw,1.0625rem);
}

/* ------------------------------------------------- Qualifier: the section
   No band, no border. The box does the work. */

/* The one section that sets its own top padding. Nothing may sit between the
   headline and the form except the line that labels the form. */
.startsec{
  padding-top:clamp(1rem,2.5vw,1.375rem);
  scroll-margin-top:1rem;
}

/* The one element on the page carrying a shadow, and the entire decoration
   budget for the page. It is a neutral shadow rather than a green one — the
   job is to lift the box off the flat ground, not to make it glow — but it is
   deliberately not subtle. On a #FAFAFA ground a white card with a whisper of
   a shadow is indistinguishable from the four white trust cards below it, and
   then nothing on the page is the obvious thing to do. Two layers: a close
   contact shadow that draws the edge, and a wide soft one that gives the lift.
   Radius-lg here and radius everywhere else is the other hierarchy signal. */
.startbox{
  max-width:660px;
  margin:clamp(1.25rem,3.5vw,1.75rem) auto 0;
  padding:clamp(1.375rem,4vw,2.25rem);
  border-color:transparent;
  border-radius:var(--radius-lg);
  box-shadow:
    0 1px 2px color-mix(in srgb,var(--ink) 8%,transparent),
    0 12px 28px -8px color-mix(in srgb,var(--ink) 16%,transparent),
    0 32px 64px -32px color-mix(in srgb,var(--ink) 30%,transparent);
  scroll-margin-top:1rem;
}

/* No-JS fallback. Only ever painted when scripting is off — the qualifier is
   rendered entirely in JS, so without this the box is a dead end. */
.nojs{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
}

.nojs-h{
  font-family:var(--display);
  font-weight:800;
  font-size:1.25rem;
  line-height:1.2;
}

.nojs-p{
  max-width:46ch;
  color:var(--muted);
}

/* Booking widget, revealed and prefilled by ghl.js. */
.book{
  display:grid;
  gap:1rem;
}

.book-h{
  font-family:var(--display);
  font-weight:800;
  font-size:1.25rem;
  line-height:1.2;
}

.cal-wait{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.625rem;
  padding:2.5rem 0;
  color:var(--muted);
  font-size:.9375rem;
}

.cal-wait::before{
  content:"";
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid color-mix(in srgb,var(--brand) 25%,transparent);
  border-top-color:var(--brand);
  animation:sl-spin .8s linear infinite;
}

@keyframes sl-spin{
  to{transform:rotate(360deg)}
}

.cal-frame{
  display:block;
  width:100%;
  min-height:720px;
  border:0;
  border-radius:var(--radius);
  background:var(--surface);
}

/* Navigation-failure fallback for the disqualified route. Hidden unless the
   redirect to not-a-fit.html did not happen. */
.slq-end{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
}

.slq-end-h{
  font-family:var(--display);
  font-weight:800;
  font-size:1.25rem;
  line-height:1.2;
}

.slq-end-p{
  max-width:48ch;
  color:var(--muted);
}

.slq-end-link{
  color:var(--brand);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* -------------------------------------------- Qualifier: rendered by JS
   Everything from here to the next banner is a class qualifier.js writes
   into the DOM. Adding a question to QUALIFIER_CONFIG needs nothing new here
   except a .slq-step-<id> hook if that step wants one. */

.slq{
  display:block;
}

.slq-head{
  margin-bottom:1.5rem;
}

.slq-progress{
  height:6px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}

/* Flat brand, not a two-stop gradient. It is a progress bar. */
.slq-progress-fill{
  height:100%;
  border-radius:999px;
  background:var(--brand);
  transition:width .35s ease;
}

/* Was uppercase and tracked out .09em — the same eyebrow treatment this page
   dropped everywhere else. Sentence case, normal tracking. */
.slq-count{
  margin-top:.5rem;
  font-size:.8125rem;
  font-weight:500;
  color:var(--muted);
}

.slq-step{
  display:block;
}

/* Per-step hooks. The machine emits .slq-step-<id> for every configured step;
   `software` is the only step that ships today — the `bank` step and its
   .slq-step-bank rule were removed together on 2026-09-07.

   THESE SELECTORS ARE STEP IDS FROM QUALIFIER_CONFIG. Renaming a step id in
   assets/js/qualifier.js silently orphans the matching rule below - no
   error, no warning, the grid just collapses to the default tile height and
   looks merely "a bit off". docs/QUESTIONS.md's "How to retune" section
   carries the same warning at the top, because that is the file someone
   reads before renaming a step. Rename both in one commit. */
.slq-step-software .slq-opt{
  min-height:128px;
}

.slq-prompt-wrap{
  margin-bottom:1.25rem;
}

.slq-prompt{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.1875rem,1.05rem + .7vw,1.4375rem);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* Focused programmatically on every step change so a screen reader lands on
   the new question. A visible ring there would read as an error. */
.slq-prompt:focus{
  outline:none;
}

.slq-help{
  margin-top:.5rem;
  max-width:52ch;
  color:var(--muted);
  font-size:.9375rem;
}

.slq-options{
  display:grid;
  gap:.75rem;
}

.slq-options.is-stack{
  grid-template-columns:minmax(0,1fr);
}

.slq-options.is-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.slq-opt{
  display:flex;
  flex-direction:column;
  gap:.375rem;
  width:100%;
  min-height:64px;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  font-family:var(--body);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}

.slq-options.is-grid .slq-opt{
  align-items:center;
  justify-content:center;
  gap:.75rem;
  padding:1.25rem .75rem;
  text-align:center;
}

.slq-options.is-stack .slq-opt{
  align-items:flex-start;
}

.slq-opt:hover{
  border-color:var(--brand);
}

.slq-opt:focus-visible{
  outline:2px solid var(--brand-lt);
  outline-offset:2px;
}

/* The chosen tile reads by border and a thin tint, not by a coloured
   drop-shadow. It is on screen for 140ms. */
.slq-opt.is-chosen{
  border-color:var(--brand);
  box-shadow:inset 0 0 0 1px var(--brand);
  background:var(--surface);
  background:color-mix(in srgb,var(--brand-lt) 8%,var(--surface));
}

.slq-opt-logo{
  height:34px;
  width:auto;
  max-width:100%;
  object-fit:contain;
}

/* The stand-in when an option has no logo. It used to be a tinted green disc,
   which is the same cliché the trust-card icons carried; it is now the glyph
   on its own, sized to sit on the logos' baseline. */
.slq-opt-letter{
  display:grid;
  place-items:center;
  height:34px;
  color:var(--brand);
  font-family:var(--display);
  font-weight:800;
  font-size:1.375rem;
  line-height:1;
}

.slq-opt-label{
  font-weight:600;
  font-size:1rem;
  line-height:1.3;
  color:var(--ink);
}

.slq-opt-sub{
  font-size:.875rem;
  line-height:1.45;
  color:var(--muted);
}

.slq-back{
  align-self:start;
  justify-self:start;
  margin-top:1rem;
  padding:.5rem .25rem;
  min-height:44px;
  border:0;
  background:none;
  color:var(--muted);
  font-family:var(--body);
  font-size:.875rem;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

.slq-back:hover{
  color:var(--ink-soft);
}

.slq-back:focus-visible{
  outline:2px solid var(--brand-lt);
  outline-offset:2px;
}

/* ---- Contact step ---- */

.slq-contact{
  display:grid;
  gap:1rem;
}

.slq-field{
  display:flex;
  flex-direction:column;
  gap:.375rem;
}

/* Per-field hooks. Every CONTACT_FIELDS key emits .slq-field-<key>, so each
   one has a home for tuning without touching the machine. min-width:0 is the
   useful default: these rows sit in a grid and must be allowed to shrink. */
.slq-field-name,
.slq-field-company,
.slq-field-phone,
.slq-field-email,
.slq-field-consent{
  min-width:0;
}

.slq-field-phone .slq-input{
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

/* Email is the one optional field; its label should not compete. */
.slq-field-email .slq-label{
  font-weight:500;
  color:var(--muted);
}

/* Consent is a legal record, not another field. Set it apart. */
.slq-field-consent{
  margin-top:.125rem;
  padding-top:.875rem;
  border-top:1px solid var(--line);
}

.slq-label{
  font-weight:600;
  font-size:.9375rem;
  color:var(--ink-soft);
}

.slq-input{
  width:100%;
  min-height:52px;
  padding:.75rem .9375rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  transition:border-color .15s ease,box-shadow .15s ease;
}

.slq-input::placeholder{
  color:var(--muted);
}

.slq-input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-lt) 22%,transparent);
}

/* setFieldState() adds .bad to the input (or the checkbox) that failed. */
.slq-input.bad{
  border-color:var(--danger);
  background:color-mix(in srgb,var(--danger) 5%,var(--surface));
}

.slq-input.bad:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 22%,transparent);
}

/* The consent row: checkbox, then a long sentence, then a full-width error. */
.slq-field.is-checkbox{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:.25rem .625rem;
}

.slq-field.is-checkbox .slq-label{
  font-weight:400;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--muted);
  cursor:pointer;
}

.slq-field.is-checkbox .slq-field-error{
  grid-column:1 / -1;
}

.slq-check{
  flex:none;
  width:24px;
  height:24px;
  margin:.125rem 0 0;
  accent-color:var(--brand);
  cursor:pointer;
}

.slq-check.bad{
  outline:2px solid var(--danger);
  outline-offset:2px;
  border-radius:4px;
}

.slq-field-error{
  font-size:.8125rem;
  font-weight:500;
  color:var(--danger);
}

/* Off-screen bot trap. qualifier.js already sets inline styles; this makes
   sure nothing here ever pulls it back into layout or into the a11y tree. */
.slq-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px;
  height:1px;
  overflow:hidden;
  pointer-events:none;
}

/* Submit-level failure, e.g. the webhook post did not go through. */
.slq-error{
  padding:.75rem 1rem;
  border-radius:var(--radius);
  border-left:3px solid var(--danger);
  background:color-mix(in srgb,var(--danger) 8%,var(--surface));
  color:var(--danger);
  font-size:.9375rem;
}

/* Carries .btn .btn-primary from base.css — the 56px min-height and the
   full-width-under-620px rule come from there. This only makes it full width
   at every size, because a form's submit should not be a half-width target. */
.slq-submit{
  width:100%;
}

.slq-reassurance{
  margin-top:-.25rem;
  text-align:center;
  font-size:.8125rem;
  color:var(--muted);
}

/* --------------------------------------------------------- Review badge */

/* The fabricated values this paints live in the markup, not here - see the
   comment above index.html's .review-badge. `.stars` beside the numeral is
   the testimonials' own rule, reused unchanged. */
.review-badge{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.5rem .625rem;
  margin-top:clamp(1rem,3vw,1.375rem);
  color:var(--muted);
  font-size:.875rem;
}

.review-score{
  font-family:var(--display);
  font-weight:800;
  font-size:1.125rem;
  line-height:1;
  color:var(--ink);
}

/* ----------------------------------------------------------- Trust cards */

.trust-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.5rem,4vw,2.25rem);
}

/* Four across on a wide screen, one across under about 560px, with no
   breakpoint of its own. */
.trust-cards{
  display:grid;
  gap:1rem;
  width:100%;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}

/* Used as `class="tcard card"`. .card from base.css brings the surface, the
   hairline and the radius; this keeps all three and only adds the layout.
   The soft drop-shadow and the larger radius these used to carry are gone —
   the box-shadow budget on this page is spent entirely on .startbox. Centred
   text is deliberate and matches the reference the operator sent. */
.tcard{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.625rem;
  min-height:0;
  padding:1.5rem 1.25rem;
  text-align:center;
}

/* No disc. The tinted circle behind the glyph was the single most templated
   thing on the page; the glyph in brand green says the same thing without it.
   currentColor is what the inline SVG inside paints with. */
.tcard-icon{
  display:block;
  flex:none;
  margin-bottom:.125rem;
  color:var(--brand);
}

/* Was brand green. On a page whose only green is now interactive — buttons,
   the progress bar, focus rings — a green heading reads as a link. */
.tcard-h{
  font-family:var(--display);
  font-weight:800;
  font-size:1rem;
  line-height:1.25;
  color:var(--ink);
}

.tcard-p{
  max-width:28ch;
  color:var(--muted);
  font-size:.9375rem;
  line-height:1.5;
}

/* The anchor back up to the form, given the same width floor as the closing
   button so the two read as one pair rather than two sizes. */
.trustsec .btn-primary{
  min-width:min(100%,300px);
}

/* ----------------------------------------------------------------- Proof */

/* A reading column, not the full 1180. Left-aligned, because a quote is
   something you read rather than something you scan. */
.proof-inner{
  max-width:760px;
}

.proof-grid{
  display:grid;
  gap:1.5rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}

/* No card. A hairline above each quote and room around it does everything the
   bordered box was doing, and stops the page reading as four consecutive rows
   of identical rounded rectangles. */
.quote{
  display:flex;
  flex-direction:column;
  gap:.625rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
}

.stars{
  color:var(--brand);
  font-size:.9375rem;
  letter-spacing:.14em;
  line-height:1;
}

.quote-text{
  color:var(--ink-soft);
  font-size:1rem;
}

.quote-who{
  margin-top:auto;
  font-weight:600;
  font-size:.875rem;
}

.quote-org{
  font-weight:400;
  color:var(--muted);
}

/* Video testimonials --------------------------------------------------
   The sources are 9:16 phone video, so the frame is aspect-ratio locked
   and the poster fills it. Two up on a wide screen and one up on a phone:
   a 9:16 card four-across would be a column of postage stamps.

   The play button is the only chrome until the visitor commits. It is a
   real <button> rather than a click handler on the frame, so it is in the
   tab order and fires on Enter without any extra work. */
.vid-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:2rem 1.5rem;
  margin:0 0 clamp(2rem,5vw,3rem);
  padding:0;
  list-style:none;
}

.vidcard{
  display:flex;
  flex-direction:column;
  gap:.375rem;
}

.vid-frame{
  position:relative;
  aspect-ratio:9/16;
  margin-bottom:.375rem;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--ink);
}

.vid-el{
  width:100%;
  height:100%;
  object-fit:cover;
}

.vid-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:var(--surface);
  cursor:pointer;
}

/* The disc sits behind the glyph rather than being a background on the
   button, so the hit area stays the whole frame. */
.vid-play::before{
  content:"";
  position:absolute;
  width:66px;
  height:66px;
  border-radius:50%;
  background:var(--brand);
  opacity:.92;
}

.vid-play svg{
  position:relative;
  margin-left:4px;
}

.vid-play:focus-visible{
  outline:2px solid var(--brand-lt);
  outline-offset:-4px;
}

.vidcard.is-playing .vid-play{
  display:none;
}

.vid-who{
  font-weight:600;
}

.vid-org{
  font-weight:400;
  color:var(--muted);
}

.vid-desc{
  font-size:.9375rem;
  color:var(--muted);
}

.vid-quote{
  margin:0;
  padding-left:.875rem;
  border-left:2px solid var(--brand);
}

/* -------------------------------------------------------------- SERVICES */

/* The documented exception to rule 3 at the top of this file: the only
   gradient below .startbox.

   Closed = the brand bar's gradient, so a shut tab reads as a control.
   Open = white, so the body copy sits on the same ground as every other
   paragraph on the page. The colour flip IS the affordance - there is no
   chevron, and the +/- is a confirmation of it rather than the signal.

   Same reading column as the FAQ directly below, because they are the same
   shape doing the same job and lining them up is free. */
.services-inner{
  max-width:760px;
}

.svc-item{
  margin-top:.75rem;
  border:1px solid var(--brand-dk);
  border-radius:var(--radius);
  overflow:hidden;
}

.svc-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:60px;
  padding:.875rem 1.25rem;
  background:var(--brand-dk);
  background:linear-gradient(90deg,var(--brand-dk),var(--ink));
  color:var(--surface);
  font-family:var(--display);
  font-weight:700;
  line-height:1.25;
  cursor:pointer;
  list-style:none;
}

/* Safari still paints its own disclosure triangle without this. */
.svc-q::-webkit-details-marker{
  display:none;
}

.svc-q::after{
  content:"+";
  flex:none;
  font-size:1.5rem;
  line-height:1;
}

.svc-item[open]{
  background:var(--surface);
}

.svc-item[open] .svc-q{
  background:var(--surface);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}

.svc-item[open] .svc-q::after{
  content:"\2212";
}

.svc-q:focus-visible{
  outline:2px solid var(--brand-lt);
  outline-offset:-2px;
}

.svc-a{
  padding:1rem 1.25rem 1.25rem;
  max-width:66ch;
  color:var(--muted);
}

/* ------------------------------------------------------------------- FAQ */

/* A reading column at roughly 72 characters, left-aligned. */
.faq-inner{
  max-width:760px;
}

/* Rows on hairlines, not stacked boxes. Five bordered rounded rectangles made
   a list of questions look like a list of products. */
.faq-item{
  border-bottom:1px solid var(--line);
}

.faq-item:first-of-type{
  margin-top:clamp(1rem,3vw,1.5rem);
  border-top:1px solid var(--line);
}

.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:56px;
  padding:.875rem 0;
  font-weight:600;
  cursor:pointer;
  list-style:none;
}

.faq-q::-webkit-details-marker{
  display:none;
}

/* An affordance, not a brand moment — muted, the way the back link is. */
.faq-q::after{
  content:"+";
  flex:none;
  font-family:var(--display);
  font-size:1.375rem;
  line-height:1;
  color:var(--muted);
}

.faq-item[open] .faq-q::after{
  content:"\2212";
}

.faq-q:focus-visible{
  outline:2px solid var(--brand-lt);
  outline-offset:-2px;
}

.faq-a{
  max-width:66ch;
  padding:0 0 1.25rem;
  color:var(--muted);
}

/* ------------------------------------------------------------- Final CTA */

/* Was a dark gradient band carrying a two-colour headline. Flat now, like
   everything else; the footer immediately below is the page's only dark
   surface and does not need a second one arriving two centimetres above it. */
.final-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
  text-align:center;
}

.final .btn-primary{
  min-width:min(100%,300px);
}

/* ---------------------------------------------------------------- Footer */

/* Dark, for the same reason as .hero-bar: the wordmark has no dark pixels. */
.site-foot{
  background:var(--ink);
  padding-block:clamp(2rem,5vw,3rem);
}

.foot-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.875rem;
  text-align:center;
}

.foot-logo{
  width:132px;
}

.foot-legal{
  font-size:.8125rem;
  color:color-mix(in srgb,var(--surface) 62%,transparent);
}

.foot-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 1.5rem;
}

.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:color-mix(in srgb,var(--surface) 72%,transparent);
  font-size:.8125rem;
  text-decoration:underline;
  text-underline-offset:3px;
}

.foot-links a:hover{
  color:var(--surface);
}

/* -------------------------------------------------------------- Narrow */

@media (max-width:420px){
  .slq-options.is-grid .slq-opt{
    padding:1rem .5rem;
  }
  .slq-opt-logo{
    height:28px;
  }
  .slq-opt-letter{
    height:28px;
    font-size:1.25rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .cal-wait::before{
    animation:none;
  }
  .slq-progress-fill,
  .slq-opt{
    transition:none;
  }
}