/*
 * Innovating Chaos — Business Simplification Quick Start
 *
 * Everything is scoped under `.ic-qs`. This can be dropped on any page on the
 * site, including the WPFunnels pages that are off the design system, so it
 * must not reach a single selector outside itself.
 *
 * Tokens are Kit 2062, with the same names and values as ic-booking.css and
 * ic-pathways.css. Three stylesheets agreeing on `--brand: #FF6600` is a design
 * system; three stylesheets each choosing their own orange is three websites.
 *
 * Checked at 390 / 768 / 1240, light and dark.
 */

/* ---------------------------------------------------------------------------
   0. Hidden
   ---------------------------------------------------------------------------
   Declared first and with !important on purpose. Every screen after the first
   carries the `hidden` attribute, and the layout rules below set `display` on
   those same elements — a `display:grid` further down beats the user-agent's
   `[hidden]` rule and puts all three screens on the page at once. That failure
   looks like the form is broken rather than like a CSS bug.
   ------------------------------------------------------------------------ */
.ic-qs [hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------ */
.ic-qs {
  --ic-qs-brand:      #FF6600;
  --ic-qs-brand-ink:  #8C3800;  /* text-legible accent, 5.10:1 on sand */
  --ic-qs-brand-soft: #FFEDE0;

  --ic-qs-ink:        #0B0500;
  --ic-qs-body:       #5A5751;  /* not Lettery's #7A7A7A — that is 3.79:1 on white, under AA */
  --ic-qs-quiet:      #6B665F;
  --ic-qs-hairline:   #E4DED5;
  --ic-qs-paper:      #FFFFFF;
  --ic-qs-warm:       #FBF8F4;
  --ic-qs-cream:      #EFEAE3;
  --ic-qs-sand:       #DACFC1;

  --ic-qs-ok:    #1a7f37;
  --ic-qs-error: #B42318;

  --ic-qs-radius:    18px;
  --ic-qs-radius-sm: 12px;

  --ic-qs-lift:
    0 1px 2px rgba(11, 5, 0, .05),
    0 8px 20px -10px rgba(11, 5, 0, .14),
    0 30px 60px -30px rgba(11, 5, 0, .20);

  --ic-qs-ease: cubic-bezier(.22, .61, .36, 1);

  box-sizing: border-box;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px 64px;
  color: var(--ic-qs-body);
  font-size: 16px;
  line-height: 1.6;
}

.ic-qs *,
.ic-qs *::before,
.ic-qs *::after { box-sizing: inherit; }

/* ---------------------------------------------------------------------------
   2. Head
   ------------------------------------------------------------------------ */
.ic-qs__head { padding: 40px 0 24px; }

/* The image sits under the copy on a phone and beside it from 768 — see the
   grid in §11. It is decoration for a form, so it never pushes the first
   question below the fold: capped, and cropped rather than letterboxed. */
.ic-qs__head-image {
  margin-top: 24px;
  border-radius: var(--ic-qs-radius);
  overflow: hidden;
  background: var(--ic-qs-cream);
}

.ic-qs__image {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  /* `height:auto` would let a tall crop own the whole first screen on a phone.
     A fixed band with object-fit keeps the aspect honest and the fold intact. */
}

.ic-qs__kicker {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ic-qs-brand-ink);
}

.ic-qs__title {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ic-qs-ink);
  /* 48px/1.0 on a phone produced a six-line hero on the pathway pages and a
     hero 1.34 screens tall. Start small and grow. */
}

.ic-qs__lede {
  margin: 0 0 18px;
  font-size: 17px;
  color: var(--ic-qs-body);
}

.ic-qs__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ic-qs__meta li {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ic-qs-cream);
  font-size: 13px;
  font-weight: 600;
  color: var(--ic-qs-quiet);
}

/* ---------------------------------------------------------------------------
   3. Progress
   ------------------------------------------------------------------------ */
.ic-qs__progress {
  height: 6px;
  border-radius: 999px;
  background: var(--ic-qs-cream);
  overflow: hidden;
}

