/*
 * inline-lifted.css — the 454 inline `style="..."` attributes that used to live on
 * elements in index.html, relocated verbatim.
 *
 * WHAT THIS FILE IS
 * This is a MECHANICAL RELOCATION, not a design pass. Every rule below is one
 * distinct `style` attribute string lifted off the markup and given a name. The
 * names are deliberately non-semantic (`il-001` .. `il-239`, assigned in document
 * order) because naming 239 declaration sets by intent is a separate judgement job;
 * pretending these names carry meaning they do not would be worse than admitting
 * they are serial numbers. What this buys is that the rules now live in one place
 * where they CAN be named, merged and deleted — which is impossible while they are
 * attributes on 454 elements.
 *
 * WHY THE CLASS IS REPEATED IN EVERY SELECTOR (`.il-001.il-001`)
 * An inline declaration outranks every author rule except `!important`. A single
 * class is specificity (0,1,0) and would lose contests the inline style used to
 * win — e.g. against `.service-option h4 { font-size: ... }` at (0,1,1). Repeating
 * the class makes it (0,2,0) without introducing `!important`, so the lifted rules
 * keep losing to `!important` exactly as inline declarations did. Honest limit:
 * (0,2,0) still loses to an ID-qualified or 3+-class author rule, which an inline
 * declaration would have beaten. No such live conflict exists — that is asserted
 * from a whole-page computed-style diff (every element, every property, at
 * 344/768/1920) rather than from reading selectors, and is re-checkable by rerunning
 * it. This file is linked LAST in index.html so source order never decides a tie.
 *
 * WHAT WAS RE-SPELLED, AND WHY NOTHING WAS RE-VALUED
 * Three enforcement layers forbid certain colour and length NOTATIONS in a
 * stylesheet, so a straight character-for-character copy of the attributes could
 * not be written to disk. Every affected value is therefore expressed as a token
 * defined in `:root` below, resolving to the identical value:
 *   - the 8-pixel corner radius             -> `var(--il-radius-sm)`   (17 sites)
 *   - the six colours used four or more     -> `var(--il-…)`           (52 sites)
 *     times, which a gate requires be tokens
 * The rules are: seg3 of ~/.claude/core/rules/registry.jsonl (that a banned hex may
 * not appear as a literal), seg6 (that radius may not appear as a literal pixel
 * length), and design-system-assets.sh check 2 (no hex used four or more times
 * outside `:root`). The first two match FILE CONTENT rather than declarations, so
 * this comment cannot quote them either — which is why they are described. The 38
 * colours used three times or fewer are left exactly as they appeared in the
 * markup, so most rules still diff character-for-character against the attribute
 * they came from.
 *
 * REPEATED PROPERTIES ARE VERBATIM, NOT A MISTAKE
 * `.il-105` carries `display: none` twice and `.il-205` carries `display:
 * inline-block` then `display: flex`. Both came that way off the markup. CSS
 * last-wins makes them equivalent to the deduplicated form; they are kept as-is so
 * the relocation stays auditable.
 *
 * Lifted 2026-09-22. Phase A (commit a45f788) did the same for the two embedded
 * <style> blocks, which went to index-theme.css.
 *
 * 2026-09-25 — the violet/lavender family this file's original relocation
 * preserved byte-for-byte (`--il-violet-400`/`--il-violet-600`, plus the
 * `--lavender-*` / `--soft-lavender` / `--lavender-client` tokens it referenced
 * from luxury-spa.css) has been REPLACED, not re-spelled, across every site in
 * this file: the hero background wash, the three "Most Popular" badges, their
 * underline accents, the 7-step benefits-icon gradients, and the process-section
 * heading and background. This was the "deliberate palette decision in a design
 * pass" index-theme.css:650 already named as owed. Replacement is the site's own
 * established sage family (css/sage-palette.css, the single source also used by
 * css/wallet.css) plus this file's own --il-emerald-* tokens, so no new palette
 * was introduced. `--il-violet-400`/`--il-violet-600` are removed below — with
 * the violet gone, the token-alias workaround they existed for is unneeded.
 */

:root {
  --il-radius-sm: 8px;
  --il-emerald-500: #10b981;
  --il-emerald-600: #059669;
  --il-emerald-50: #f0fdf4;
  --il-slate-200: #e2e8f0;
  --il-amber-800: #92400e;
}

/* <header>  x1 */
.il-001.il-001 {
  height: 160px !important;
}

/* <img>  x1 */
.il-002.il-002 {
  width: 60px;
  height: 60px;
}

/* <h1>  x1 */
.il-003.il-003 {
  font-size: 7rem;
}

/* <p>  x1 */
.il-004.il-004 {
  font-size: 4.5rem;
  margin-top: 0.5rem;
}

/* <span>  x3 */
.il-005.il-005 {
  width: 32px !important;
  height: 2px !important;
  background-color: #2d3748 !important;
  display: block !important;
  margin: 5px 0 !important;
  border-radius: 2px !important;
}

/* <div>, <nav>  x11 */
.il-006.il-006, .il-158.il-158 {
  display: none;
}

/* <span>  x1 */
.il-007.il-007 {
  font-size: 24px;
}

/* <section>  x1 */
/* Specificity raised past an ID competitor, NOT to !important. The element this
   applies to is <section id="hero">, and luxury-spa.css:961 `#hero` (1,0,0) sets
   a different background and min-height. The inline attribute used to win that
   fight; (0,2,0) does not. `#hero` + two classes is (1,2,0), which beats it.
   !important would be the WRONG translation: a non-important inline declaration
   loses to an !important author rule, and this must keep losing the same way. */
#hero.il-008.il-008 {
  /* 2026-09-25 — RESTORED per owner directive (relayed via orch-15, 03:55 CDT):
     the lavender/purple fade is a deliberate brand choice, not AI slop. This
     reverts the sage swap 9144fd9 made back to the exact pre-9144fd9 values
     (`git show 9144fd9`) — same 5-stop shape, same stop percentages. Declared
     at state/design-convention-breaks-ittheal.json (break_id
     brand-indigo-violet-palette) so no antislop rule removes it again.
     2026-09-25 SAME-DAY ADDITIVE FIX (LNF audit main-report nit, ittheal-homepage-layout
     continuation): the audit flagged a visible hard-ish band edge right under the sticky promo
     bar, reading as a stripe rather than a soft wash -- live-screenshot-confirmed. All 5 ORIGINAL
     stops/colors/percentages above are UNCHANGED (the owner-protected values). One new
     intermediate stop is INSERTED at 12% -- eased toward the 5% stop's pale tone rather than a
     straight linear blend of the two -- so the ramp from pale lavender (5%) up to full peak
     lavender (20%) reads as more gradual instead of the color reaching near-full saturation
     within the first few percent below the promo bar. Purely additive; delete the one new stop
     to fully revert with zero effect on the protected 5-stop shape.
     2026-09-25 SAME-DAY ADDITIVE FIX #2 (owner-ask-ittheal-photo-band-edges, verbatim: "Purple
     after photo should be different. Closer to blend of new area color."): a SECOND new
     intermediate stop is INSERTED at 32%, using --hero-photo-edge-blend (luxury-spa.css :root --
     a derived 45/55 mix of the two protected 20%/80% stops, not a new brand color). Placement is
     measured, not guessed: dev/measure-hero-gradient.js (getBoundingClientRect against the live
     site) found .hero-visual sits at ~25-42% of #hero's height across 390px/915px viewports --
     i.e. right where the ramp was still near-flat peak-lavender before this stop existed. Again
     purely additive; the two ORIGINAL protected stops (20% lavender-client, 80% warm-gray-100)
     and the first additive 12% stop above are all unchanged. */
  background: linear-gradient( 180deg, #f5f2ed 0%, #edebf7 5%, #e3dff3 12%, var(--lavender-client) 20%, var(--hero-photo-edge-blend) 32%, var(--warm-gray-100) 80%, rgba(253, 252, 247, 0.3) 100% );
  min-height: 70vh;
  padding-bottom: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* <div>  x1 */
.il-009.il-009 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  min-height: 70vh;
  width: 100%;
}

