/* =============================================================================
   PlugMySite - Homepage priority styles (pms-home.css)
   -----------------------------------------------------------------------------
   Spec: docs/build/homepage-priority.md (H1), BUILD-PLAN task 0D.
   Status: DORMANT. Nothing links this file until task 4E (homepage main PR)
   adds <link rel="stylesheet" href="/content/css/pms-home.css"> after
   pms-design-system.css. Until then it changes no page.

   Scope rules
   - Every NEW class is prefixed `hx-` so nothing leaks onto other pages.
   - The only non-`hx-` selectors are the ones that MOVE here from the inline
     <style> blocks of plugmysite-platform.html (all keyed on #business-apps,
     #popular-upgrades, #plans, #how-ai-works, #design-studio, #platform-stats).
     Task 4E deletes the originals in the same PR; until then both copies are
     identical in effect.
   - No selector touches .nav-inner, .nav-links, #authNav or .nav-burger
     (NAV-HEADER-SPEC: nav media queries are protected).
   - Tokens come from pms-design-system.css (--pms-*); every var() has a literal
     fallback so the file is safe if loaded alone.
   - Motion respects prefers-reduced-motion. Touch targets are >= 44px.
   - The hero copy is above the fold and must NOT use scroll-reveal.

   Markup contract (what 4E/H3-H5 must emit; class names are the API)
   Hero:      form.hx-scan > label.hx-scan-label + .hx-scan-row(input#heroUrl +
              button#heroScanBtn) + p.hx-scan-hint + p.hx-scan-err[role=alert][hidden]
              + p.hx-scan-status[role=status]; then .pms-hero-actions.hx-secondary.
              Optional <span class="hx-sub-extra"> inside .pms-hero-sub.
   Dashboards (#business-apps): .hx-apps-head, .hx-chips-line, .hx-money >
              a.hx-money-card, .hx-tabs[role=tablist] > button.hx-tab[role=tab],
              .hx-sr[role=status], .bapps-grid > .bapps-card[data-group] (hidden
              attr hides a filtered card), .hx-card-tabs > li chips, .hx-apps-foot.
   Plans (#plans): ul.hx-plans > li.hx-plan(.hx-plan--feat) > .hx-plan-badge,
              h3.hx-plan-name, p.hx-plan-price(b[data-pms-price] + .hx-plan-per),
              p.hx-plan-head, p.hx-plan-body, a.hx-plan-cta; p.hx-plans-foot.
   How strip: ol.hx-how > li.hx-step > .hx-step-num + b + span.
   Start-here banner: .hx-startrow. Skip link: a.hx-skip.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. Shared helpers
   --------------------------------------------------------------------------- */