.ic-qs__progress-bar {
  display: block;
  height: 100%;
  width: 33%;
  border-radius: 999px;
  background: var(--ic-qs-brand);
  transition: width .35s var(--ic-qs-ease);
}

.ic-qs__progress-text {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ic-qs-quiet);
}

/* ---------------------------------------------------------------------------
   4. Screens
   ------------------------------------------------------------------------ */
.ic-qs__screen {
  margin-top: 28px;
  padding: 26px 22px;
  border: 1px solid var(--ic-qs-hairline);
  border-radius: var(--ic-qs-radius);
  background: var(--ic-qs-paper);
  box-shadow: var(--ic-qs-lift);
  outline: none;
}

.ic-qs__screen-step {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ic-qs-brand-ink);
}

.ic-qs__screen-title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ic-qs-ink);
}

.ic-qs__screen-intro {
  margin: 0 0 26px;
  font-size: 15px;
  color: var(--ic-qs-quiet);
}

/* ---------------------------------------------------------------------------
   5. Fields
   ------------------------------------------------------------------------ */
.ic-qs__field {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}

/* Last *child*, not last-of-type.
   `:last-of-type` matches by tag name, and these fields are a mix of `div` and
   `fieldset`. The last div in a screen therefore lost its bottom margin even
   when a fieldset followed it — which collapsed the gap between the "what do
   you offer?" hint and the next question, so the hint read as a label for the
   wrong thing. Caught in a 768px render, not in the code. */
.ic-qs__screen > *:last-child { margin-bottom: 0; }

.ic-qs__field > label,
.ic-qs__field > legend {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ic-qs-ink);
}

.ic-qs__req { color: var(--ic-qs-brand-ink); }

.ic-qs__opt {
  font-weight: 500;
  font-size: 13px;
  color: var(--ic-qs-quiet);
}

.ic-qs__hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ic-qs-quiet);
}

.ic-qs__choices .ic-qs__hint { margin: 0 0 12px; }

.ic-qs__field input[type="text"],
.ic-qs__field input[type="email"],
.ic-qs__field input[type="tel"],
.ic-qs__field input[type="url"],
.ic-qs__field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--ic-qs-sand);
  border-radius: var(--ic-qs-radius-sm);
  background: var(--ic-qs-warm);
  color: var(--ic-qs-ink);
  font: inherit;
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus,
     which on a three-screen form leaves the visitor scrolled sideways. */
  font-size: 16px;
  transition: border-color .18s var(--ic-qs-ease), box-shadow .18s var(--ic-qs-ease);
}

.ic-qs__field textarea {
  min-height: 96px;
  resize: vertical;
}

.ic-qs__field input:focus,
.ic-qs__field textarea:focus {
  outline: none;
  border-color: var(--ic-qs-brand);
  box-shadow: 0 0 0 3px var(--ic-qs-brand-soft);
}

.ic-qs__field.is-invalid > label,
.ic-qs__field.is-invalid > legend { color: var(--ic-qs-error); }

.ic-qs__field.is-invalid input,
.ic-qs__field.is-invalid textarea { border-color: var(--ic-qs-error); }

/* ---------------------------------------------------------------------------
   6. Choice cards
   ------------------------------------------------------------------------ */
.ic-qs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ic-qs__choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ic-qs-sand);
  border-radius: var(--ic-qs-radius-sm);
  background: var(--ic-qs-warm);
  cursor: pointer;
  transition: border-color .18s var(--ic-qs-ease), background .18s var(--ic-qs-ease);
}

.ic-qs__choice:hover { border-color: var(--ic-qs-brand); }

.ic-qs__choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  /* Off-screen rather than display:none — a hidden input is not focusable and
     the whole group stops being reachable by keyboard. */
}

.ic-qs__choice-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--ic-qs-sand);
  border-radius: 6px;
  background: var(--ic-qs-paper);
  transition: border-color .18s var(--ic-qs-ease), background .18s var(--ic-qs-ease);
}

