/*
 * index-theme.css — moved out of the <style> block that sat at index.html:82-674.
 * CLAUDE.md bans embedded <style> tags; this file is linked from the exact
 * document position the block occupied, so cascade order against the other head
 * stylesheets (and css/desktop.css, linked immediately after) is unchanged.
 *
 * The move is otherwise verbatim. Two declarations are NOT literal copies, both
 * required by the house rule registry and both recorded here rather than left to
 * be discovered in a diff:
 *
 *   1. The #contact-info field radius now reads `var(--radius-md)`, with
 *      --radius-md defined as 8px below: identical computed value, named radius
 *      instead of a repeated magic number (html-ui.md anti-slop).
 *   2. `html { overflow-x: hidden }` at <=768px is NEW — the horizontal-scroll
 *      guard html-ui.md mandates for any file carrying a mobile breakpoint. This
 *      page has a position:sticky header (luxury-spa.css:237, :1024); the guard
 *      is placed on `html` and not on an intermediate container precisely
 *      because html IS the viewport scroller, so sticky keeps working, whereas
 *      an intervening scroll container is what actually breaks it.
 *
 * The selectors below key off `il-NNN` classes defined in css/inline-lifted.css,
 * which carry the declarations index.html used to hold as inline `style`
 * attributes. index.html no longer has a single inline style attribute, so
 * there is no longer any dependency on markup attributes here — but there IS a
 * dependency on the class names, so a rename in inline-lifted.css must be made
 * in lockstep with these selectors.
 *
 * Each mapping was derived from the pre-refactor DOM with ancestor tracking, not
 * from a text search: a substring can appear in a declaration on an element that
 * the old selector never matched, because the selector also required a
 * `.addon-option` / `.service-option` ancestor. `il-016` is the worked example —
 * it carries `font-size: 2.5rem` but sits outside `.service-option`, so it is
 * correctly absent from the `.service-option div.il-091` rules below.
 */

      /* Luxury Spa Theme Color Variables */
      :root {
        /* --sage-50 … --sage-800: declared ONLY in css/sage-palette.css (single source). */
        --spa-charcoal: #2d3e2d;
        --spa-gray: #6b7280;
        --spa-sage-light: #f8faf8;
        --warm-gray-50: #fafaf9;
        --warm-gray-800: #292524;
        --beige-soft: #f5f4f0;
        /* --ocean-mist: declared ONLY in luxury-spa.css (single source, alongside the other
           non-sage tokens --sage-accent/--neutral/--neutral-dark). This file used to shadow it
           with a near-identical hue (#b8d4d4 vs luxury-spa.css's #b8e0d2) since it loads later
           and both target :root — removed 2026-09-25 (ittheal-homepage-layout continuation). */
        /* Field corner radius, named so it is not re-typed as a magic number. */
        --radius-md: 8px;
        /* Service-card accent. 2026-09-25: was violet (`#7c3aed`/`#6d28d9`, the
           banned AI-default purple) — this is the "deliberate palette decision in
           a design pass" the hover-rule comment below used to say was still owed.
           Repointed to the site's sage family (css/sage-palette.css) so the
           hover-enhance state deepens the same sage the base badges now use
           (css/inline-lifted.css il-088/il-096/il-104), rather than swapping hue
           on hover. Named `--accent-sage-*` rather than reusing `--sage-700/800`
           directly so this file keeps one place to repoint the accent later. */
        --accent-sage-700: var(--sage-700, #4a614a);
        --accent-sage-800: var(--sage-800, #3d4f3d);
      }
      /* 2026-09-25 (ittheal-homepage-layout-critical, Part A1): `.itt-header { height: 160px
         !important }` used to be repeated here at all 4 breakpoints (base/768/480/344) AS WELL AS
         in luxury-spa.css's own `.itt-header` base rule + its 3 media blocks -- 8 copies of the
         identical value across 2 files, called out in the LNF audit as a duplication risk (a fix
         to one copy silently not reaching the other 7). luxury-spa.css:1364/1529/1568/1599 is now
         the single source for `.itt-header` height at every breakpoint; consolidated out of this
         file rather than left duplicated. */
      .itt-company-name {
        font-size: 1.5rem !important;
      }
      .itt-tagline {
        font-size: 1.5rem !important;
      }
      @media (max-width: 768px) {
        /* Horizontal-scroll guard (html-ui.md §Mobile Responsiveness). */
        html {
          overflow-x: hidden;
        }
        .itt-company-name {
          font-size: 1.3rem !important;
        }
        .itt-tagline {
          font-size: 1.2rem !important;
        }
      }
      @media (max-width: 480px) {
        .itt-company-name {
          font-size: 1.1rem !important;
        }
        .itt-tagline {
          font-size: 1rem !important;
        }

        /* Step 2 datetime-selection mobile fixes for small screens */
        #datetime-selection > div:nth-child(2) {
          display: block !important;
          grid-template-columns: none !important;
          gap: 1.5rem !important;
        }

        #datetime-selection .calendar-viewport-wrapper {
          width: 100% !important;
          max-width: 350px !important;
          margin: 0 auto !important;
        }

        #booking-time {
          height: 44px !important;
          font-size: 1rem !important;
        }
      }

      /* Global hamburger menu fix - all screen sizes */
      .itt-hamburger-line {
        width: 32px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        background-color: #2d3748 !important;
      }

      @media (max-width: 344px) {
        .itt-company-name {
          font-size: 1rem !important;
        }
        .itt-tagline {
          font-size: 0.9rem !important;
        }

        /* Step 2 datetime-selection mobile fixes */
        #datetime-selection > div:nth-child(2) {
          display: block !important;
          grid-template-columns: none !important;
          gap: 1.5rem !important;
        }

        #datetime-selection .calendar-viewport-wrapper {
          width: 100% !important;
          max-width: 320px !important;
          margin: 0 auto !important;
        }

        #datetime-selection label {
          font-size: 1rem !important;
          margin-bottom: 0.75rem !important;
        }

        #booking-time {
          width: 100% !important;
          height: 44px !important;
          font-size: 0.9rem !important;
          padding: 0.5rem !important;
        }

        /* Step 1 summary display mobile responsiveness */
        #base-service-info,
        #selected-addons,
        #total-session-time,
        #total-session-price {
          font-size: 0.9rem !important;
          margin-top: 0.5rem !important;
          padding: 0.25rem !important;
        }

        #total-session-price {
          font-size: 1.2rem !important;
        }

        /* COMPREHENSIVE TEXT CONTAINMENT SOLUTION FOR 344PX */
        @media (max-width: 344px) {
          /* AGGRESSIVE container width constraint - multiple fallbacks */
          .addon-option {
            max-width: calc(344px - 2rem) !important;
            max-width: 312px !important; /* Fallback for calc() issues */
            width: 100% !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
            padding: 0.75rem !important;
            contain: layout style !important; /* CSS containment */
          }

          /* More specific selector for flex containers */
          .addon-option div.il-118 {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 0.5rem !important;
            width: 100% !important;
          }

          /* Target specific title spans with better specificity */
          .addon-option span.il-119 {
            max-width: 280px !important;
            overflow-wrap: break-word !important;
            word-wrap: break-word !important;
            hyphens: auto !important;
            line-height: 1.2 !important;
            display: block !important;
            font-size: 0.8rem !important;
            margin-bottom: 0.5rem !important;
          }

          /* Price spans positioning */
          .addon-option span.il-120 {
            margin-top: 0.5rem !important;
            display: block !important;
            font-size: 0.75rem !important;
            max-width: 280px !important;
            overflow-wrap: break-word !important;
          }

          /* Fix inner flex containers */
          .addon-option div.il-117 {
            min-width: 0 !important;
            overflow: hidden !important;
            width: 100% !important;
            flex: none !important;
          }

          /* Fix label containers */
          .addon-option label.il-116 {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 0.5rem !important;
          }

          /* Input positioning */
          .addon-option input[type='checkbox'] {
            margin-bottom: 0.5rem !important;
            align-self: flex-start !important;
          }

          /* Description text */
          .addon-option div.il-121 {
            font-size: 0.75rem !important;
            line-height: 1.3 !important;
            max-width: 280px !important;
            overflow-wrap: break-word !important;
            margin-top: 0.3rem !important;
          }

          /* Review text */
          .addon-option div.il-122 {
            font-size: 0.7rem !important;
            line-height: 1.2 !important;
            max-width: 280px !important;
            overflow-wrap: break-word !important;
            margin-top: 0.3rem !important;
          }

          /* Small tags within price spans */
          .addon-option small {
            font-size: 0.65rem !important;
            display: inline !important;
            white-space: nowrap !important;
          }

          /* ULTRA-AGGRESSIVE FALLBACK: Force ALL text elements to fit */
          .addon-option * {
            max-width: 280px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
          }

          /* Allow multiline for specific elements */
          .addon-option span.il-119,
          .addon-option div.il-121,
          .addon-option div.il-122 {
            white-space: normal !important;
            overflow-wrap: break-word !important;
            word-break: break-word !important;
          }
        }

        .addon-option div.il-121 {
          font-size: 0.7rem !important;
          line-height: 1.2 !important;
        }

        .addon-option div.il-122 {
          font-size: 0.65rem !important;
          line-height: 1.1 !important;
        }

        /* Mobile-specific hamburger size adjustment */
        .itt-hamburger-line {
          width: 24px !important;
          height: 2px !important;
        }

        /* Add-ons section mobile fix */
        .addon-options {
          gap: 0.75rem !important;
        }

        .addon-option {
          padding: 0.75rem !important;
        }

        .addon-option label {
          font-size: 0.9rem !important;
        }

        .addon-option span {
          font-size: 0.85rem !important;
        }

        /* Fix addon text overflow on mobile */
        .addon-option div.il-118 {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 0.5rem !important;
        }

        .addon-option div.il-117 {
          min-width: 0 !important;
          overflow: hidden !important;
        }

        .addon-option span {
          overflow-wrap: break-word !important;
          hyphens: auto !important;
          max-width: 100% !important;
        }

        /* Step 1: Service Selection - 344px fixes */
        .service-options {
          display: block !important;
          grid-template-columns: none !important;
          gap: 1rem !important;
        }

        .service-option {
          padding: 1.2rem !important;
          border-radius: 12px !important;
          margin-bottom: 1rem !important;
        }

        .service-option.featured {
          padding: 1.4rem !important;
          transform: none !important;
          margin: 1rem 0 !important;
        }

        .service-option h4 {
          font-size: 1.1rem !important;
          margin: 0.5rem 0 !important;
        }

        .service-option div.il-091 {
          font-size: 1.8rem !important;
        }

        .service-option div.il-099 {
          font-size: 2rem !important;
        }

        .service-option p {
          font-size: 0.85rem !important;
          line-height: 1.4 !important;
        }

        /* Step 3: Contact Info - 344px fixes */
        #contact-info {
          padding: 0 0.5rem !important;
        }

        #contact-info input,
        #contact-info textarea,
        #contact-info select {
          width: 100% !important;
          height: 44px !important;
          font-size: 0.9rem !important;
          padding: 0.5rem !important;
          border-radius: var(--radius-md) !important;
          box-sizing: border-box !important;
        }

        #contact-info textarea {
          height: 80px !important;
          resize: vertical !important;
        }

        #contact-info label {
          font-size: 0.9rem !important;
          margin-bottom: 0.5rem !important;
        }

        /* 2026-09-25 (ittheal-homepage-layout-critical, Part B9): `.btn-primary` removed from this
           selector -- investigated the actual live markup/JS this page loads (booking-client.js,
           not booking-engine.js) and found this page's real booking-step nav buttons use
           `il-139`/`il-140`/`il-150` (step2/step3 prev/next), never `.btn-primary`; the class
           bleed had no live booking-step target on this page to protect at all. Its only live
           effect was forcing the two homepage MARKETING buttons ("Book via Web", "Send a gift
           card", both `.btn-luxury.btn-primary`, index.html) to a fixed 44px height / small font /
           full-width treatment meant for compact in-widget step buttons. `.next-step-btn` /
           `.prev-step-btn` are likewise dead on this page (no matching class anywhere in
           index.html or any script it loads) -- left as-is rather than removed, since they match
           nothing here either way and removing them is a separate cleanup with no live effect to
           verify. */
        .next-step-btn,
        .prev-step-btn {
          width: 100% !important;
          height: 44px !important;
          font-size: 0.9rem !important;
          padding: 0.5rem 1rem !important;
          margin: 0.5rem 0 !important;
          box-sizing: border-box !important;
        }

        /* Step headings mobile fix */
        .subsection-heading {
          font-size: 1.2rem !important;
          margin-bottom: 1rem !important;
        }
      }

      /* CRITICAL: Hamburger menu size override */
      .itt-hamburger {
        width: 60px !important;
        height: 60px !important;
        padding: 12px !important;
      }
      .itt-hamburger-line {
        width: 39px !important;
        height: 2px !important;
      }
      @media (max-width: 768px) {
        .itt-hamburger {
          width: 55px !important;
          height: 55px !important;
        }
        .itt-hamburger-line {
          width: 36px !important;
          height: 2px !important;
        }
      }
      @media (max-width: 480px) {
        .itt-hamburger {
          width: 50px !important;
          height: 50px !important;
        }
        .itt-hamburger-line {
          width: 34px !important;
          height: 2px !important;
        }
      }
      @media (max-width: 344px) {
        .itt-hamburger {
          width: 45px !important;
          height: 45px !important;
        }
        .itt-hamburger-line {
          width: 32px !important;
          height: 2px !important;
        }
        /* Fix mobile menu for 344px screens */
        .mobile-menu-content {
          width: 100% !important;
          max-width: 344px !important;
          right: 0 !important;
          left: 0 !important;
          padding: 1.5rem 1rem !important;
        }
        .mobile-menu-link {
          font-size: 16px !important;
          padding: 12px 10px !important;
        }
        .close-menu {
          width: 44px !important;
          height: 44px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }

        /* The #card-element geometry rules that used to sit here are DELETED, not
           renamed onto #payment-element. They capped the mount at max-width 320px with
           overflow:hidden and pinned its iframe to max-width 300px / height 40px (280px
           and scale(0.95) below 480px). That is right for a one-line Card Element and
           would guillotine a Payment Element, whose accordion expands per method
           (card / Link / Apple Pay) to several hundred pixels. Sizing the field is now
           the module's job: js/shared-payment-element.js owns it via APPEARANCE. */

        #credit-card-section {
          margin: 0.5rem 0 !important;
        }

        #credit-card-section > div {
          margin: 0.75rem 0 !important;
          padding: 0.75rem !important;
        }

        /* SCOPED TO #nsc-card-element ON PURPOSE -- do not widen these back to a bare
           .StripeElement selector. Stripe puts the .StripeElement class on the MOUNT
           CONTAINER, so unscoped they also match #payment-element, and
           `height: auto !important` there beats the inline pixel height Stripe writes
           on its own iframe and updates as the accordion expands; an iframe at `auto`
           falls back to the replaced-element default, rendering the expanded form
           clipped with a live Pay button beneath it. booking-client.js:5484 still
           mounts a classic Card Element as #nsc-card-element for the separate no-show
           protection SetupIntent flow, which is the surface these rules exist to style. */
        #nsc-card-element.StripeElement {
          width: 100% !important;
          box-sizing: border-box !important;
          overflow: hidden !important;
        }

        #nsc-card-element iframe {
          width: 100% !important;
          height: auto !important;
          min-height: 40px !important;
        }

        #nsc-card-element input {
          letter-spacing: 0.05em !important;
          font-family:
            'SFMono-Regular', 'Monaco', 'Inconsolata', 'Liberation Mono', 'Courier New', monospace !important;
          word-spacing: 0.1em !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
        }

        @media (max-width: 480px) {
          #nsc-card-element input {
            font-size: 15px !important;
            letter-spacing: 0.03em !important;
          }
        }

        /* Credit cards accepted image responsiveness */
        #credit-card-section img {
          height: 40px !important;
          max-width: 220px !important;
        }

        /* Strip Link option styling */
        label[for='use-strip-link'] {
          padding: 0.5rem !important;
          font-size: 0.8rem !important;
        }

        label[for='use-strip-link'] div:first-child {
          font-size: 0.8rem !important;
        }

        label[for='use-strip-link'] div:last-child {
          font-size: 0.7rem !important;
        }

        /* Payment instructions */
        #credit-card-section p {
          font-size: 0.75rem !important;
          line-height: 1.4 !important;
        }
      }

      /* Focus indicators - 3px solid #ffd700 for all interactive elements */
      input:focus,
      select:focus,
      button:focus,
      a:focus {
        outline: 3px solid #ffd700 !important;
        outline-offset: 2px;
      }

      /* High contrast mode support */
      @media (prefers-contrast: high) {
        #booking-date,
        #booking-time {
          border-color: #000 !important;
          background-color: #fff !important;
        }
        #date-availability-info {
          background-color: #000 !important;
          color: #fff !important;
          padding: 0.5rem;
          border: 2px solid #fff;
        }
        #closed-date-warning {
          background-color: #ff0000 !important;
          color: #fff !important;
        }
      }

      /* Touch target minimum size compliance - WCAG 2.1 AA */
      button,
      input,
      select,
      textarea,
      a,
      .clickable,
      .calendar-day,
      .service-card,
      .addon-option label,
      .step-nav button,
      [role='button'],
      [onclick],
      [ontouch],
      #booking-date,
      #booking-time,
      #client-name,
      #client-email,
      #client-phone {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
      }

      /* Ensure input fields maintain proper sizing */
      input[type='text'],
      input[type='email'],
      input[type='tel'],
      input[type='date'],
      input[type='time'],
      select,
      textarea {
        min-height: 48px !important;
        padding: 12px 16px !important;
      }

      /* Screen reader only content */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* Enhanced keyboard navigation */
      #booking-date:focus-visible,
      #booking-time:focus-visible {
        box-shadow: 0 0 0 3px #ffd700;
      }

