/* Shared SaaSly-style controls. This layer loads first: its important rules
   take priority over the older unlayered theme and pricing-card overrides. */
@layer site-controls {
  :root { --control-primary: var(--studio-action, #111111); --control-primary-hover: var(--studio-action-hover, #292929); }
  :where(button, [role='button'], input[type='submit'], input[type='button'], input[type='reset'],
      a.button, a[class*="button"], a[class$="__cta"], .button-frame, .sx-btn, .hero-action, .pr-plan__cta, .ed-btn,
      .wk__cta, .wp__cta, .wx__cta, .cs__cta, .hws__link, .hw__all,
      .book-call__button, .ft__cta, .ft__news-submit, .footer-col__action,
      .career-submit, .contact-submit, .call-submit, .form-submit, .auth-submit,
      .auth-method-button, .portal-button, .portal-primary-action, .portal-secondary-action,
      .portal-icon-button, .wcta__secondary, .scan-card__cta, .wk__filter, .pr-tab,
      .lc-chat__human, .lc-c-btn, .menu-segment--cta .header-nav-link):not(.lc-chat *) {
    --control-bg: var(--control-primary); --control-fg: #fff; --control-border: transparent;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 8px !important; box-sizing: border-box !important;
    min-height: 50px !important; height: auto !important; max-width: 100% !important;
    padding: 14px 24px !important; border: 1px solid var(--control-border) !important;
    border-radius: 999px !important; background: var(--control-bg) !important;
    color: var(--control-fg) !important; box-shadow: none !important;
    font-family: inherit !important; font-size: 16px !important; font-weight: 500 !important;
    line-height: 1.3 !important; letter-spacing: -.02em !important; text-transform: none !important;
    text-align: center !important; text-decoration: none !important;
    white-space: normal !important; overflow-wrap: break-word !important;
    cursor: pointer; transform: none !important;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease !important;
    &::before, &::after { content: none !important; display: none !important; }
    & :is(span, .label-wrap, .header-nav-label) {
      color: inherit !important; font-family: inherit !important; font-size: inherit !important;
      font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important;
      text-transform: none !important;
    }
    &:hover { background: var(--control-primary-hover) !important; color: #fff !important; }
    &:focus-visible { outline: 3px solid #479c73 !important; outline-offset: 4px !important; }
    &:is(:disabled, [aria-disabled='true']) { opacity: .5 !important; cursor: not-allowed !important; }
    &:is([aria-selected='true'], [aria-pressed='true']) { background: var(--control-primary) !important; color: #fff !important; }
  }
  :is(.sx-btn--ghost, .sx-btn--secondary, .button.secondary, .theme-white,
      .hero-action:not(.hero-action--primary), .pr-plan__cta, .ft__cta--alt,
      .portal-button--quiet, .portal-secondary-action, .wcta__secondary,
      .auth-method-button, .lax-auth__method, .lc-c-btn:not(.lc-c-btn--primary),
      .wk__filter, .pr-tab, .nav-text-button, .aud-slider__button, .aud-slider__toggle) {
    --control-bg: #fff; --control-fg: #111; --control-border: #e6e6e6;
    &:hover { background: #f2f4f2 !important; color: #111 !important; border-color: #cbd9cf !important; }
  }
  /* Framed legacy buttons retain their accessible label, not their SVG frame. */
  .button-frame { width: fit-content !important; overflow: visible !important; }
  .button-frame > svg, .button-frame .icon-arrow { display: none !important; }
  .button-frame .label-wrap { position: static !important; inset: auto !important; width: auto !important; height: auto !important; padding: 0 !important; transform: none !important; }
  :is(.auth-method-button, .lax-auth__method) { flex-wrap: wrap !important; gap: 8px !important; }
  :is(.auth-method-button--soon, .lax-auth__method--soon) { grid-column: 1 / -1 !important; min-width: 0 !important; }
  .auth-method-button__soon { font-size: 12px !important; }
  .pr-plan__cta { width: 100% !important; min-height: 58px !important; }
  .pr-plan__cta svg { display: none !important; }
  /* Keep compact controls circular and their identifying icons intact. */
  :is(.hamburger, .portal-icon-button, .aud-slider__button) {
    min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; padding: 10px !important;
  }
  .hamburger .line { background: #fff !important; }
  .header-nav-trigger { min-height: 40px !important; padding: 8px 12px !important; }
  /* Workspace controls are denser than the public marketing CTAs. */
  body[data-page='portal'] :is(button, [role='button'], input[type='submit'], .portal-button, .portal-primary-action, .portal-secondary-action):not(.lc-chat *) {
    min-height: 44px !important; height: auto !important; min-width: 0 !important;
    width: fit-content !important; max-width: 100% !important;
    padding: 8px 14px !important; gap: 6px !important;
    font-size: 13px !important; line-height: 1.4 !important;
    flex-grow: 0 !important;
  }
  body[data-page='portal'] :is(.portal-icon-button, .portal-notification-button) {
    min-width: 44px !important; width: 44px !important; height: 44px !important; padding: 10px !important;
  }
  body[data-page='portal'] :is(.auth-method-button, .lax-auth__method) {
    justify-self: start !important; padding: 8px 12px !important;
  }
  body[data-page='portal'] .lax-auth__methods { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  body[data-page='portal'] .portal-backdrop {
    width: 100% !important; height: 100% !important; padding: 0 !important;
    border-radius: 0 !important; background: #0006 !important;
  }
  @media (min-width: 821px) {
    body[data-page='portal'] .portal-menu-button { display: none !important; }
  }
  body[data-page='portal'] .portal-search-label { display: inline !important; }
  @media (max-width: 540px) {
    body[data-page='portal'] .portal-search-button { width: 44px !important; height: 44px !important; padding: 8px !important; }
    body[data-page='portal'] .portal-search-button .portal-search-label,
    body[data-page='portal'] .portal-search-button kbd { display: none !important; }
    body[data-page='portal'] .portal-search-button .portal-search-icon { display: inline !important; font-size: 20px !important; }
  }
  @media (pointer: coarse), (max-width: 820px) {
    body[data-page='portal'] :is(button, [role='button'], input[type='submit'], .portal-button, .portal-primary-action, .portal-secondary-action, .portal-notification-button):not(.lc-chat *) {
      min-height: 44px !important; min-width: 44px !important;
    }
  }
  .menu-segment--cta .header-nav-label { padding: 0 !important; }
  /* Decorative separators only: no input outlines, focus rings, chart paths,
     progress indicators or menu strokes are removed. Spacing stays intact. */
  :is(section, article, header, footer, nav, aside, main, ul, ol, li, dl, dt, dd,
      details, summary, table, thead, tbody, tfoot, tr, th, td, blockquote, p) {
    border-width: 0 !important;
  }
  :is(.ft__bottom, .ft__news, .text-list, .automation-detail, .pr-svc__row,
      .sx-plan__list, .system-path__number, .portal-header, .portal-tabs,
      .portal-tour__topline, .portal-topbar, .portal-sidebar__footer,
      .portal-panel-card__head, .portal-list-toolbar, .portal-jhene-card__composer,
      .portal-avatar-editor, .portal-application-section, .portal-notification-set,
      .portal-decision-reason, .portal-authenticity-note) { border-width: 0 !important; }
  :is(.hx-metric__value, .sx-stat__value, .saas-use-case a, .ed-meta > div, .cs-ed__label, .study-preview__row, .wp__bar, .pm__rail, .pm__rail-head, .pm__chat-head, .lc-chat__utility, .lc-chat__msg--error, .lc-cat, .portal-jhene-composer, .portal-notification-settings label, .portal-guide, .portal-guide__foot, .lc-chat__head, .lc-chat__composer, .lc-chat__feedback) { border-width: 0 !important; }
  .system-path a { border-width: 0 !important; }
  [hidden] { display: none !important; }
  hr, [role='separator'], .system-path__line { display: none !important; }
  :is([class*='divider'], [class*='separator']) { border: 0 !important; background-image: none !important; }
  :is([class*='divider'], [class*='separator'], .sections > .section, .system-path__steps)::before,
  :is([class*='divider'], [class*='separator'], .sections > .section, .system-path__steps)::after { content: none !important; display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    :is(button, [role='button'], .button, .sx-btn, .hero-action, .pr-plan__cta, .ft__cta) { transition: none !important; }
  }
}



/* Authentication has its own hierarchy; marketing pills must not reshape it. */
@layer site-controls {
  body:is([data-page='auth'], [data-page='portal']) :is(.auth-workspace, .lax-auth__workspace) {
    --access-ink: #f5f5f5;
    --access-muted: #b0b0b0;
    --access-line: #383838;
    --access-surface: #191919;
    width: min(384px, 100%) !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    & :is(h1, .lax-auth__title) {
      margin: 0 0 24px !important;
      font-size: clamp(34px, 6vw, 44px) !important;
      line-height: 1.06 !important;
      letter-spacing: -.035em !important;
    }
    & :is(button, .lax-auth__tabs a) {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 8px !important;
      box-sizing: border-box !important;
      width: 100% !important;
      min-width: 0 !important;
      min-height: 44px !important;
      height: auto !important;
      padding: 10px 12px !important;
      border: 1px solid var(--access-line) !important;
      border-radius: 8px !important;
      background: var(--access-surface) !important;
      color: var(--access-ink) !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      line-height: 1.4 !important;
      letter-spacing: 0 !important;
      box-shadow: none !important;
      text-decoration: none !important;
    }
    & :is(button, a):focus-visible { outline: 2px solid #8cc7a8 !important; outline-offset: 3px !important; }
    & button:not(:disabled):hover { background: #262626 !important; }
    & button:disabled { opacity: 1 !important; color: var(--access-muted) !important; cursor: not-allowed !important; }
    & :is(.auth-mode-tabs, .lax-auth__tabs) {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
      margin: 0 0 24px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
    }
    & :is(.auth-mode-tabs button, .lax-auth__tabs a) {
      border: 0 !important;
      border-bottom: 2px solid var(--access-line) !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: var(--access-muted) !important;
      padding: 10px 4px !important;
    }
    & :is(.auth-mode-tabs button[aria-selected='true'], .lax-auth__tabs a[aria-current='page']) {
      border-bottom-color: var(--access-ink) !important;
      color: var(--access-ink) !important;
      font-weight: 600 !important;
    }
    & :is(.auth-methods, .lax-auth__methods) { display: grid !important; gap: 8px !important; margin: 0 !important; }
    & .auth-methods { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    & .lax-auth__methods { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    & :is(.auth-method-button, .lax-auth__method) { justify-self: stretch !important; }
    & :is(.auth-method-button__mark, .lax-auth__method-mark) {
      display: inline-flex !important; flex: 0 0 18px !important;
      width: 18px !important; height: 18px !important;
      color: inherit !important; background: transparent !important;
    }
    & :is(.auth-method-button__mark, .lax-auth__method-mark) svg { width: 18px !important; height: 18px !important; }
    & button.auth-method-button--soon {
      grid-column: 1 / -1 !important;
      background: transparent !important;
      border-color: transparent !important;
      padding-block: 8px !important;
    }
    & .auth-method-button__soon {
      margin-left: auto !important; padding: 0 !important;
      border: 0 !important; border-radius: 0 !important;
      background: transparent !important; color: var(--access-muted) !important;
      font-size: 12px !important;
    }
    & :is(.auth-divider, .lax-auth__divider) { margin: 20px 0 !important; color: var(--access-muted) !important; font-size: 12px !important; }
    & :is(.auth-divider, .lax-auth__divider)::before,
    & :is(.auth-divider, .lax-auth__divider)::after { content: '' !important; display: block !important; flex: 1 !important; height: 1px !important; background: var(--access-line) !important; }
    & button:is(.auth-submit, .lax-auth__submit) { background: #111111 !important; border-color: transparent !important; color: #fff !important; }
    & button:is(.auth-submit, .lax-auth__submit):not(:disabled):hover { background: #292929 !important; }
    & button:is(.auth-submit, .lax-auth__submit):disabled { background: #262626 !important; color: var(--access-muted) !important; }
    & :is(.auth-legal, .lax-auth__legal) { margin-top: 20px !important; color: var(--access-muted) !important; font-size: 12px !important; line-height: 1.6 !important; }
    & :is(.auth-legal, .lax-auth__legal) a { color: var(--access-ink) !important; }
    & :is(.auth-form, .lax-auth__form) input { font-size: 16px !important; border-radius: 8px !important; }
    & :is(.auth-form, .lax-auth__form) label { color: var(--access-muted) !important; }
    & :is(.form-status, .lax-auth__status):empty { display: none !important; }
  }
}

/* Keep paired actions on one row, including narrow screens. */
@layer site-controls {
  body :is(.hero-intro__actions, .sx-cta__actions, .ft__actions, .ft__ctas) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
  }
  body :is(.hero-intro__actions, .sx-cta__actions, .ft__actions, .ft__ctas) > :is(a, button) {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  body[data-page='auth'] .auth-workspace .auth-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[data-page='auth'] .auth-workspace .auth-methods :is(.auth-method-button--email, .auth-method-button--soon) {
    grid-column: auto !important;
  }
  body[data-page='auth'] .auth-workspace .auth-methods button.auth-method-button--soon {
    flex-wrap: wrap !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
  }
  body[data-page='auth'] .auth-workspace .auth-methods .auth-method-button__soon {
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    line-height: 1.2 !important;
  }
  @media (max-width: 540px) {
    body :is(.hero-intro__actions, .sx-cta__actions, .ft__actions, .ft__ctas) { gap: 8px !important; }
    body :is(.hero-intro__actions, .sx-cta__actions, .ft__actions, .ft__ctas) > :is(a, button) {
      padding: 12px 14px !important;
      min-height: 44px !important;
      font-size: 14px !important;
    }
  }
}