.ic-qs__choice input[type="radio"] ~ .ic-qs__choice-mark { border-radius: 50%; }

.ic-qs__choice-text {
  font-size: 15px;
  color: var(--ic-qs-ink);
}

.ic-qs__choice input:checked ~ .ic-qs__choice-mark {
  border-color: var(--ic-qs-brand);
  background: var(--ic-qs-brand);
  box-shadow: inset 0 0 0 3px var(--ic-qs-paper);
}

.ic-qs__choice:has(input:checked) {
  border-color: var(--ic-qs-brand);
  background: var(--ic-qs-brand-soft);
}

.ic-qs__choice:has(input:focus-visible) {
  outline: 2px solid var(--ic-qs-brand);
  outline-offset: 2px;
}

.ic-qs__choice.is-locked {
  opacity: .5;
  cursor: not-allowed;
}

.ic-qs__count {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ic-qs-quiet);
}

/* ---------------------------------------------------------------------------
   7. Consent and privacy
   ------------------------------------------------------------------------ */
.ic-qs__consent > label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ic-qs-body);
  cursor: pointer;
}

.ic-qs__consent input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--ic-qs-brand);
}

.ic-qs__privacy {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ic-qs-quiet);
}

.ic-qs__privacy a { color: var(--ic-qs-brand-ink); }

/* Honeypot. Off-screen, never display:none — some bots fill only what is
   display:none, and a real screen reader user must not meet it either, which
   is what aria-hidden on the wrapper handles. */
.ic-qs__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   8. Actions
   ------------------------------------------------------------------------ */
.ic-qs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.ic-qs__btn {
  flex: 1 1 auto;
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s var(--ic-qs-ease), transform .18s var(--ic-qs-ease);
}

.ic-qs__btn--primary {
  background: var(--ic-qs-brand);
  color: #FFFFFF;
}

.ic-qs__btn--primary:hover:not(:disabled) {
  background: #E65C00;
  transform: translateY(-1px);
}

.ic-qs__btn--primary:disabled {
  opacity: .6;
  cursor: progress;
}

.ic-qs__btn--ghost {
  flex: 0 0 auto;
  background: transparent;
  border-color: var(--ic-qs-sand);
  color: var(--ic-qs-body);
}

.ic-qs__btn--ghost:hover {
  border-color: var(--ic-qs-brand);
  color: var(--ic-qs-brand-ink);
}

.ic-qs__btn:focus-visible {
  outline: 2px solid var(--ic-qs-brand);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   9. Error
   ------------------------------------------------------------------------ */
.ic-qs__error {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--ic-qs-error);
  border-left-width: 4px;
  border-radius: var(--ic-qs-radius-sm);
  background: #FEF3F2;
  color: #7A271A;   /* 8.6:1 on #FEF3F2 */
  font-size: 15px;
}

/* ---------------------------------------------------------------------------
   10. Done
   ------------------------------------------------------------------------ */
.ic-qs__done {
  margin-top: 28px;
  padding: 32px 24px;
  border: 1px solid var(--ic-qs-hairline);
  border-radius: var(--ic-qs-radius);
  background: var(--ic-qs-paper);
  box-shadow: var(--ic-qs-lift);
  outline: none;
}

.ic-qs__done-title {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ic-qs-ink);
}

.ic-qs__done-copy {
  margin: 0 0 24px;
  font-size: 16px;
}

.ic-qs__route {
  padding: 20px;
  border-radius: var(--ic-qs-radius-sm);
  background: var(--ic-qs-cream);
}

.ic-qs__route-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ic-qs-brand-ink);
}

.ic-qs__route-name {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ic-qs-ink);
}

.ic-qs__route-blurb { margin: 0 0 10px; font-size: 15px; }

.ic-qs__route-note {
  margin: 0;
  font-size: 13px;
  color: var(--ic-qs-quiet);
}

.ic-qs__booking { margin-top: 28px; }

.ic-qs__booking-lead {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ic-qs-ink);
}