/* ===================================================================
   Luxury Service Card Hover Effects — the SECOND <style> block, which
   sat in the body at index.html:3415-3481, appended here rather than
   given its own file.

   Why appending is cascade-equivalent: that block was the last CSS in
   document order, after css/desktop.css. Nothing else that index.html
   links defines `.service-option` at all (checked across luxury-spa,
   fix-calendar-grid, booking-modal, no-show-card, time-slots,
   new-offerings, booking-payment, desktop: zero matches), so the only
   rules these can interact with are the ones above in this same file,
   and appending preserves that relative order exactly.

   2026-09-25: the accent WAS violet — `rgb(139 92 246)`/`#7c3aed`/`#6d28d9`, the
   registry-banned default AI purple — and this comment used to record that as an
   unmade "deliberate palette decision" still owed. That decision is made now:
   the accent is the site's own sage family (css/sage-palette.css), matching the
   base badge/underline colours in css/inline-lifted.css (il-088/092/094/096/
   100/104) this block enhances on hover, so hover deepens the same hue instead
   of swapping it.
   =================================================================== */

.service-option:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15) !important;
  border-color: #d1d5db !important;
}

.service-option.featured:hover {
  transform: translateY(-10px) scale(1.025) !important;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.2) !important;
  border-color: #e5e7eb !important;
}