.hx-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip link: first focusable element on the page, visible on focus only. */
.hx-skip {
  position: fixed; top: 8px; left: 8px; z-index: 10001;
  transform: translateY(-160%);
  padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center;
  border-radius: 10px; background: #0b3b2c; color: #fff; font-weight: 700; font-size: 15px;
  text-decoration: none; box-shadow: 0 8px 24px rgba(6, 40, 30, 0.35);
}
.hx-skip:focus, .hx-skip:focus-visible {
  transform: none; outline: 2px solid #d9f99d; outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   1. Hero scan form
   --------------------------------------------------------------------------- */
.hx-scan { width: 100%; max-width: 560px; margin: 18px 0 0; text-align: left; }
.hx-scan-label {
  display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--pms-ink-secondary, #475569);
}
.hx-scan-row { display: flex; flex-direction: column; gap: 10px; }
.hx-scan-row input[type="text"],
.hx-scan-row input[type="url"] {
  width: 100%; min-height: 48px; box-sizing: border-box;
  padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--pms-border-strong, rgba(15, 23, 42, 0.14));
  background: var(--pms-surface-1, #fff); color: var(--pms-ink-primary, #0f172a);
  font: inherit; font-size: 16px; /* >= 16px prevents iOS zoom on focus */
  line-height: 1.3; box-shadow: var(--pms-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.05));
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.hx-scan-row input::placeholder { color: #6b7686; opacity: 1; }
.hx-scan-row input:focus-visible {
  outline: 2px solid var(--pms-brand-500, #22b673); outline-offset: 2px;
  border-color: var(--pms-brand-600, #1d9e6f);
}
.hx-scan-row input[aria-invalid="true"] {
  border-color: var(--pms-danger, #c53030);
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.12);
}
.hx-scan-row .pms-cta,
.hx-scan-row button[type="submit"] {
  width: 100%; min-height: 48px; padding: 12px 22px; border-radius: 12px; border: 0;
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.hx-scan-row button[type="submit"]:hover:not(:disabled) { transform: translateY(-1px); }
.hx-scan-row button[type="submit"]:focus-visible { outline: 2px solid #0b3b2c; outline-offset: 3px; }
.hx-scan-row button[type="submit"]:disabled,
.hx-scan-row button[aria-busy="true"] { opacity: 0.72; cursor: progress; transform: none; }

.hx-scan-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--pms-ink-muted, #586578); }
.hx-scan-err {
  margin: 8px 0 0; font-size: 14px; line-height: 1.4; font-weight: 600;
  color: var(--pms-danger, #c53030);
}
.hx-scan-err[hidden], .hx-scan-status:empty { display: none; }
.hx-scan-status { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--pms-primary, #0e6b4b); font-weight: 600; }

/* Focus ring flash used by pmsRevealScan() (class toggled by pms-home.js). */
.hx-scan.hx-flash .hx-scan-row input {
  animation: hx-ring 1.1s ease-out 1;
}
@keyframes hx-ring {
  0%   { box-shadow: 0 0 0 0 rgba(34, 182, 115, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(34, 182, 115, 0); }
}

@media (min-width: 480px) {
  .hx-scan-row { flex-direction: row; align-items: stretch; }
  .hx-scan-row input[type="text"], .hx-scan-row input[type="url"] { flex: 1 1 auto; min-width: 0; width: auto; }
  .hx-scan-row .pms-cta, .hx-scan-row button[type="submit"] { width: auto; flex: 0 0 auto; }
}

/* Secondary actions under the form (ghost CTA + starter-kit tertiary). */
.hx-secondary { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hx-secondary .pms-hero-tertiary { min-height: 44px; display: inline-flex; align-items: center; }

/* Hero stays <= 560px tall at 375px wide: drop the second sub sentence. */
@media (max-width: 480px) {
  .hx-sub-extra { display: none; }
  .pms-homepage .pms-hero-v2 .pms-hero-sub { margin-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   2. Dashboards showcase (#business-apps, dark ink band)
   Note: .pms-band-ink forces light text with !important on headings, b, p and li, so the
   components below only set backgrounds, borders and non-text colours; text
   inherits the band's on-dark tokens.
   --------------------------------------------------------------------------- */
#business-apps .hx-apps-head { max-width: 760px; margin: 0 0 8px; text-align: left; }
.hx-chips-line {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 0; padding: 0; list-style: none;
}
.hx-chips-line li {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
}

/* A. "Get paid and booked" money row */
.hx-money {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin: 26px 0 0; padding: 0; list-style: none;
}
.hx-money-card {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas: "ic t go" "ic d go"; column-gap: 14px; row-gap: 2px; align-items: center;
  min-height: 84px; padding: 14px 16px; box-sizing: border-box;
  border-radius: 16px; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 14px 34px rgba(0, 0, 0, 0.30);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.hx-money-card:hover {
  transform: translateY(-3px); background: rgba(255, 255, 255, 0.11);
  border-color: rgba(134, 239, 172, 0.45); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}
.hx-money-card:focus-visible { outline: 2px solid #d9f99d; outline-offset: 3px; }
.hx-money-card img, .hx-money-card .hx-money-ic { grid-area: ic; width: 48px; height: 48px; display: block;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3)); }
.hx-money-card b { grid-area: t; font-size: 15.5px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
.hx-money-card span.hx-money-d { grid-area: d; font-size: 13px; line-height: 1.35; color: #b9d0c6; }
.hx-money-card .hx-money-go { grid-area: go; font-style: normal; font-weight: 800; color: #86efac; }
.hx-money-label {
  margin: 28px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #86efac !important;
}

/* B. Industry tab filter (ARIA tablist) */
.hx-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; }
.hx-tabs[hidden] { display: none; } /* no-JS: hidden until pms-home.js un-hides it */
.hx-tab {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  min-height: 44px; padding: 8px 16px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2;
  color: #e2f5ec; background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hx-tab:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(134, 239, 172, 0.5); }
.hx-tab:focus-visible { outline: 2px solid #d9f99d; outline-offset: 2px; }
.hx-tab[aria-selected="true"] { background: #d9f99d; color: #0b3b2c; border-color: #d9f99d; }

/* C. Grid filtering. .bapps-card is display:flex, which beats the UA [hidden]
   rule, so restate it. */
#business-apps .bapps-card[hidden] { display: none !important; }

/* Per-card "Inside: ..." tab chips (generated from PMS_HOME_DASHBOARDS). */
.hx-card-tabs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.hx-card-tabs li {
  font-size: 11.5px; font-weight: 700; line-height: 1.2; padding: 3px 8px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12);
}
.hx-card-tabs-label { display: block; margin: 8px 0 0; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #86efac !important; }

.hx-apps-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 24px 0 0; }
.hx-apps-foot a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 800; }

/* Money row responsive */
@media (max-width: 1099px) { .hx-money { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hx-money { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .hx-money-card { min-height: 84px; padding: 12px 14px; }
  .hx-money-label { margin-top: 20px; }
  .hx-tabs { gap: 6px; margin-top: 20px; }
  /* four chips in one row at 375 with no horizontal page scroll */
  .hx-tab { padding: 8px 10px; font-size: 13px; flex: 1 1 auto; text-align: center; justify-content: center; }
  .hx-card-tabs, .hx-card-tabs-label { display: none; }
}

/* ---------------------------------------------------------------------------
   3. Plans strip (#plans, light surface)
   --------------------------------------------------------------------------- */
.hx-plans {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  margin: 28px 0 0; padding: 0; list-style: none; align-items: stretch;
}
.hx-plan {
  position: relative; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box;
  padding: 24px 22px 22px; border-radius: 18px;
  background: var(--pms-surface-1, #fff); color: var(--pms-ink-primary, #0f172a);
  border: 1px solid var(--pms-border, rgba(15, 23, 42, 0.08));
  box-shadow: 0 1px 2px rgba(11, 59, 44, 0.05), 0 8px 22px rgba(11, 59, 44, 0.07);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s, border-color 0.2s;
}
.hx-plan:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(11, 59, 44, 0.14); border-color: rgba(14, 107, 75, 0.3); }
/* glow-ring "selected" style (same pattern as .golive-plan.on) */
.hx-plan--feat {
  border-color: var(--pms-primary, #0e6b4b);
  box-shadow: 0 0 0 3px rgba(14, 107, 75, 0.18), 0 16px 36px rgba(11, 59, 44, 0.16);
}
.hx-plan-badge {
  position: absolute; top: -11px; left: 20px; padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: #0b3b2c; background: #d9f99d; box-shadow: 0 4px 10px rgba(6, 40, 30, 0.2);
}
.hx-plan-name { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pms-primary, #0e6b4b); }
.hx-plan-price { margin: 0; display: flex; align-items: baseline; gap: 4px; font-family: var(--pms-font-display, inherit); }
.hx-plan-price b { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: var(--pms-ink-primary, #0f172a); }
.hx-plan-per { font-size: 14px; font-weight: 600; color: var(--pms-ink-muted, #586578); }
.hx-plan-head { margin: 2px 0 0; font-size: 15.5px; line-height: 1.3; font-weight: 800; color: var(--pms-ink-primary, #0f172a); }
.hx-plan-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pms-ink-secondary, #475569); }
.hx-plan-cta {
  margin-top: auto; min-height: 48px; padding: 12px 16px; box-sizing: border-box; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-size: 15px; font-weight: 800; text-decoration: none;
}
/* Default look works without .pms-cta classes; the featured card gets the brand fill. */
.hx-plan-cta {
  color: var(--pms-ink-primary, #0f172a); background: var(--pms-surface-1, #fff);
  border: 1.5px solid var(--pms-border-strong, rgba(15, 23, 42, 0.14));
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hx-plan-cta:hover { border-color: var(--pms-brand-900, #0b3b2c); box-shadow: var(--pms-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.07)); }
.hx-plan--feat .hx-plan-cta {
  color: #fff; border-color: transparent;
  background: var(--pms-gradient-brand, linear-gradient(135deg, #0e6b4b 0%, #047857 100%));
  box-shadow: var(--pms-glow-brand, 0 10px 34px rgba(14, 107, 75, 0.22));
}
.hx-plan-body + .hx-plan-cta { margin-top: 14px; }
.hx-plan-cta:focus-visible { outline: 2px solid var(--pms-brand-900, #0b3b2c); outline-offset: 3px; }
.hx-plans-foot { margin: 22px 0 0; font-size: 14px; line-height: 1.5; color: var(--pms-ink-secondary, #475569); }
.hx-plans-foot a { font-weight: 700; color: var(--pms-primary, #0e6b4b); }

@media (max-width: 999px) { .hx-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) {
  /* Two compact columns on phones (was four stacked cards, ~900px of scrolling once plans are on sale). Every plan, price, line and CTA stays. */
  .hx-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
  .hx-plan { padding: 14px 12px 12px; gap: 4px; }
  .hx-plan-name { font-size: 11.5px; letter-spacing: 0.08em; }
  .hx-plan-price b { font-size: 26px; }
  .hx-plan-per { font-size: 12px; }
  .hx-plan-head { font-size: 14px; }
  .hx-plan-body { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hx-plan-body + .hx-plan-cta { margin-top: 10px; }
}

/* ---------------------------------------------------------------------------
   4. How strip (Scan -> Plan -> Live) and "No site yet?" banner
   --------------------------------------------------------------------------- */
.hx-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: hx-step; }
.hx-step {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center;
  padding: 16px 18px; border-radius: 16px;
  background: var(--pms-surface-1, #fff); border: 1px solid var(--pms-border, rgba(15, 23, 42, 0.08));
  box-shadow: var(--pms-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.05));
}
.hx-step-num {
  grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 900; font-size: 18px; color: #fff; background: var(--pms-gradient-brand, linear-gradient(135deg, #0e6b4b, #047857));
  box-shadow: var(--pms-glow-brand, 0 10px 34px rgba(14, 107, 75, 0.22));
}
.hx-step b { font-size: 16px; font-weight: 800; color: var(--pms-ink-primary, #0f172a); }
.hx-step span:not(.hx-step-num) { font-size: 13.5px; line-height: 1.4; color: var(--pms-ink-secondary, #475569); }
@media (max-width: 640px) {
  .hx-how { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
  .hx-step { padding: 8px 14px; grid-template-columns: 36px minmax(0, 1fr); }
  .hx-step-num { width: 36px; height: 36px; font-size: 16px; }
  /* phone: title only (the pillars above already say what each thing is) */
  .hx-step span:not(.hx-step-num) { display: none; }
}

.hx-startrow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 18px 22px; border-radius: 16px;
  background: var(--pms-surface-2, #f3f5f1); border: 1px solid var(--pms-border, rgba(15, 23, 42, 0.08));
}
.hx-startrow p { margin: 0; font-weight: 700; color: var(--pms-ink-primary, #0f172a); }
.hx-startrow .hx-startrow-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hx-startrow a, .hx-startrow button { min-height: 44px; }
@media (max-width: 640px) { .hx-startrow { padding: 14px 16px; } }

/* ---------------------------------------------------------------------------
   5. Phone height caps (<= 640px). MOVED from plugmysite-platform.html
      (PR #98 block, "MWEB COGNITIVE LOAD") and extended for the new sections.
      Target: page <= 9,000px at 375 wide (about 8,000 intended).
      Every section stays in the DOM (crawlable); only presentation changes.
   --------------------------------------------------------------------------- */
.bapps-more { display: none; }

/* 13 cards = 4 rows of 3 + 1 orphan: let the orphan span the row. */
@media (min-width: 1000px) {
  #business-apps .bapps-grid > .bapps-card:last-child:nth-child(3n+1) { flex: 1 1 100%; max-width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic t cta" "ic d cta" "ic f cta"; column-gap: 28px; row-gap: 6px; align-items: center; }
  #business-apps .bapps-card:last-child:nth-child(3n+1) .bapps-hd-row { grid-area: ic; align-self: start; }
  #business-apps .bapps-card:last-child:nth-child(3n+1) > b { grid-area: t; }
  #business-apps .bapps-card:last-child:nth-child(3n+1) > p { grid-area: d; }
  #business-apps .bapps-card:last-child:nth-child(3n+1) .bapps-feats { grid-area: f; flex-direction: row; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
  #business-apps .bapps-card:last-child:nth-child(3n+1) .bapps-cta { grid-area: cta; margin: 0; padding: 0; }
  #business-apps .bapps-card:last-child:nth-child(3n+1) .bapps-demo-tag { display: none; }
}

@media (max-width: 640px) {
  /* Desktop-only sections (still in the DOM). #platform-stats is deleted by 4E;
     the rule is kept until then. */
  #platform-stats, #how-ai-works, #design-studio { display: none !important; }

  #business-apps .bapps-feats { display: none; }
  #business-apps .bapps-grid > .bapps-card:nth-child(n+4) { display: none; }
  #business-apps .bapps-grid.is-open > .bapps-card:nth-child(n+4) { display: flex; }
  #business-apps .bapps-card { padding: 18px; gap: 8px; }
  /* hidden cards (tab filter) must stay hidden even when the grid is open */
  #business-apps .bapps-grid.is-open > .bapps-card[hidden] { display: none; }
  .bapps-more {
    display: block; width: 100%; margin: 18px 0 0; min-height: 48px; border-radius: 12px;
    border: 1.5px solid rgba(134, 239, 172, 0.45); background: rgba(255, 255, 255, 0.06); color: #bbf7d0;
    font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  }

  /* NEW: #popular-upgrades shows 6 compact tiles; the mini AI prompt widget is
     hidden (the card keeps its "AI Chat Assistant" link). */
  #popular-upgrades .bai-prompt, #popular-upgrades .bai-answer { display: none !important; }
  #popular-upgrades .bento-card .d {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* NEW: the story rail ("#how") is desktop-only; the 3-step strip replaces it. */
  #how .story-rail, #how .story-wrap, #how .story-arrows { display: none !important; }

  /* NEW: tighter vertical padding on the sections that remain. */
  #plans, #why-us, #contact { padding-top: 32px !important; padding-bottom: 32px !important; }
}

/* Hero tiles stay desktop-only (>= 761px), unchanged from the inline rule. */
@media (max-width: 760px) { .pms-hero-tiles { display: none; } }

/* ---------------------------------------------------------------------------
   5b. Homepage re-lead (owner decision 2026-10-09). The four main things lead:
       1 free payments setup, 2 technology solutions, 3 business websites, 4 software.
       Hero copy -> .hx-hero-terms (the "free" conditions, next to the claim) ->
       .hx-hero-links (quiet secondary links) -> .hx-pillars (four cards) ->
       .hx-planpills (informational "See plans" row, hidden once plans are on sale).
       The site scan is a secondary tool in .hx-sitecheck lower on the page.
       Specificity note: the page's `.hero p { font-size: clamp(...) }` would grow every <p> in the
       hero, so the paragraphs here are scoped under .pms-homepage to win.
   --------------------------------------------------------------------------- */
.pms-homepage .hx-hero-terms {
  max-width: 560px; margin: 14px 0 0; font-size: 13.5px; line-height: 1.5;
  color: var(--pms-ink-muted, #586578);
}
.pms-homepage .hx-hero-terms a { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hx-hero-links { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; }
.hx-hero-links .pms-hero-tertiary { min-height: 44px; display: inline-flex; align-items: center; margin-top: 0; }

.hx-pillars-wrap, .hx-planpills { text-align: left; }
.hx-pillars-wrap { margin-top: clamp(26px, 3.6vw, 44px); }
.hx-pillars {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  margin: 0; padding: 0; list-style: none;
}
.hx-pillars > li { display: flex; min-width: 0; }
.hx-pillar {
  position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 22px 20px 18px; border-radius: 20px; text-decoration: none; text-align: left;
  color: var(--pms-ink-primary, #0f172a);
  background: var(--pms-surface-1, #fff);
  border: 1px solid var(--pms-border, rgba(15, 23, 42, 0.08));
  box-shadow: 0 1px 2px rgba(11, 59, 44, 0.05), 0 10px 26px rgba(11, 59, 44, 0.08);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.hx-pillar:hover {
  transform: translateY(-4px); border-color: rgba(14, 107, 75, 0.35);
  box-shadow: 0 2px 4px rgba(11, 59, 44, 0.06), 0 18px 38px rgba(11, 59, 44, 0.16);
}
.hx-pillar:focus-visible { outline: 2px solid var(--pms-brand-900, #0b3b2c); outline-offset: 3px; }
.hx-pillar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hx-pillar-ic { width: 52px; height: 52px; display: block; flex: 0 0 auto; filter: drop-shadow(0 6px 8px rgba(6, 40, 30, 0.24)); }
.hx-pillar-num { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--pms-ink-muted, #586578); }
.pms-homepage .hx-pillar .hx-pillar-t {
  margin: 4px 0 0; font-family: var(--pms-font-display, inherit); font-size: 19px; font-weight: 800;
  line-height: 1.2; letter-spacing: -0.02em; color: inherit;
}
.pms-homepage .hx-pillar .hx-pillar-d {
  display: block; margin: 0; max-width: none; font-size: 14px; line-height: 1.5; font-weight: 500;
  color: var(--pms-ink-secondary, #475569);
}
.hx-pillar-go {
  margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 800; color: var(--pms-primary, #0e6b4b);
}
.hx-pillar-go i { font-style: normal; transition: transform 0.2s ease; }
.hx-pillar:hover .hx-pillar-go i { transform: translateX(3px); }
/* lead card (payments) = the one dark, filled card: it is the primary offer */
.hx-pillar--lead {
  color: #f3f8f6; border-color: transparent;
  background: radial-gradient(120% 140% at 92% -20%, rgba(134, 239, 172, 0.24), transparent 55%), linear-gradient(150deg, #0e6b4b 0%, #0b3b2c 72%);
  box-shadow: 0 2px 4px rgba(6, 40, 30, 0.2), 0 18px 38px rgba(6, 40, 30, 0.3);
}
.hx-pillar--lead:hover { border-color: transparent; box-shadow: 0 2px 4px rgba(6, 40, 30, 0.24), 0 22px 44px rgba(6, 40, 30, 0.38); }
.hx-pillar--lead:focus-visible { outline-color: #d9f99d; }
.hx-pillar--lead .hx-pillar-num { color: rgba(243, 248, 246, 0.7); }
.pms-homepage .hx-pillar--lead .hx-pillar-d { color: rgba(243, 248, 246, 0.9); }
.hx-pillar--lead .hx-pillar-go { color: #d9f99d; }

.hx-planpills {
  margin-top: 20px; padding: 16px 18px 14px; border-radius: 18px; box-sizing: border-box;
  background: var(--pms-surface-2, #f3f5f1); border: 1px solid var(--pms-border, rgba(15, 23, 42, 0.08));
}
.hx-planpills[hidden] { display: none; }
.hx-planpills-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pms-homepage .hx-pills-label {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pms-primary, #0e6b4b);
}
.hx-pills-link {
  min-height: 44px; padding: 0 18px; box-sizing: border-box; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap;
  color: var(--pms-ink-primary, #0f172a); background: var(--pms-surface-1, #fff);
  border: 1.5px solid var(--pms-border-strong, rgba(15, 23, 42, 0.14));
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hx-pills-link:hover { border-color: var(--pms-brand-900, #0b3b2c); box-shadow: var(--pms-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.07)); }
.hx-pills-link:focus-visible { outline: 2px solid var(--pms-brand-900, #0b3b2c); outline-offset: 3px; }
.hx-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.hx-pill {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px; border-radius: 14px; box-sizing: border-box;
  background: var(--pms-surface-1, #fff); border: 1px solid var(--pms-border, rgba(15, 23, 42, 0.08));
}
.hx-pill-price { display: flex; align-items: baseline; gap: 3px; }
.hx-pill-price b { font-size: 20px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--pms-ink-primary, #0f172a); }
.hx-pill-per { font-size: 13px; font-weight: 600; color: var(--pms-ink-muted, #586578); }
.hx-pill-d { font-size: 13.5px; line-height: 1.35; color: var(--pms-ink-secondary, #475569); }
.pms-homepage .hx-pills-note { max-width: none; margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--pms-ink-muted, #586578); }

/* wide screens: label + "See plans" sit beside the pills (one compact band instead of a stacked panel) */
@media (min-width: 1100px) {
  .hx-planpills { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; row-gap: 8px; align-items: center; padding: 14px 18px 12px; }
  .hx-planpills-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hx-pills { margin: 0; }
  .pms-homepage .hx-pills-note { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 1099px) { .hx-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hx-pillars-wrap { margin-top: 22px; }
  .hx-pillars { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* phone: compact rows, icon left (column 1), copy right, no number */
  .hx-pillar {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start;
    padding: 14px 16px; border-radius: 16px; min-height: 76px;
  }
  .hx-pillar-top { grid-column: 1; grid-row: 1 / span 3; display: block; }
  .hx-pillar-num { display: none; }
  .hx-pillar-ic { width: 44px; height: 44px; }
  .hx-pillar > .hx-pillar-t, .hx-pillar > .hx-pillar-d, .hx-pillar > .hx-pillar-go { grid-column: 2; }
  .pms-homepage .hx-pillar .hx-pillar-t { margin: 0; font-size: 17px; }
  .pms-homepage .hx-pillar .hx-pillar-d { font-size: 13.5px; line-height: 1.42; }
  /* the whole card is the link; on phones the "go" label gives way to a chevron (the text stays for assistive tech) */
  .hx-pillar { position: relative; padding-right: 40px; }
  .hx-pillar-go { position: absolute; right: 14px; top: 50%; margin: 0; padding: 0; transform: translateY(-50%); font-size: 18px; }
  .hx-pillar:hover .hx-pillar-go i { transform: none; }
  .hx-pillar-go-t {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .hx-planpills { margin-top: 14px; padding: 10px 12px 12px; }
  .hx-pills { gap: 8px; margin-top: 2px; }
  .hx-pill { padding: 8px 12px; }
  .hx-pill-price b { font-size: 18px; }
  .hx-pill-d { font-size: 12.5px; line-height: 1.3; }
  .pms-homepage .hx-pills-note { margin-top: 8px; font-size: 12px; line-height: 1.4; }
}

/* Free site check: the scan, demoted to one compact section (same form ids and behaviour as before). */
.pms-homepage .hx-sitecheck { padding-block: clamp(28px, 4vw, 52px); }
.hx-sitecheck-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 40px; align-items: center; box-sizing: border-box;
  padding: 22px 20px; border-radius: 22px;
  background: var(--pms-surface-1, #fff); border: 1px solid var(--pms-border, rgba(15, 23, 42, 0.08));
  box-shadow: 0 1px 2px rgba(11, 59, 44, 0.05), 0 10px 26px rgba(11, 59, 44, 0.07);
}
.pms-homepage .hx-sitecheck-copy h2 { margin: 6px 0 8px; font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; line-height: 1.15; }
.pms-homepage .hx-sitecheck-copy p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--pms-ink-secondary, #475569); max-width: 52ch; }
.hx-sitecheck .hx-scan { max-width: none; margin: 0; }
@media (min-width: 900px) {
  .hx-sitecheck-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 28px 32px; }
}
@media (max-width: 640px) {
  .pms-homepage .hx-sitecheck { padding-block: 24px; }
  .hx-sitecheck-card { padding: 18px 16px; gap: 14px; }
  .pms-homepage .hx-sitecheck-copy h2 { font-size: 22px; }
}

/* ---------------------------------------------------------------------------
   5c. Page-height budget WITH the plans strip open (sale_open === true).
       The closed page (the launch state) sits at the cap; opening #plans adds a full section, so the
       sections below it are tightened at presentation level only (every word and link stays; nothing
       is hidden that carries a claim, a condition or a link target). Caps: phone <= 9,000px, desktop <= 10,000px.
   --------------------------------------------------------------------------- */
@media (min-width: 641px) {
  .pms-homepage #business-apps { padding-block: 36px !important; }
  .pms-homepage #business-apps .bapps-grid { gap: 16px; margin-top: 22px; }
  .pms-homepage #business-apps .bapps-card { padding: 16px !important; gap: 6px !important; }
  .pms-homepage #business-apps .bapps-cta { padding-top: 4px; }
  /* "Inside:" chips: the first five tab names (all of them are listed in PMS_HOME_DASHBOARDS and on the dashboard itself) */
  .pms-homepage #business-apps .hx-card-tabs { margin-top: 2px; }
  .pms-homepage #business-apps .hx-card-tabs li:nth-child(n+6) { display: none; }
  .pms-homepage #business-apps .hx-card-tabs-label { margin-top: 4px; }
  .pms-homepage #plans, .pms-homepage #contact { padding-block: 32px !important; }
  .pms-homepage #how.story-sec { padding-top: 32px !important; padding-bottom: 24px !important; }
  .pms-homepage #why-us { padding-block: 36px !important; }
  .pms-homepage .hx-sitecheck { padding-block: 24px !important; }
  .pms-homepage .hx-final { padding-block: 36px !important; }
  .pms-homepage #how-ai-works.aiw-sec { padding-block: 32px !important; }
  .pms-homepage #design-studio.ds-section { padding: 36px 0 40px !important; }
  .pms-homepage #popular-upgrades { padding-bottom: 28px !important; }
  .pms-homepage #popular-upgrades .bento-card:not(.b-feat) { padding: 16px 18px; }
  .pms-homepage #popular-upgrades .bento-card:not(.b-feat) .ic { width: 48px !important; height: 48px !important; }
}
@media (max-width: 640px) {
  /* dashboards: the at-a-glance chips repeat the pillars directly above */
  .pms-homepage #business-apps .hx-chips-line { display: none; }
  /* dashboard cards: icon left, text right (about 140px instead of 218px) */
  .pms-homepage #business-apps .bapps-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; padding: 14px 16px; }
  .pms-homepage #business-apps .bapps-card .bapps-hd-row { display: contents; }
  .pms-homepage #business-apps .bapps-card .bapps-ic { grid-column: 1; grid-row: 1 / span 4; width: 48px; height: 48px; }
  .pms-homepage #business-apps .bapps-card .bapps-demo-tag { grid-column: 2; grid-row: 1; margin: 0; justify-self: start; padding: 2px 8px; }
  .pms-homepage #business-apps .bapps-card > b { grid-column: 2; grid-row: 2; }
  .pms-homepage #business-apps .bapps-card > p { grid-column: 2; grid-row: 3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pms-homepage #business-apps .bapps-card > .bapps-cta { grid-column: 2; grid-row: 4; padding-top: 4px; margin: 0; }
  /* upgrade tiles: the whole tile is the link, so the "Payments ->" label gives way to a chevron (the arrow icon stays) */
  .pms-homepage #popular-upgrades .bento-card:not(.b-feat) { position: relative; padding-right: 44px; }
  .pms-homepage #popular-upgrades .bento-card:not(.b-feat) > .more { grid-area: auto; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; font-size: 0; line-height: 0; }
  /* why-us: icon left, text right */
  .pms-homepage #why-us .why-grid .why-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 14px 16px; }
  .pms-homepage #why-us .why-grid .why-ic { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .pms-homepage #why-us .why-grid .why-card h3 { grid-column: 2; margin: 0; }
  .pms-homepage #why-us .why-grid .why-card p { grid-column: 2; }
  /* plans (open): tighter stack */
  .pms-homepage #plans .hx-plans { gap: 10px; margin-top: 16px; }
  .pms-homepage #plans .hx-plan { padding: 14px 16px 14px; gap: 4px; }
  .pms-homepage #plans .hx-plans-foot { margin-top: 14px; }
  /* how strip: three small columns (number over title) instead of three stacked rows */
  .pms-homepage #how .hx-how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pms-homepage #how .hx-step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 10px 8px; row-gap: 6px; }
  .pms-homepage #how .hx-step-num { grid-row: auto; width: 32px; height: 32px; font-size: 15px; }
  .pms-homepage #how .hx-step b { font-size: 14px; line-height: 1.25; }
  .pms-homepage .hx-final { padding-block: 32px !important; }
  /* dashboards: the whole card is the link, so "Open the demo ->" gives way to a chevron (the sample-data tag stays) */
  .pms-homepage #business-apps .bapps-card { position: relative; padding-right: 44px; }
  .pms-homepage #business-apps .bapps-card > .bapps-cta { grid-area: auto; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; font-size: 0; line-height: 0; }
  .pms-homepage #business-apps .bapps-card > p { grid-row: 3; }
  /* money row: the one-line description repeats the title */
  .pms-homepage #business-apps .hx-money-card { min-height: 64px; }
  .pms-homepage #business-apps .hx-money-card .hx-money-d { display: none; }
  .pms-homepage #business-apps .hx-money-card { grid-template-areas: "ic t go"; }
  .pms-homepage #business-apps .hx-money-card b { align-self: center; }
  /* pillars: tighter rows */
  .pms-homepage .hx-pillar { padding-top: 12px; padding-bottom: 12px; min-height: 0; }
  /* why-us: the intro line is decoration; the three cards carry the content */
  .pms-homepage #why-us .section-head p { display: none; }
  .pms-homepage #business-apps .hx-money-card img { width: 40px; height: 40px; }
  .pms-homepage #business-apps .hx-money-card { grid-template-columns: 40px minmax(0, 1fr) auto; }
  /* featured upgrade card: smaller icon, tighter stack */
  .pms-homepage #popular-upgrades .bento-card.b-feat { gap: 5px; }
  .pms-homepage #popular-upgrades .bento-card.b-feat { position: relative; }
  .pms-homepage #popular-upgrades .bento-card.b-feat .bfeat-tag { position: absolute; top: 18px; right: 18px; margin: 0; }
  .pms-homepage #popular-upgrades .bento-card.b-feat .ic { width: 44px !important; height: 44px !important; }
  .pms-homepage #popular-upgrades .bento-card.b-feat .more { padding-top: 4px; }
  .pms-homepage .hx-pillar .hx-pillar-d { line-height: 1.35; }
  .pms-homepage #faq { margin-bottom: 16px !important; }
  .pms-homepage #faq .seo-faq-list { gap: 8px !important; }
  .pms-homepage #plans .hx-plans-foot { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   6. Reduced motion: no transforms or looping animation from this file.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hx-money-card, .hx-plan, .hx-plan-cta, .hx-tab, .hx-scan-row input, .hx-scan-row button, .hx-pillar, .hx-pillar-go i, .hx-pills-link { transition: none !important; }
  .hx-money-card:hover, .hx-plan:hover, .hx-scan-row button[type="submit"]:hover, .hx-pillar:hover, .hx-pillar:hover .hx-pillar-go i { transform: none !important; }
  .hx-scan.hx-flash .hx-scan-row input { animation: none !important; }
  .hx-skip { transition: none; }
}