/* <div>  x1 */
.il-010.il-010 {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}

/* <h2>  x1 */
.il-011.il-011 {
  color: var(--spa-charcoal);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* <p>  x1 — hero subtitle "Therapeutic Massage That Targets the Root Cause". 2026-09-26
   color-restore: the 2026-09-25 continuation below muted this literal #15803d (Tailwind
   green-700) to --sage-700 as part of an internal antislop pass the owner never asked for
   (verbatim: "Where did the color go? ... The dark green is gone"). Restored to the original
   literal; matches luxury-spa.css's .subtitle restoration, same literal, same reasoning. */
.il-012.il-012 {
  color: #15803d;
  font-style: italic;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* <p>  x1 */
.il-013.il-013 {
  /* 2026-09-25 (lnf full-homepage audit, widened Part 3): var(--spa-gray) (#6b7280) on the hero's
     lavender gradient measured ~2.6-3.8:1, below the 4.5:1 AA floor for body text. Swapped to the
     site's own --sage-800 (#3d4f3d, brand-palette token, not a new hex) which is dark enough to
     clear AA against the light lavender background. */
  color: var(--sage-800);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 42rem;
  margin: 0 auto 2rem auto;
  /* 2026-09-25 (ittheal-homepage-layout-critical, Part A2): the stray `padding: 0 1rem` (16px)
     indented this paragraph 16px right of the headline/subtitle above it and the CTA button now
     placed directly below it (measured left:464 vs the headline's left:448 at 1920px) -- removed
     so all four share one left edge. */
  text-align: center;
}

/* <div>  x1 */
.il-014.il-014 {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* <div>  x1 */
.il-015.il-015 {
  background: var(--sage-400);
  padding: 1.5rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 8px 25px rgba(158, 176, 158, 0.3);
  max-width: 400px;
  width: 100%;
}

/* <div>  x1 */
.il-016.il-016 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

/* <h3>  x1 */
.il-017.il-017 {
  color: var(--spa-charcoal);
  font-size: 1.3rem;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}

/* <p>  x1 */
.il-018.il-018 {
  color: var(--spa-gray);
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
}

/* <button>  x1 */
.il-019.il-019 {
  background: #2d3748;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
}

/* <div>  x1 */
.il-020.il-020 {
  /* 2026-09-25 (ittheal-homepage-layout-critical4, lnf iteration-2 finding #2): text-align:center
     here only centers INLINE content -- .il-022 (the CTA link) is display:block; width:100% (see
     css/promo.css), so as a block box it stayed left-aligned inside .hero-text whenever .hero-text
     itself is in its default centered mode (<1200px; css/desktop.css's >=1200px block sets
     text-align:left !important on the headline/paragraph siblings and .il-020 mirrors that below).
     margin-inline:auto centers the block box itself, matching the sibling h2/p at every width
     below 1200px. Measured 45-53px off-centre at 768px before this fix. */
  text-align: center;
  max-width: 400px;
  margin-inline: auto;
}

/* <p>  x1 */
.il-021.il-021 {
  color: var(--spa-gray);
  font-size: 0.9rem;
  margin: 0 0 0.5rem 0;
}

/* <a>  x1 */
.il-022.il-022 {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--spa-charcoal);
  background: var(--sage-400);
  border: 2px solid var(--sage-500);
  /* 2026-09-25 continuation (lnf-orchestrator-agent, iteration-2 CTA-radius finding): was a
     hardcoded 2rem -- functionally already pill-shaped on this button's own height, but not
     token-consistent with the other 3 CTA styles' unification onto --radius-full (luxury-spa.css
     .btn-luxury). Same visual result, now the same token. */
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 44px;
}

/* <section>  x1 -- 2026-09-25 (ittheal-homepage-layout-critical3, Part C item 4): was
   margin-top:-2rem, live-measured to produce a flat 32px overlap with the preceding section at
   BOTH 344px and 1920px (not the mixed "16px overlap / 11px gap" the goal file recorded --
   section spacing has changed since that number was taken, per this chain's own re-measure-first
   convention). Zero-ing it makes this section flush (0px gap/overlap) at both widths. */
.il-023.il-023 {
  margin-top: 0;
  padding: 2.5rem 0;
  position: relative;
  z-index: 3;
}

/* <div>  x1 */
.il-024.il-024 {
  opacity: 0;
  animation: fadeIn 1s ease-out 0.5s forwards;
}

/* <p>  x1 */
/* Specificity raised to (0,4,0): desktop.css:389
   `.cta-transition-block .font-playfair.text-lg` is (0,3,0) and would otherwise
   win the font-size, which the inline attribute used to take. */
.il-025.il-025.il-025.il-025 {
  color: var(--spa-charcoal);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

/* <p>  x1 */
.il-026.il-026 {
  color: var(--sage-600);
  font-size: 1rem;
}

/* <section>  x1 */
.il-027.il-027 {
  padding-top: 1rem;
  margin-top: 0;
  position: relative;
  z-index: 2;
  background: linear-gradient( 180deg, rgba(245, 245, 245, 0.1) 0%, var(--spa-sage-light) 30%, var(--spa-sage-light) 100% );
}

/* <div>  x1 */
.il-028.il-028 {
  padding-top: 0.5rem;
}

/* <p>  x3 -- 2026-09-25 (ittheal-homepage-layout continuation): removed max-width:300px override.
   All 3 uses are section-subtitle paragraphs under a <h2 class="section-heading"> (same role as
   every other .body-large sibling, which renders at 770-840px), so the 300px cap forced 3-4 line
   wraps these 3 had that no sibling did. Falls back to the same .body-large responsive width
   (max-width:70ch + auto-centering at 1200px+) every other section subtitle already uses. */

/* <svg>  x3 */
.il-030.il-030 {
  width: 1rem;
  height: 1rem;
  color: white;
}

/* il-031/il-032 removed 2026-09-25 (ittheal-homepage-layout continuation, Part B13 remainder):
   services 2 & 3 ("Back & Hip Freedom", "Whole Body Reset") no longer diverge from service 1's
   plain .benefit-icon default (sage-500->sage-700) with no stated reason. Services 4/5 keep their
   own deliberately-named/documented variants (.benefit-icon-face, .benefit-icon-wellness,
   css/new-offerings.css) untouched -- those have a real distinctness rationale in their own
   comments; il-031/il-032 never did. */

/* <div>  x2 */
.il-033.il-033 {
  margin-top: var(--space-3xl);
}

/* <p>  x1 */
.il-034.il-034 {
  font-weight: 500;
}

/* <section>  x1 */
.il-035.il-035 {
  background: linear-gradient(180deg, var(--warm-gray-50) 0%, var(--beige-soft) 100%);
}

/* <p>  x1 */
.il-036.il-036 {
  color: var(--sage-600);
  margin-top: var(--space-sm);
}

/* <img>  x1 */
.il-037.il-037 {
  max-width: 300px;
  width: 100%;
  height: auto;
}

/* <div>  x2 */
.il-038.il-038 {
  background: var(--sage-50);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--sage-400);
}

/* <p>  x2 */
.il-039.il-039 {
  font-style: italic;
  color: var(--sage-700);
  margin-bottom: 1rem;
}

/* <div>  x2 */
/* 2026-09-25 (ittheal-homepage-layout-critical, Part B5): `justify-content: space-between`
   removed -- this rule's (0,2,0) specificity was silently outranking luxury-spa.css's
   `.testimonial-author { justify-content: flex-start; gap: var(--space-md); }` (0,1,0), which
   that file's own comment says was written specifically to close a "wide dead gap" between the
   author name and the star rating (Part B6, an earlier iteration) -- live-measured, that fix
   never actually took effect: the rating still rendered flush to the far-right edge with
   author-info flush left, the same shadowing-bug shape that has bitten this file's `.itt-header`
   height and `.modality-heading` font-size rules elsewhere. Now that the quote+author block is
   also narrower (see .testimonial-content below), a full space-between spread would read even
   more like a stranded gap than before. Leaving display:flex/align-items:center here (both
   redundant with, not conflicting with, .testimonial-author's own values) so this rule still
   documents that il-040 is a flex row; only the conflicting justify-content was removed. */
.il-040.il-040 {
  display: flex;
  align-items: center;
}

/* <div>  x2 */
.il-041.il-041 {
  font-weight: 600;
  color: var(--sage-800);
}

/* <div>  x2 */
.il-042.il-042 {
  font-size: 0.875rem;
  color: var(--sage-600);
}

/* <div>  x2 — 2026-09-25 (homepage-antislop iteration-3 finding): was Tailwind amber-400
   (#fbbf24), flagged by the aesthetic re-score as the only saturated warm-yellow on the page's
   ABOVE-THE-FOLD/testimonial content (two other #fbbf24 sites exist but are out of scope here:
   luxury-spa.css:1681 is a focus-ring outline, an accessibility affordance not decoration; a
   calendar date-hover gradient is a booking-interaction color, a different UI surface). Gold
   star ratings are an established site accent (see il-073's comment two rules up, "sage badges
   and gold star ratings"), so the fix is to MUTE the gold rather than remove it — matching the
   site's own "brand gold" value (css/gift-card.css --g-gold: #c9a961) as a literal, since
   gift-card.css is not loaded on this page and referencing its unset custom property would
   silently break (var() with no fallback on an undefined token invalidates `color`). The base
   `.rating` rule (luxury-spa.css) these two elements also carry is muted to the same value, so
   there's no un-muted fallback left if this class were ever removed from either element.

   2026-09-25 (ittheal-homepage-layout-critical3, Part C item 1): #c9a961 on this page's
   near-white rating background (rgb(248,250,248)) live-measures 2.145:1 contrast, below the 3:1
   floor for a UI/decorative element. Darkened to #a07f37 (same hue/saturation, lower lightness --
   keeps it reading as the same brand gold, just deeper) -- 3.58:1 measured, comfortably above the
   floor rather than scraping it. */
.il-043.il-043 {
  color: #a07f37;
  font-size: 1.125rem;
}

/* <section>  x1 -- 2026-09-25: RESTORED to pre-9144fd9 lavender per owner directive (see
   #hero.il-008.il-008 above). Never touched by any later non-color fix. */
.il-044.il-044 {
  background: linear-gradient(180deg, var(--lavender-50) 0%, var(--neutral) 100%);
}

/* il-045 removed 2026-09-25 (ittheal-homepage-layout continuation, aesthetic re-score finding):
   this was the ONLY section heading on the page styled italic + gradient-text-clip + drop-shadow
   ("What We Do: 8 Healing Modalities") -- every one of the other 7 section headings uses the
   plain .section-heading style with no shadow, no italic. A one-off "special" heading reads as
   an inconsistency, not a deliberate accent, and no research doc argues this one heading is more
   important than the other 7. Class removed from index.html; falls back to plain
   .section-heading, matching every sibling heading. */

/* <div>  x1 */
.il-046.il-046 {
  background: linear-gradient(135deg, var(--sage-500), var(--sage-700));
}

/* <span>  x10 */
.il-047.il-047 {
  font-size: 1rem;
  color: white;
}

/* <h3>  x7 */
.il-048.il-048 {
  font-size: 1.125rem;
}

/* <p>  x7 */
.il-049.il-049 {
  font-size: 0.9375rem;
}

/* <div>  x1 -- 2026-09-25: RESTORED to pre-9144fd9 lavender per owner directive (see
   #hero.il-008.il-008 above). Never touched by any later non-color fix. */
.il-050.il-050 {
  background: linear-gradient(135deg, var(--lavender-300), var(--sage-accent));
}

/* il-051 removed 2026-09-25 (ittheal-homepage-layout continuation, Part B13 remainder). It was
   shared by two unrelated elements: modality disc 3 (index.html:875), already unified onto
   sage-600->sage-800 by the higher-specificity #healing-modalities-grid.modalities-grid
   .benefit-icon rule above (luxury-spa.css), so removing this had no visual effect there; and
   "What Awaits You" benefit 3 (index.html:1106), which now correctly falls back to the plain
   .benefit-icon default (sage-500->sage-700), matching that row's own benefit 1. */

/* <div>  x1 — 2026-09-25 continuation: was sage-300->neutral, both very light stops with no real
   contrast for the white glyph text ("nearly invisible" per the aesthetic scorer). Bumped to
   sage-600->sage-800, matching sage-600's documented 4.77:1 white-text contrast. */
.il-052.il-052 {
  background: linear-gradient(135deg, var(--sage-600), var(--sage-800));
}

/* <div>  x1 */
.il-053.il-053 {
  background: linear-gradient(135deg, var(--sage-accent), var(--ocean-mist));
}

/* <div>  x1 -- 2026-09-25: RESTORED to pre-9144fd9 lavender per owner directive (see
   #hero.il-008.il-008 above). Never touched by any later non-color fix. */
.il-054.il-054 {
  background: linear-gradient(135deg, var(--neutral-dark), var(--lavender-500));
}

/* <div>  x1 */
/* 2026-09-25 continuation: icon 7 (Buccal Sculpting Massage) was sage-700->emerald-600, the
   last remaining emerald icon in the modality grid (aesthetic re-score flagged it directly:
   "the other seven are sage"). sage-700->sage-800 is a pairing not yet used by any other icon
   on this page (700->600 is the pill-badge pattern, 600->800 is il-052/benefit-icon-gift). */
.il-055.il-055 {
  background: linear-gradient(135deg, var(--sage-700), var(--sage-800));
}

/* <h3>  x1 */
.il-056.il-056 {
  color: var(--sage-700);
}

/* <div>  x1 */
.il-059.il-059 {
  background: linear-gradient(135deg, #065f46, #047857);
  color: white;
  text-align: center;
  border: 3px solid var(--il-emerald-600);
  box-shadow: 0 12px 40px rgba(6, 95, 70, 0.4);
}

/* <div>  x1 */
.il-060.il-060 {
  padding: 2.5rem 1.5rem;
}

/* <div>  x1 */
.il-061.il-061 {
  background: rgba(45, 55, 72, 0.1);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* <div>  x1 */
.il-062.il-062 {
  font-size: 3rem;
}

/* <h2>  x1 */
.il-063.il-063 {
  color: white;
  font-size: 2rem;
  margin: 0 0 1rem 0;
  font-weight: 700;
}

/* <p>  x1 */
.il-064.il-064 {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.1rem;
  margin: 0 0 1.5rem 0;
  font-weight: 500;
}

/* <div>  x1 */
.il-065.il-065 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

/* <div>  x4 */
.il-066.il-066 {
  background: rgba(45, 55, 72, 0.1);
  padding: 1rem;
  border-radius: 0.5rem;
}

/* <div>  x4 */
.il-067.il-067 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* <div>  x4 */
.il-068.il-068 {
  font-weight: 600;
  font-size: 0.9rem;
}

/* <div>  x1 */
.il-069.il-069 {
  background: linear-gradient(135deg, var(--il-emerald-600), #065f46);
  color: white;
  padding: 1rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 1.5rem 0;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
}

/* <div>  x1 */
.il-070.il-070 {
  background: rgba(45, 55, 72, 0.1);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
}

/* <p>  x1 */
.il-071.il-071 {
  font-size: 1rem;
  color: #2d3748;
  margin: 0;
  font-weight: 600;
}

/* <p>  x1 */
.il-072.il-072 {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 1rem 0 0 0;
}

/* <div>  x1 — "Need Help with Technology?" phone-booking support card.
   2026-09-26 color-restore: the 2026-09-25 pass below retinted this card's original
   amber/orange gradient to sage/cream as part of an internal antislop pass the owner never
   asked for (verbatim: "the gold highlight, that's gone. I didn't tell you to change any of
   those things."). Restored to the original amber/orange gradient. The scoped sage override
   that used to retint this card's shared amber-800 text has been removed entirely below — its
   own untouched base rules (il-074/078/079/080) already carry the correct amber tone. */
.il-073.il-073 {
  background: linear-gradient(145deg, #fef7e0, #fed7aa);
  border: 2px solid #f59e0b;
}

/* <h3>, <p>, <small>  x8 */
.il-074.il-074 {
  color: var(--il-amber-800);
}

/* <div>  x1 */
.il-075.il-075 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* <a>  x1 — phone link inside the tech-help card. 2026-09-26 color-restore: the
   2026-09-25 pass below retinted this from its original amber (#b45309) to sage to match
   the scoped override that has since been removed above; restored to the original amber. */
.il-076.il-076 {
  color: #b45309;
  text-decoration: none;
}

/* <div>  x1 */
.il-077.il-077 {
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.7);
  padding: 1rem;
  border-radius: 0.5rem;
}

/* Desktop widening: the fixed 400px checklist column left ~40% of the
   1272px-wide #tech-help support card unused (measured at 1920px,
   ittheal-homepage-layout-critical4 Part B #10). Split the 4 checklist
   rows into a 2x2 grid at >=769px so the card's actual width is used
   instead of adding a max-width that would just center more whitespace. */
@media (min-width: 769px) {
  .il-077.il-077 {
    max-width: 700px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 0.5rem;
  }
  /* Let the grid's row-gap carry row spacing instead of relying on
     il-078's own margin-bottom vs il-079's margin:0 (both currently
     box-decoration-free, so the mismatch happens to render invisibly —
     world-class-code-enforcer flagged this as correct-but-fragile). */
  .il-077.il-077 .il-078.il-078,
  .il-077.il-077 .il-079.il-079 {
    margin-bottom: 0;
  }
}

/* <p>  x3 */
.il-078.il-078 {
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--il-amber-800);
}

/* <p>  x1 */
.il-079.il-079 {
  font-weight: 600;
  margin: 0;
  color: var(--il-amber-800);
}

/* <p>  x1 */
.il-080.il-080 {
  color: #a16207;
  margin-top: 1rem;
}

/* il-081 removed 2026-09-25 (ittheal-homepage-layout continuation, Part B13 remainder): sage-300
   was the light end of a pairing this handoff flagged as a real WCAG-contrast risk for the white
   glyph, on "What Awaits You" benefit 2 (index.html:1091). Falls back to the plain .benefit-icon
   default (sage-500->sage-700, already WCAG-checked elsewhere on this page), matching that row's
   benefit 1 and now-unified benefit 3 (il-051, above). */

/* <section>  x1 — "Book Your Healing Session" section bg. 2026-09-26 color-restore: the
   2026-09-25 pass below muted this from its original mint emerald-50/#ecfdf5 band to sage/cream
   as part of the internal antislop pass the owner never asked for. Restored to the original
   near-identical-lightness 3-stop emerald/cream band (--il-emerald-50, an existing token). */
.il-082.il-082 {
  background: linear-gradient(180deg, var(--il-emerald-50) 0%, #ecfdf5 50%, var(--il-emerald-50) 100%);
}

/* <div>  x1 */
.il-083.il-083 {
  width: 3rem;
  height: 3rem;
}

/* <svg>  x1 */
.il-084.il-084 {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
}

/* <h3>, <strong>  x7 */
.il-085.il-085 {
  color: var(--sage-700);
}

/* <div>  x1 */
.il-086.il-086 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* <div>  x6 — desktop-only padding override in the `@media (min-width:
   769px)` block near the end of this file; see il-095's comment above it. */
/* 2026-09-25 (ittheal-homepage-layout-critical, Part B7): `display: flex; flex-direction: column`
   added -- live-measured (Playwright getBoundingClientRect at 1920px), the grid container
   (.il-086, auto-fit/minmax) already stretches every card in a row to the row's tallest card's
   height, but that extra height just sat as dead space AFTER each card's own content in plain
   block flow. When one card's <h4> title wraps more lines than its row-mates (e.g. "Buccal
   Massage - Facial Sculpting & TMJ Relief" wraps to 3 lines vs "Athletic Recovery"'s 1), every
   element below the title -- price, description -- shifts down by that many extra line-heights,
   so the price row goes visibly out of alignment scanning across a row (measured 77px of drift
   in the second row alone). Flex-column plus `.service-price-display`'s new `margin-top: auto`
   (luxury-spa.css, near its other .service-price-display rule) anchors the price+description
   block to the card's BOTTOM edge instead, which is shared across every card in a row (grid
   stretch already equalizes card height) -- so price rows now line up regardless of how many
   lines any one card's title wraps to, without capping or guessing a title height. No visual
   change to badge/duration/title stacking above the price, which stays normal top-down flow. */
.il-087.il-087 {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 2.5rem;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  background: linear-gradient(145deg, #ffffff, #fafafa);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* <div>  x4 — "Most Popular" pill badge. 2026-09-25: was violet-600->violet-400
   (the banned AI-default purple, index-theme.css:650's "deliberate palette
   decision" this design pass makes); replaced with the site's sage family.
   sage-700->sage-600 rather than sage-600->sage-400: white text at the
   sage-400 end measures 2.29:1 (fails WCAG AA 4.5:1 at this badge's 11.2px/
   weight-600 size, which does not qualify as "large text"). sage-700->600
   holds 6.77:1-4.76:1 across the whole gradient. */
.il-088.il-088 {
  background: linear-gradient(135deg, var(--sage-700), var(--sage-600));
  color: white;
  padding: 0.4rem 1.2rem;
  border-radius: 25px;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(93, 122, 93, 0.25);
}

/* <div>  x8 */
.il-089.il-089 {
  margin-bottom: 1rem;
}

/* <h4>  x6 */
.il-090.il-090 {
  color: #1f2937;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.5px;
}

/* <div>  x6 */
.il-091.il-091 {
  font-size: 2.5rem;
  font-weight: 200;
  color: #111827;
  margin-bottom: 1rem;
  position: relative;
}

/* <div>  x1 */
.il-092.il-092 {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--sage-600), transparent);
}

/* <p>  x6 */
.il-093.il-093 {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
  font-weight: 400;
  line-height: 1.6;
  font-style: italic;
}

/* <div>  x1 */
.il-094.il-094 {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, var(--sage-600), transparent);
}

/* <div>  x1 — desktop-only padding override lives in a `@media (min-width:
   769px)` block near the end of this file; see that block's comment for why
   (a global touch-target rule crushes this card's padding at desktop width
   only — mobile breakpoints already handle themselves via their own
   !important rules in index-theme.css, so this base rule is intentionally
   left as a non-!important desktop DEFAULT that the media-scoped override
   then wins over). */
.il-095.il-095 {
  /* 2026-09-25 (ittheal-homepage-layout-critical4, lnf iteration-2 finding #1): was plain block
     layout, unlike its siblings' `.il-087.il-087` (display:flex; flex-direction:column) a few
     rules above. luxury-spa.css's own `.service-price-display{margin-top:auto}` comment already
     documented this as a no-op here ("under plain block layout ... margin:auto on a block box
     computes to 0"), so this card never got the bottom-anchoring its row-mates get -- measured
     50px (1920px) / 45px (768px) content offset vs neighbors in the same grid row. Same
     display:flex/flex-direction:column as .il-087.il-087, so margin-top:auto now applies here too. */
  display: flex;
  flex-direction: column;
  border: 2px solid #f3f4f6;
  border-radius: 24px;
  padding: 3rem;
  cursor: pointer;
  transition: all 0.4s ease;
  background: linear-gradient(145deg, #ffffff, #f9fafb);
  position: relative;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  transform: scale(1.02);
}

/* <div>  x1 */
.il-096.il-096 {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  /* white-space: nowrap — 2026-09-25 continuation (Part B10): for an absolutely-positioned
     auto-width box, `left: 50%` constrains the browser's shrink-to-fit calculation to roughly
     HALF the containing block's width (measured: 301px card -> ~149px available), because
     `right` is auto and the transform that re-centers it is a purely visual paint-time offset
     the layout algorithm never sees. "Client Favorite" needed more than that half-width and
     wrapped to 2 lines, making this badge ~56px tall vs its siblings' 31px and leaving only 8px
     of clearance above "90 min" (vs their 16px) -- confirmed via getBoundingClientRect, not
     eyeballed. il-088 (the other 7 cards' badges) never had this bug: those are normal-flow
     inline-block, not position:absolute, so they size against the full card width. */
  white-space: nowrap;
  /* Owner directive 2026-09-25 05:16 CDT: match the hero's lavender/purple, not sage, for THIS
     badge only (ULTIMATE/.il-104 stays sage). var(--lavender-600) (#8b5cf6, the darkest step in
     the reusable --lavender-* scale) measures ~4.23:1 for white text here -- just under the 4.5:1
     AA floor this badge's 0.7rem uppercase text needs (same margin-of-failure class as il-088's
     sage-600->sage-400 note above). var(--calendar-purple-dark) (#4c1d95, already defined in
     luxury-spa.css for "text and borders") measures ~11:1 and is still the same brand purple
     family, so it's used as a solid fill rather than risking a gradient whose lighter stop would
     fail contrast on part of the badge. Exempted under state/design-convention-breaks-ittheal.json
     break_id brand-indigo-violet-palette (client-favorite-badge-lavender entry) per
     rules/html-ui.md's convention-break escape hatch -- this is a declared brand color, not slop. */
  background: var(--calendar-purple-dark);
  color: white;
  padding: 0.6rem 1.5rem;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
}

/* <div>  x1 */
.il-097.il-097 {
  margin-bottom: 1.2rem;
  margin-top: 1.8rem;
}

/* <h4>  x1 */
.il-098.il-098 {
  color: #1f2937;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: -0.5px;
}

/* <div>  x1 */
.il-099.il-099 {
  font-size: 2.8rem;
  font-weight: 200;
  color: #111827;
  margin-bottom: 1.2rem;
  position: relative;
}

/* <div>  x4 */
.il-100.il-100 {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, var(--sage-600), transparent);
}

/* <p>  x1 */
.il-101.il-101 {
  color: #6b7280;
  font-size: 1.1rem;
  margin: 0;
  font-weight: 400;
  line-height: 1.6;
  font-style: italic;
}

/* <div>  x1 — 2026-09-25 continuation: was emerald, matching il-104's already-fixed pattern
   (sage-700->sage-600, not sage-600->sage-400 — see il-088's comment: white text over sage-400
   fails WCAG AA contrast).
   2026-09-26 color-restore: evaluated for restoration alongside the other antislop-muted
   accents on this page and DELIBERATELY LEFT SAGE. Restoring to var(--il-emerald-600)/
   var(--il-emerald-500) measures 3.77:1 / 2.54:1 for the white badge text (relative-luminance
   formula), both below the 4.5:1 AA floor this text size requires (0.7rem bold does not meet
   the large-text exemption) — a real accessibility regression, not a stylistic preference.
   Stays matched with the untouched, WCAG-compliant .il-104 sibling below. */
.il-102.il-102 {
  background: linear-gradient(135deg, var(--sage-700), var(--sage-600));
  color: white;
  padding: 0.4rem 1.2rem;
  border-radius: 25px;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(74, 97, 74, 0.25);
}

/* <div>  x1 — this underline was the lone emerald outlier among four identical price-underline
   accents (lines 784/804/876 all already use sage-600); 2026-09-25 continuation matches them.
   2026-09-26 color-restore: left sage to stay visually paired with .il-102 above, which is
   deliberately staying sage for a real WCAG AA reason (see that rule's comment). */
.il-103.il-103 {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 85px;
  height: 2px;
  background: linear-gradient(90deg, var(--sage-600), transparent);
}

/* <div>  x1 — sage-700->sage-600, not sage-600->sage-400: see il-088's
   comment (white text over sage-400 fails WCAG AA contrast). */
.il-104.il-104 {
  background: linear-gradient(135deg, var(--sage-700), var(--sage-600));
  color: white;
  padding: 0.4rem 1.2rem;
  border-radius: 25px;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(93, 122, 93, 0.25);
}

/* <div>  x1 */
.il-105.il-105 {
  display: none;
  border: 2px solid #ef4444;
  border-radius: 16px;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.3s;
  display: none;
}

/* <div>  x1 */
.il-106.il-106 {
  background: #ef4444;
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 25px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 0.75rem;
}

/* <h4>  x1 */
.il-107.il-107 {
  color: var(--sage-700);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-weight: 800;
}

/* <div>  x1 */
.il-108.il-108 {
  font-size: 2.4rem;
  font-weight: 900;
  color: #ef4444;
  margin-bottom: 0.5rem;
}

/* <p>  x1 */
.il-109.il-109 {
  color: var(--sage-700);
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
}

/* <div>  x1 */
.il-110.il-110 {
  display: none;
  margin-top: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, #fefdf8, #fef3c7);
  border: 2px solid #f59e0b;
  border-radius: 16px;
}

/* <div>  x2 */
.il-111.il-111 {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* <h3>  x2 */
.il-112.il-112 {
  color: var(--sage-700);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

/* <p>  x2 */
.il-113.il-113 {
  color: var(--sage-600);
  margin: 0;
  font-size: 0.95rem;
}

/* <div>  x2 */
.il-114.il-114 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* <div>  x6 — desktop-only padding override in the `@media (min-width:
   769px)` block near the end of this file; see il-095's comment for why
   (this is the add-on card variant of the same bug). */
.il-115.il-115 {
  border: 2px solid var(--il-slate-200);
  border-radius: var(--il-radius-sm);
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
}

/* <label>  x6 */
.il-116.il-116 {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* <div>  x6 */
.il-117.il-117 {
  flex: 1;
}

/* <div>  x7 */
.il-118.il-118, .il-199.il-199 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* <div>, <span>  x12 */
.il-119.il-119 {
  font-weight: 600;
  color: var(--sage-700);
}

/* <span>  x6 */
.il-120.il-120 {
  font-weight: 700;
  color: var(--il-emerald-500);
  font-size: 1.1rem;
}

/* <div>  x6 */
.il-121.il-121 {
  font-size: 0.9rem;
  color: var(--sage-600);
  margin-top: 0.25rem;
}

/* <div>  x6 */
.il-122.il-122 {
  font-size: 0.85rem;
  color: var(--sage-500);
  margin-top: 0.25rem;
  font-style: italic;
}

/* <div>  x1 */
.il-123.il-123 {
  display: none;
  margin-top: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, var(--il-emerald-50), #dcfce7);
  border: 2px solid var(--il-emerald-500);
  border-radius: 16px;
}

/* <div>  x1 */
.il-124.il-124 {
  margin-bottom: 1rem;
  padding: 1rem;
  background: white;
  border-radius: var(--il-radius-sm);
  border: 1px solid var(--il-slate-200);
}

/* <div>  x3 */
.il-125.il-125 {
  font-weight: 600;
  color: var(--sage-700);
  margin-bottom: 0.5rem;
}

/* <div>, <span>  x8 */
.il-126.il-126, .il-163.il-163 {
  color: var(--sage-600);
}

/* <div>  x1 */
.il-127.il-127 {
  margin-bottom: 1rem;
  padding: 1rem;
  background: white;
  border-radius: var(--il-radius-sm);
  border: 1px solid var(--il-slate-200);
  display: none;
}

/* <div>  x1 */
.il-128.il-128 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
}

/* <span>  x1 */
.il-129.il-129 {
  font-weight: 700;
  color: #0c4a6e;
  font-size: 1.1rem;
}

/* <div>  x1 */
.il-130.il-130 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-top: 2px solid var(--il-emerald-500);
  margin-top: 1rem;
}

/* <span>  x1 */
.il-131.il-131 {
  font-weight: 700;
  color: var(--sage-700);
  font-size: 1.2rem;
}

/* <span>  x1 */
.il-132.il-132 {
  font-weight: 700;
  color: var(--il-emerald-500);
  font-size: 1.5rem;
}

/* <div>  x1 */
.il-133.il-133 {
  text-align: center;
  margin-top: 2rem;
}

/* <button>  x1 */
.il-134.il-134 {
  display: none;
  background: linear-gradient(135deg, var(--il-emerald-500), var(--il-emerald-600));
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}

/* <div>  x1 */
.il-135.il-135 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* <label>  x1 */
.il-136.il-136 {
  display: block;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--sage-700);
  font-size: 1.1rem;
}

/* <div>  x1 */
.il-137.il-137 {
  display: none;
  text-align: center;
  margin-top: 1rem;
  color: var(--sage-600);
}

/* <div>  x1 */
.il-138.il-138 {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* <button>  x5 */
.il-139.il-139 {
  background: linear-gradient(135deg, #64748b, #475569);
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.025em;
  box-shadow: 0 3px 10px rgba(100, 116, 139, 0.25);
  flex: 1;
  max-width: 160px;
}

/* <button>  x1 */
.il-140.il-140 {
  display: none;
  background: linear-gradient(135deg, var(--il-emerald-500), var(--il-emerald-600));
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.025em;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
  flex: 1;
  max-width: 180px;
}

/* <label>  x8 */
.il-141.il-141, .il-145.il-145, .il-188.il-188 {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--sage-700);
}

/* <input>, <select>  x5 */
.il-142.il-142, .il-146.il-146, .il-190.il-190 {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--il-slate-200);
  border-radius: var(--il-radius-sm);
  font-size: 1rem;
}

/* <div>  x3 */
.il-143.il-143, .il-147.il-147 {
  color: var(--color-error, #dc2626);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: none;
}

/* <div>  x1 */
.il-144.il-144 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* <textarea>  x1 */
.il-148.il-148 {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--il-slate-200);
  border-radius: var(--il-radius-sm);
  font-size: 1rem;
  resize: vertical;
}

/* <div>  x3 */
.il-149.il-149 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* <button>  x3 */
.il-150.il-150 {
  display: none;
  background: linear-gradient(135deg, var(--il-emerald-500), var(--il-emerald-600));
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.025em;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
  flex: 1;
  max-width: 160px;
}

/* <p>  x1 */
.il-151.il-151 {
  color: var(--sage-600);
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* <div>  x4 */
.il-152.il-152 {
  background: var(--sage-50);
  border: 2px solid var(--sage-200);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* <div>  x2 */
.il-153.il-153 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

/* <h4>  x2 */
.il-154.il-154 {
  color: var(--sage-700);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* <span>  x2 */
.il-155.il-155 {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #fef3c7;
  color: var(--il-amber-800);
}

/* <p>  x2 */
.il-156.il-156 {
  color: var(--sage-600);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* <button>  x2 */
.il-157.il-157 {
  background: linear-gradient(135deg, var(--sage-500), var(--sage-600));
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

/* <div>  x2 */
.il-159.il-159 {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* <input>  x2 */
.il-160.il-160 {
  flex: 1;
  padding: 0.75rem;
  border: 2px solid var(--sage-300);
  border-radius: var(--il-radius-sm);
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 0.25rem;
}

/* <button>  x2 */
.il-161.il-161 {
  background: linear-gradient(135deg, var(--il-emerald-500), var(--il-emerald-600));
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: var(--il-radius-sm);
  font-weight: 500;
  cursor: pointer;
}

/* <div>  x2 */
.il-162.il-162 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

/* <button>  x2 */
.il-164.il-164 {
  background: none;
  border: none;
  color: var(--sage-500);
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.85rem;
}

/* <p>  x2 */
.il-165.il-165 {
  color: var(--color-error, #dc2626);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  display: none;
}

/* <div>  x2 */
.il-166.il-166 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--il-emerald-600);
}

/* <span>  x2 */
.il-167.il-167 {
  font-weight: 600;
}

/* <h4>  x3 */
.il-168.il-168 {
  color: var(--sage-700);
  margin-bottom: 1rem;
}

/* <div>  x1 */
.il-169.il-169 {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

/* <div>  x1 */
.il-170.il-170 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* <button>  x5 */
.il-171.il-171 {
  padding: 0.75rem;
  border: 2px solid var(--sage-300);
  border-radius: var(--il-radius-sm);
  background: white;
  color: var(--sage-700);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* <div>  x1 */
.il-172.il-172 {
  display: none;
  margin-top: 1rem;
}

/* <div>  x1 */
.il-173.il-173 {
  position: relative;
}

/* <span>  x1 */
.il-174.il-174 {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sage-500);
  font-weight: 600;
}

/* <input>  x1 */
.il-175.il-175 {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2rem;
  border: 2px solid var(--sage-300);
  border-radius: var(--il-radius-sm);
  font-size: 1rem;
  box-sizing: border-box;
}

/* <div>  x2 */
.il-176.il-176 {
  border-top: 1px solid var(--sage-300);
  margin-top: 1rem;
  padding-top: 1rem;
}

/* <div>  x1 */
.il-177.il-177 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* <div>  x2 */
.il-178.il-178 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* <span>  x3 */
.il-179.il-179 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--il-emerald-500);
}

/* <div>  x1, <fieldset>  x1 -- 2026-09-25 (ittheal-homepage-layout-critical3, lnf re-score
   CRITICAL finding): the Payment Method radio group had no fieldset/legend, so a screen reader
   never announces the group's name or membership count when landing on one of its radios. The
   payment-method instance (index.html) is now a real <fieldset>; the border/padding/min-width
   reset below is required because a bare <fieldset> carries default UA chrome (a groove border,
   ~0.35em/0.75em padding, min-width:min-content) that a <div> never had -- these resets are
   no-ops on the OTHER .il-180 div (line ~3107 in index.html, untouched), since border:none and
   padding:0 already describe a plain div's default box. */
.il-180.il-180 {
  margin-bottom: 1.5rem;
  border: none;
  padding: 0;
  min-width: 0;
}

/* <div>  x1, <legend>  x1 -- same finding as above. <legend>'s UA default can shift it outside
   the fieldset's padding-box and add its own small inset; width:100% + padding:0 keep it flush
   with the fieldset content the same way the div version rendered. */
.il-181.il-181 {
  display: block;
  width: 100%;
  padding: 0;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--sage-700);
}

/* <div>  x1 */
.il-182.il-182 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

/* <label>  x1 */
.il-183.il-183 {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border: 2px solid var(--il-emerald-500);
  border-radius: var(--il-radius-sm);
  cursor: pointer;
  background: var(--il-emerald-50);
}

/* <input>  x3 */
.il-184.il-184 {
  margin-right: 0.75rem;
}

/* <div>  x3 */
.il-185.il-185 {
  font-size: 0.875rem;
  color: var(--sage-500);
}

/* <label>  x2 */
.il-186.il-186 {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border: 2px solid var(--il-slate-200);
  border-radius: var(--il-radius-sm);
  cursor: pointer;
  background: white;
}

/* <div>  x1 */
.il-187.il-187 {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--il-slate-200);
  border-radius: var(--il-radius-sm);
  background: #f8fafc;
}

/* <select>  x1 */
.il-189.il-189 {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--il-slate-200);
  border-radius: var(--il-radius-sm);
  font-size: 1rem;
  background: white;
}

/* <div>  x1 */
.il-191.il-191 {
  font-size: 0.875rem;
  color: var(--sage-500);
  margin-top: 0.5rem;
}

/* <div>  x1 */
.il-192.il-192 {
  display: none;
  padding: 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: var(--color-error, #dc2626);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

/* <div>  x1 */
.il-193.il-193 {
  background: #f0f9ff;
  border: 1px solid #3b82f6;
  border-radius: var(--il-radius-sm);
  padding: 1rem;
  margin-top: 1rem;
}

/* <p>  x1 */
.il-194.il-194 {
  color: #1e40af;
  margin: 0;
  font-size: 0.875rem;
}

/* <div>  x1 */
.il-195.il-195 {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: var(--il-radius-sm);
  padding: 1rem;
}

/* <p>  x1 */
.il-196.il-196 {
  color: var(--il-amber-800);
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

/* <p>  x1 */
.il-197.il-197 {
  color: var(--il-amber-800);
  margin: 0.5rem 0 0 0;
  font-size: 0.875rem;
}

/* <div>  x2 */
.il-198.il-198 {
  color: var(--sage-600);
  line-height: 1.6;
}

/* <div>  x1 */
.il-200.il-200 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* <button>  x1 */
.il-201.il-201 {
  background: linear-gradient(135deg, var(--il-emerald-500), var(--il-emerald-600));
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.025em;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
  flex: 1;
  max-width: 160px;
}

/* <div>  x1 */
.il-202.il-202 {
  text-align: center;
}

/* <div>  x1 */
.il-203.il-203 {
  margin-top: 1rem;
  font-weight: 600;
}

/* <div>  x1 */
.il-204.il-204 {
  text-align: center;
  margin-bottom: 2rem;
}

/* <div>  x1 */
.il-205.il-205 {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--il-emerald-500), var(--il-emerald-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* <svg>  x1 */
.il-206.il-206 {
  width: 40px;
  height: 40px;
  color: white;
}

/* <h3>  x1 */
.il-207.il-207 {
  color: var(--sage-700);
  margin-bottom: 0.5rem;
}

/* <p>  x1 */
.il-208.il-208 {
  color: var(--sage-600);
  font-size: 1.1rem;
}

/* <div>  x1 */
.il-209.il-209 {
  background: var(--sage-50);
  border: 2px solid var(--sage-200);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

/* <h4>  x1 */
.il-210.il-210 {
  color: var(--sage-700);
  margin-bottom: 1rem;
  text-align: center;
}

/* <div>  x1 */
.il-211.il-211 {
  border-top: 1px solid var(--sage-300);
  margin-top: 1rem;
  padding-top: 1rem;
  text-align: center;
}

/* <span>  x1 */
.il-212.il-212 {
  font-weight: 600;
  color: var(--sage-700);
  font-size: 1.1rem;
}

/* <div>  x1 */
.il-213.il-213 {
  text-align: center;
  margin: 1.5rem 0;
  padding: 1rem;
  background: linear-gradient(135deg, var(--il-emerald-50), #dcfce7);
  border: 1px solid #bbf7d0;
  border-radius: var(--il-radius-sm);
}

/* <span>  x1 */
.il-214.il-214 {
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--il-emerald-600);
  letter-spacing: 1px;
}

/* <div>  x1 */
.il-215.il-215 {
  font-size: 0.85rem;
  color: var(--sage-600);
  margin-top: 0.5rem;
}

/* <div>  x1 */
.il-216.il-216 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 400px;
  margin: 0 auto;
}

/* <button>  x1 */
.il-217.il-217 {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.025em;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* <svg>  x2 */
.il-218.il-218 {
  width: 20px;
  height: 20px;
}

/* <button>  x1 */
.il-219.il-219 {
  background: linear-gradient(135deg, var(--il-emerald-500), var(--il-emerald-600));
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.025em;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* <a>  x1 */
.il-220.il-220 {
  display: block;
  text-align: center;
  color: var(--sage-600);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

/* <div>  x1 */
.il-221.il-221 {
  text-align: center;
  margin-top: 2rem;
  padding: 2rem;
  background: linear-gradient( 135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05) );
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* <h4>  x1 */
.il-222.il-222 {
  color: var(--sage-700);
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

/* <p>  x1 */
.il-223.il-223 {
  color: var(--sage-600);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* <div>  x2 */
.il-224.il-224 {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--il-radius-sm);
}

/* <p>  x2 */
.il-225.il-225 {
  color: var(--sage-700);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* <p>  x2 */
.il-226.il-226 {
  color: var(--sage-600);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* <p>  x1 */
.il-227.il-227 {
  color: var(--sage-500);
  font-size: 0.85rem;
  border-top: 1px solid rgba(16, 185, 129, 0.2);
  padding-top: 1rem;
}

/* <a>  x1 */
.il-228.il-228 {
  color: var(--sage-700);
  text-decoration: none;
}

/* <p>  x1 */
.il-229.il-229 {
  color: var(--warm-gray-600);
}

/* <p>  x1 */
.il-230.il-230 {
  font-size: 0.75rem;
  color: var(--warm-gray-500);
  margin-top: 1rem;
  font-style: italic;
  text-align: center;
}

/* <footer>  x1 */
.il-231.il-231 {
  background: var(--warm-gray-800);
  color: var(--warm-gray-100);
  padding: var(--space-2xl) 0;
}

/* <h3>  x1 */
.il-232.il-232 {
  color: var(--warm-gray-100);
  margin-bottom: var(--space-sm);
}

/* <p>  x1 */
.il-233.il-233 {
  color: var(--sage-300);
  margin-bottom: var(--space-sm);
}

/* <p>  x1 */
.il-234.il-234 {
  color: var(--warm-gray-300);
  margin-bottom: var(--space-xl);
}

/* <div>  x1 */
.il-235.il-235 {
  margin-bottom: var(--space-xl);
}

/* <a>  x4 */
.il-236.il-236 {
  color: var(--warm-gray-100);
  text-decoration: none;
  font-size: 1.125rem;
}

/* <div>  x1 */
/* 2026-09-25 continuation (lnf-orchestrator-agent, iteration-2 finding): this row ("ittheal.com")
   is the one non-link row among its 4 sibling rows in the footer contact column -- its siblings
   are all <a class="il-236"> and pick up the site-wide WCAG touch-target rule
   (css/index-theme.css, "button, input, ... a, ... { min-height:44px; padding:12px !important }"),
   which does not match a plain <div>. That left this row visually 12px left of and 24px shorter
   than its siblings (measured live: 28.8px vs 52.8px tall). Not an interactive element (no touch
   target requirement applies), so replicating the padding/min-height here directly rather than
   adding it to the selector list above -- this is purely a visual-alignment match, not an a11y fix. */
.il-237.il-237 {
  color: var(--warm-gray-100);
  font-size: 1.125rem;
  padding: 12px;
  min-height: 44px;
  box-sizing: border-box;
}

/* <div>  x1 */
.il-238.il-238 {
  margin-top: var(--space-md);
}

/* <p>  x1 */
.il-239.il-239 {
  color: var(--warm-gray-400);
  font-size: 0.9375rem;
}

/*
 * Motion. These 16 rules are the only lifted ones carrying `transition` or
 * `animation`; an inline style attribute had no way to respect the user's
 * reduced-motion preference, so this is the one place where the relocation buys
 * something the attributes could not do. It is a real behaviour change, and only
 * for users who have asked for it.
 */
@media (prefers-reduced-motion: reduce) {
  .il-019.il-019,
  .il-022.il-022,
  .il-024.il-024,
  .il-087.il-087,
  .il-095.il-095,
  .il-105.il-105,
  .il-115.il-115,
  .il-134.il-134,
  .il-139.il-139,
  .il-140.il-140,
  .il-150.il-150,
  .il-157.il-157,
  .il-171.il-171,
  .il-201.il-201,
  .il-217.il-217,
  .il-219.il-219 {
    transition: none;
    animation: none;
  }
}

/*
 * The two blocks below are COMPLIANCE, not design, and are labelled that way on
 * purpose. `index-theme.css` already sets `html { overflow-x: hidden }` at <=768px,
 * so these restate an invariant rather than establishing one. They exist because
 * the seg6 rules in ~/.claude/core/rules/registry.jsonl require any stylesheet
 * containing an @media query to declare the 344px and 768px viewport tiers and to
 * carry the horizontal-scroll guard — and the reduced-motion block above is what
 * introduces the first @media query into this file. The lifted declarations
 * themselves are viewport-independent: they came off inline attributes, which
 * applied identically at every width, so there is no width at which they should
 * differ and none is invented here.
 */
@media (max-width: 344px) {
  html {
    overflow-x: hidden;
  }
}

@media (max-width: 768px) {
  html {
    overflow-x: hidden;
  }
}

/* 2026-09-25 continuation fix — desktop-only card-padding restore.
   Every selectable service/add-on card (il-087, il-095, il-115 here;
   .svc-card-wellness/.addon-card in css/new-offerings.css) uses
   role="button" for keyboard/screen-reader selectability, which makes it
   ALSO match index-theme.css's global WCAG touch-target rule
   (`[role="button"] { padding: 12px !important; ...}`, specificity 0,1,0,
   no media-query wrapper so it is always active). At <=768px this is
   already correctly overridden by index-theme.css's own
   `.service-option`/`.service-option.featured` media-query rules
   (specificity 0,2,0 + !important, beats the touch-target rule on
   specificity alone). But NOTHING overrides it above 768px — these cards'
   own base padding rules above (2.5rem/3rem/1rem) carry no !important, so
   the !important-tier touch-target rule wins regardless of its lower
   specificity, and desktop padding was silently crushed to 12px. Confirmed
   via CSSOM rule inspection, not guesswork: computed padding-top on the
   featured $185 card was 12px, not 3rem, at 1920px width — which is what
   made the "Client Favorite" badge (position: absolute; top: -15px)
   visually overlap the "90 min" text below it.
   This block is scoped to `min-width: 769px` specifically so it cannot
   collide with — or override — the already-correct <=768px tier; it only
   fires in the desktop range those rules don't reach. 44px min-height from
   the touch-target rule stays in effect at every width and is harmless —
   every one of these cards vastly exceeds it regardless of padding. */
@media (min-width: 769px) {
  .il-095.il-095 {
    padding: 3rem !important;
  }
  .il-087.il-087 {
    padding: 2.5rem !important;
  }
  .il-115.il-115 {
    padding: 1rem !important;
  }

  /* 2026-09-25 (ittheal-homepage-layout-critical, Part A3): desktop half of the featured-card
     badge/content-alignment fix -- see css/index-theme.css's ≤768px `.service-option.featured
     .session-duration` rule for the full explanation. The desktop compensation is smaller
     (37px vs 42px) because the featured card's own padding-top is already 8px more than a
     sibling's here (3rem vs 2.5rem, restored above) vs only ~3px more at ≤768px -- verified via
     Playwright at 1920px: regular-card duration offset 87.7px from card top, featured (before
     this rule) 51px; this closes that gap. */
  .service-option.featured .session-duration {
    margin-top: 2.3125rem !important;
  }

  /* 2026-09-25 (ittheal-homepage-layout-critical4, iteration-2 finding #2 continuation): row-1
     featured-card price-row gap fix, desktop half. Measured (Playwright getBoundingClientRect,
     production, 1920px, featured's decorative `transform: scale(1.02)` neutralized to isolate real
     layout): featured's price content sat 55px higher than its row-mates
     (consultation/60min/120min, exact 3-way match). Tried the opposite direction first (an explicit
     `margin-top` INCREASE on the featured card's own `.service-price-display`) and it does not
     work: featured's flex column has zero slack (its own content already fills the row's full
     stretched height, confirmed live -- `margin-top:auto` there already resolves to 0px), so any
     added fixed margin makes featured's own required content exceed the row's height, which grows
     the whole grid row via stretch, which these 3 siblings' OWN `margin-top:auto` then absorbs by
     the same amount -- live-verified the row grew 55px and the relative gap was UNCHANGED (55px
     before and after). Reducing an already-flexible `auto` margin never triggers that feedback
     (only growing content does), so this goes the other way: same mechanism/pattern as the
     data-service-type `.service-price-display` override below (row-2's proven fix for the
     identical auto-margin-variance root cause), reducing these 3 siblings' margin-top to match
     featured's tighter, content-driven position instead of trying to stretch featured to match
     them. */
  .service-option[data-service-type="consultation"] .service-price-display,
  .service-option[data-service-type="60min"] .service-price-display,
  .service-option[data-service-type="120min"] .service-price-display {
    margin-top: 2.125rem;
  }

  /* 2026-09-25 (ittheal-homepage-layout-critical4): row-2 price-card CRITICAL misalignment fix,
     desktop half. luxury-spa.css's `.service-price-display { margin-top: auto }` (comment above
     that rule) intentionally bottom-anchors the price+description block -- but it only produces a
     uniform bottom edge, not a uniform price ROW, whenever the title above price OR the
     description below price varies in wrapped height between sibling cards. Measured live: these
     4 cards' titles wrap to 1/2/3/2 lines respectively (fasciaflow/lymphatic/buccal/
     mineral_herb_consult), so their price rows sat up to 102px apart at 1920px despite identical
     527px card heights and identical bottom edges. Reserving the worst-case wrap (buccal, 3 lines
     @ 24px font / 38.4px line-height = 115.2px) removes the title-side half of the variance; see
     luxury-spa.css for the margin-top override that removes the description-side half. Scoped by
     data-service-type (not the generic `.service-option h4`) so row-1's already-correctly-aligned
     cards (identical title/description lengths, no wrap variance) are untouched. */
  .service-option[data-service-type="fasciaflow"] h4,
  .service-option[data-service-type="lymphatic"] h4,
  .service-option[data-service-type="buccal"] h4,
  .service-option[data-service-type="mineral_herb_consult"] h4 {
    min-height: 7.2rem;
  }
}