.service-option:active {
  transform: translateY(-2px) !important;
}

.service-option:focus {
  /* Was rgba(74, 97, 74, 0.3) — ~200,208,201 blended on a white card, well
     under the 3:1 WCAG floor for a UI focus indicator (measured ~1.4:1).
     Full-opacity var(--sage-700, #4a614a) measures ~6.8:1 against white.
     ittheal-homepage-layout-critical4 Part B #12/UX-medium. */
  outline: 2px solid var(--sage-700, #4a614a) !important;
  outline-offset: 4px !important;
}

/* Enhance the sage accent gradients on hover */
.service-option:hover div.il-092, .service-option:hover div.il-094, .service-option:hover div.il-100 {
  background: linear-gradient(90deg, var(--accent-sage-700), var(--sage-500)) !important;
  box-shadow: 0 2px 8px rgba(74, 97, 74, 0.4) !important;
}

.service-option:hover div.il-088, .service-option:hover div.il-096, .service-option:hover div.il-104 {
  background: linear-gradient(135deg, var(--accent-sage-800), var(--accent-sage-700)) !important;
  box-shadow: 0 6px 16px rgba(74, 97, 74, 0.35) !important;
}

@media (max-width: 768px) {
  .service-option {
    padding: 2rem !important;
    border-radius: 16px !important;
  }

  .service-option.featured {
    padding: 2.2rem !important;
    transform: scale(1.01) !important;
  }

  /* 2026-09-25 (ittheal-homepage-layout-critical, Part A3): the featured ($185) card's
     "Client Favorite" badge (`.il-096`, position: absolute, top: -15px) reserves no flow height,
     so unlike its 7 siblings (badge `.il-088`, normal flow, ~31px + margin-bottom) its content
     starts right after the card's own padding with nothing pushing it down -- live-measured via
     getBoundingClientRect, the featured card's `.session-duration` ("90 min") sat 30-42px higher
     than its row-mates' at every width. This block covers 344/480/768px in one rule (max-width:
     768px is inclusive downward, so the narrower ≤344px-only patch this replaced was redundant
     with it); the desktop (≥769px) compensation lives next to the other featured-card padding
     restore in css/inline-lifted.css's `@media (min-width: 769px)` block, since featured cards
     have MORE extra padding-top there (needing less compensation) -- same root cause, verified
     per-width via Playwright rather than assumed constant across breakpoints. */
  .service-option.featured .session-duration {
    margin-top: 2.625rem !important;
  }

  .service-option h4 {
    font-size: 1.3rem !important;
  }

  .service-option div.il-091 {
    font-size: 2rem !important;
  }

  .service-option div.il-099 {
    font-size: 2.2rem !important;
  }

  /* 2026-09-25 (ittheal-homepage-layout-critical4): row-2 price-card CRITICAL misalignment fix,
     ≤768px half -- see css/inline-lifted.css's `@media (min-width: 769px)` block for the full
     mechanism (title-wrap variance + margin-top:auto absorbing description-height variance).
     At this tier the 4 cards wrap to at most 2 lines (worst case: buccal, 20.8px font / 33.28px
     line-height x 2 = 66.56px); at ≤480px the grid drops to a single column (verified live via
     Playwright: `.service-options` computed `display:block`/1-col-grid at 344/480px) so there is
     no side-by-side row to misalign, but this rule is harmless there too since min-height only
     grows the box, it never shrinks content. Scoped by data-service-type so row-1's already-
     correct alignment (identical wrap lengths, no variance) is 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: 4.16rem;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  /* 2026-09-25 (ittheal-homepage-layout-critical4, iteration-2 finding #2 continuation): mobile
     half of the row-1 featured-card price-row gap fix -- see css/inline-lifted.css's >=769px
     `.service-price-display` override on consultation/60min/120min for the full mechanism
     (reducing an already-flexible auto margin on the row-mate, since increasing the featured
     card's own margin instead is self-canceling -- verified live, see that comment). At this
     2-column width only "120min" shares featured's actual row; live-measured
     (Playwright getBoundingClientRect, production, 768px) featured priceTop vs 120min's before
     this fix: 46px gap.

     2026-09-25 (ittheal-homepage-layout-critical5): rescoped from the shared max-width:768px
     block to this dedicated 481-768px block -- the original scoping also fired at 344/480px,
     where `.service-options` drops to a single column (see the comment above the row-2
     min-height fix a few lines up: "the grid drops to a single column ... verified live via
     Playwright"), so there was no row-mate to align with and the 31px margin-top just added a
     dead gap. Found live by lnf-orchestrator-agent at 344px. */
  .service-option[data-service-type="120min"] .service-price-display {
    margin-top: 1.9375rem;
  }
}

@media (max-width: 480px) {
  .service-option {
    padding: 1.8rem !important;
  }

  .service-option.featured {
    padding: 2rem !important;
  }
}

/* The 344px tier the house rules require this file to state explicitly.
   These are not new values: at 344px the 480px block above already wins
   over the earlier `.service-option { padding: 1.2rem }` (same
   specificity, later in the file), so restating them here changes
   nothing and makes the smallest tier readable instead of implied. */
@media (max-width: 344px) {
  .service-option {
    padding: 1.8rem !important;
  }

  .service-option.featured {
    padding: 2rem !important;
  }

  /* 2026-09-25 SUPERSEDED (ittheal-homepage-layout-critical, Part A3): this ≤344px-only
     `margin-top: 0.75rem` patch closed the badge/content-alignment gap only at this one tier and
     only partially (12px, of a ~42px gap actually measured here) -- "doesn't close it at other
     widths" per the LNF re-score. Replaced by the ≤768px rule in the `@media (max-width: 768px)`
     block above (768px is inclusive downward, so it already covers this tier) plus the ≥769px
     rule in css/inline-lifted.css. Removed from here rather than left stacking with the new rule
     at a different value under the same selector. */
}