/* ==========================================================================
   assets/shared/pricing/hero.css — the five pricing pages' hero               2026-10-13

   Since 2026-10-13 (owner) the pricing pages' hero row is the service pages' "Success Stories"
   row instead of the four package cards. The hero therefore runs in the service pages' mode —
   #overview without .ih, styled by assets/shared/hero-drawer/services.css + rail.css, sized by
   assets/shared/hero-rail/hero-rail.js, built by assets/shared/client-proof/card.js — so the row
   and its drawer are the service pages' own, to the pixel.

   The title panel above the row (eyebrow, heading, lede, the two actions, the company line)
   stays exactly as it was in the inner-page hero (assets/shared/hero-drawer/inner.css, which
   scopes everything to .ih and is no longer linked here). This file repeats the few title-panel
   rules where inner.css and services.css differ, and nothing else:
     1 · the company line's parts run inline (services.css sets them inline-flex)
     2 · screens 700px and taller: the hero is at least 62% of the screen and the panel centres
         its words in the room it is given
     3 · the panel's own padding on shorter screens (--d5ip top, --d5ib bottom), and the hero's floor
         under the drawer there (--d5gb), so the hero stays as short as it was
     4 · phones up to 780px tall: the lede and the company line, as on the inner pages
     5 · phones 500–700px tall: services.css compresses the panel there (a flex column with a
         height cap); the inner panel does not, so that is undone here
   The drawer (--d5tk, --d5dt, --d5db, --d5lip, --d5wl, --d5in …) and the row are NOT touched: they
   are the service pages'. Linked after hero-drawer/services.css and rail.css, before fold.css.
   Every rule is scoped to #overview[data-hero="pricing"]:not(.ih).
   ========================================================================== */

/* ---- 1 · the company line ------------------------------------------------ */
html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .x9-micro span{ display:inline; }
html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .x9-micro b{ margin-right:1px; }

/* ---- 5 · phones 500–700px tall: no flex column, no height cap (before 2, so a 700px screen gets 2) */
@media (max-width:760px) and (min-height:500px) and (max-height:700px){
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .k5-pan{ display:block; flex:0 1 auto; min-height:auto; max-height:none;
    padding-top:var(--d5ip); padding-bottom:var(--d5ib); }
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .k5-pan::before,
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .k5-pan::after,
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .k5-say::before,
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .k5-say::after{ content:none; }
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .k5-say{ display:block; flex:0 1 auto; min-height:auto; }
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .x9-acts{ margin-top:12px; }
}

/* ---- 2 · 700px and taller: at least 62% of the screen -------------------- */
@media (min-height:700px){
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .k5-cor{ box-sizing:border-box; min-height:62vh; }
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .k5-pan{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; }
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .k5-say{ width:100%; }
}

/* ---- 3 + 4 · shorter screens ---------------------------------------------- */
@media (min-width:761px) and (max-height:740px){
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih){ --d5ib:18px; --d5gb:8px; }
}
@media (max-width:760px) and (max-height:780px){
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .x9-lede{ line-height:22px; }
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .x9-micro{ line-height:19px; }
}
@media (max-width:760px) and (min-height:701px) and (max-height:780px){
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih){ --d5ip:18px; --d5ib:12px; --d5gb:8px; }
}
@media (max-width:760px) and (max-height:700px){
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih){ --d5ip:12px; --d5ib:6px; --d5gb:4px; }
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .x9-t{ margin-top:4px; }
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .x9-lede{ margin-top:4px; line-height:21px; }
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .x9-acts{ gap:0; }
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .x9-micro{ margin-top:2px; }
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .x9-micro b{ font-size:14.5px; }
}
@media (max-width:480px) and (max-height:780px){
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) .x9-lede{ margin-inline:-6px; }
}
@media (max-width:359px) and (max-height:780px){
  html body #overview#overview#overview[data-hero="pricing"]:not(.ih) :is(.x9-lede, .x9-micro){ margin-inline:-10px; }
}