/* ---------------------------------------------------------------------------
   11. Wider than a phone
   ------------------------------------------------------------------------ */
@media (min-width: 768px) {
  .ic-qs { padding: 0 24px 80px; }
  .ic-qs__head { padding: 56px 0 28px; }
  .ic-qs__title { font-size: 40px; }

  .ic-qs__head--with-image {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: center;
  }

  .ic-qs__head--with-image .ic-qs__head-image { margin-top: 0; }
  .ic-qs__head--with-image .ic-qs__image { height: 240px; }
  /* Narrower headline measure once the image takes a third of the row —
     40px type across a full 780px line is too long to scan comfortably. */
  .ic-qs__head--with-image .ic-qs__title { font-size: 34px; }
  .ic-qs__screen { padding: 34px 32px; }
  .ic-qs__screen-title { font-size: 26px; }
  .ic-qs__grid { grid-template-columns: 1fr 1fr; }
  .ic-qs__done { padding: 40px 32px; }

  .ic-qs__actions {
    justify-content: flex-end;
  }
  .ic-qs__btn { flex: 0 0 auto; min-width: 180px; }
  .ic-qs__btn--ghost { margin-right: auto; min-width: 0; }
}

@media (min-width: 1240px) {
  .ic-qs { max-width: 820px; }
  .ic-qs__title { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .ic-qs *,
  .ic-qs *::before,
  .ic-qs *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .ic-qs__btn--primary:hover:not(:disabled) { transform: none; }
}

/* ---------------------------------------------------------------------------
   12. Dark
   ---------------------------------------------------------------------------
   Gated on `.ic-dark-ok`, exactly as ic-booking.css and ic-pathways.css are, and
   for the same reason: styling only this component on a page with no dark
   treatment leaves one dark rectangle in the middle of a light page. The body
   class is added by IC_QS_Form::body_class(), which honours the same
   `ic_dark_mode_enabled` filter — so the site-wide switch turns this off too.

   Contrast, measured against these surfaces:
     #F2EDE6 headings on #1E1813  →  13.9:1
     #C9C2B9 body     on #1E1813  →   8.1:1
     #FF8A3D accent   on #1E1813  →   6.3:1   (#FF6600 is 4.4:1 — too close)
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  body.ic-dark-ok .ic-qs {
    --ic-qs-brand-ink:  #FF8A3D;
    --ic-qs-brand-soft: #3A2113;

    --ic-qs-ink:      #F2EDE6;
    --ic-qs-body:     #C9C2B9;
    --ic-qs-quiet:    #A29A90;
    --ic-qs-hairline: #38302A;
    --ic-qs-paper:    #1E1813;
    --ic-qs-warm:     #221B16;
    --ic-qs-cream:    #17120E;
    --ic-qs-sand:     #4A4038;

    --ic-qs-error:    #FF9B8F;

    --ic-qs-lift:
      0 1px 2px rgba(0, 0, 0, .5),
      0 10px 30px -14px rgba(0, 0, 0, .7);
  }

  body.ic-dark-ok .ic-qs__choice input:checked ~ .ic-qs__choice-mark {
    /* The inset ring has to become the dark surface, not white, or every
       selected option grows a bright dot. */
    box-shadow: inset 0 0 0 3px #1E1813;
  }

  body.ic-dark-ok .ic-qs__btn--primary {
    background: var(--ic-qs-brand);
    color: #17120E;   /* 8.9:1 — white on #FF6600 is 2.9:1 and fails outright */
  }

  body.ic-dark-ok .ic-qs__btn--primary:hover:not(:disabled) { background: #FF8A3D; }

  body.ic-dark-ok .ic-qs__error {
    background: #2A1614;
    border-color: #FF9B8F;
    color: #FFD9D3;   /* 11.2:1 on #2A1614 */
  }

  body.ic-dark-ok .ic-qs__meta li { background: #221B16; }

  /* The pathway artwork is drawn on cream paper and cannot invert — on a dark
     page it becomes the brightest thing on the screen and pulls the eye off the
     form. These are the values ic-dark.css and ic-pathways.css already use on
     the same illustrations, not a fresh guess: matching them is what keeps the
     image looking identical here and on /lean-to-leverage/. */
  body.ic-dark-ok .ic-qs__image { filter: brightness(.88) saturate(.95); }

  body.ic-dark-ok .ic-qs__head-image { background: #221B16; }
}

/* ---------------------------------------------------------------------------
   13. Theme defence
   ---------------------------------------------------------------------------
   Everything above assumes this component owns its own appearance. On the live
   site it does not: the Lettery theme reaches *into* any form placed in post
   content and beats single-class selectors. Measured on
   /lean-to-leverage/start/ against style.css?ver=7.0.2:

     input:valid ~ span, textarea:valid ~ span { width: 100% }
         Lettery's Contact Form 7 floating-label rule. Specificity (0,2,1)
         against `.ic-qs__choice-mark` (0,1,0), and every span in a choice card
         is a sibling of the input — so the 20px checkbox mark rendered 310px
         wide, squeezing the label into five lines and making every option card
         148px tall instead of ~52px.

     .single-post-text ul > li { display: block; list-style-type: disc }
         (0,2,1) against `.ic-qs__meta li` (0,1,1). The three head pills became
         full-width bulleted rows.

     input, textarea { background-color: transparent }
         Strips the warm field surface, so inputs picked up a cool blue-grey
         from further up the cascade — two palettes on one page, which is the
         thing ic-booking.css's header warns about.

   The theme uses no `!important` anywhere in these rules, so specificity alone
   is enough and none is needed here. Every value below is a var(), so the dark
   block above keeps working by changing the token rather than the rule.

   These are corrections to selector weight, not new design. If a rule here ever
   disagrees with its counterpart above, the one above is the intent.
   ------------------------------------------------------------------------ */

/* The two spans inside a choice card. (0,3,0) beats the CF7 rule's (0,2,1). */
.ic-qs .ic-qs__choice .ic-qs__choice-mark {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: block;
}

.ic-qs .ic-qs__choice .ic-qs__choice-text {
  flex: 1 1 auto;
  width: auto;
  display: block;
}

/* Head pills. (0,2,2) beats `.single-post-text ul > li` (0,2,1). */
.ic-qs ul.ic-qs__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ic-qs ul.ic-qs__meta > li {
  display: inline-block;
  width: auto;
  padding: 5px 12px;
  list-style: none;
  list-style-type: none;
}

/* Lettery renders its bullets with ::marker on some templates and ::before on
   others. Neutralise both — one alone leaves a stray dot on the other. */
.ic-qs ul.ic-qs__meta > li::marker { content: ""; }
.ic-qs ul.ic-qs__meta > li::before { content: none; display: none; }

/* Fields. (0,3,0) with the type attribute, against `input, textarea` (0,0,1) —
   generous, but the theme's form styling is layered and this is the surface a
   visitor types on. */
.ic-qs .ic-qs__field input[type="text"],
.ic-qs .ic-qs__field input[type="email"],
.ic-qs .ic-qs__field input[type="tel"],
.ic-qs .ic-qs__field input[type="url"],
.ic-qs .ic-qs__field textarea {
  width: 100%;
  background-color: var(--ic-qs-warm);
  border: 1px solid var(--ic-qs-sand);
  border-radius: var(--ic-qs-radius-sm);
  color: var(--ic-qs-ink);
  font-size: 16px;
}

.ic-qs .ic-qs__field input[type="text"]:focus,
.ic-qs .ic-qs__field input[type="email"]:focus,
.ic-qs .ic-qs__field input[type="tel"]:focus,
.ic-qs .ic-qs__field input[type="url"]:focus,
.ic-qs .ic-qs__field textarea:focus {
  border-color: var(--ic-qs-brand);
  box-shadow: 0 0 0 3px var(--ic-qs-brand-soft);
}

/* Buttons. Lettery flattens button corners site-wide. */
.ic-qs .ic-qs__btn { border-radius: 999px; }
.ic-qs .ic-qs__btn--primary { background: var(--ic-qs-brand); }
.ic-qs .ic-qs__btn--ghost { background: transparent; }

/* The choice card itself, so a theme `label { display:block }` cannot undo the
   row layout the mark and text depend on. */
.ic-qs .ic-qs__choices .ic-qs__choice {
  display: flex;
  align-items: flex-start;
  width: auto;
}

/* Headings.
   `.elementor-kit-2062 h2 { color: var(--e-global-color-primary) }` is (0,1,1)
   and beat `.ic-qs__screen-title` (0,1,0), so both `h2`s in this component
   rendered the kit's near-black #0B0500 on the dark card — measured at 1.15:1
   and 1.09:1, which is not "low contrast", it is invisible. (0,2,0) fixes it.

   Only the `h2`s were affected: every other element here passed AA on the same
   surface, the lowest being 6.33:1. The kit only styles heading tags. */
.ic-qs .ic-qs__title,
.ic-qs .ic-qs__screen-title,
.ic-qs .ic-qs__done-title {
  color: var(--ic-qs-ink);
}

/* The one rule here that reaches outside this component.

   Lettery paints `.mil-content-frame` a near-white #F4F5F5 on default page
   templates. The site-wide dark pass covers `.mil-content` and the body but not
   this frame, because the pathway pages are Elementor-built and never use it.
   This page does — so in dark mode the whole form sat in a light band with dark
   page above and below it, which is what made everything read as washed out.

   Scoped to `body.ic-qs-page`, which is only ever a page carrying this form, so
   no other page can be reached by it. Set to transparent rather than a colour,
   so what shows through is the theme's own dark surface and this does not have
   to know what that colour is.

   The pseudo-elements matter as much as the element: Lettery paints the frame
   with `::before` and `::after` too, so setting only the element's background
   changes the measurement and nothing on screen.

   ic-booking.css carries the identical rule for the booking page, and found it
   the same way. If that plugin ever generalises the fix, delete this. */
@media (prefers-color-scheme: dark) {
  body.ic-qs-page.ic-dark-ok .mil-content-frame,
  body.ic-qs-page.ic-dark-ok .mil-content-frame::before,
  body.ic-qs-page.ic-dark-ok .mil-content-frame::after {
    background: transparent;
  }
}

/* The theme's own page title, for the same reason as the frame above.

   Lettery prints the page title as `h1.mil-h2` outside the Elementor tree on
   the default page template. `ic-dark.css` covers `.elementor-top-section
   .mil-h2` — headings *inside* Elementor sections — so a page built the normal
   WordPress way keeps the kit's near-black on the dark body: measured 1.18:1,
   which is an invisible headline, not a dim one.

   Uses `--icd-ink`, ic-dark.css's own heading token, so this tracks that file
   rather than second-guessing it; the literal is only a fallback for the case
   where the site-wide dark pass is not loaded at all.

   **This is not really this plugin's bug.** `/book/` has the identical fault
   with "Book a discovery call", and any future page on the default template
   will too. The real fix is one selector in ic-dark.css. This is scoped to
   `body.ic-qs-page` so it fixes this page without pre-empting that — delete it
   when ic-dark.css covers the page title. */
@media (prefers-color-scheme: dark) {
  body.ic-qs-page.ic-dark-ok h1.mil-h2,
  body.ic-qs-page.ic-dark-ok .mil-banner .mil-h2 {
    color: var(--icd-ink, #F2EFEA);
  }
}

/* NOT fixed here, deliberately: in dark mode `ic-dark.css` sets every
   `input`/`textarea` on the site to its own raised surface with `!important`.
   That is the site-wide dark authority doing its job — one field treatment
   everywhere — and the field rule above wins in light mode where that block
   does not apply. Overriding it would make this form the only one on the site
   with different inputs, which is worse than the slight warm/cool difference. */