/* Final component layer: shared controls, interaction feedback and framed surfaces. */

:root {
  --txf-control-height: 48px;
  --txf-control-radius: 3px;
  --txf-control-border: rgba(23, 24, 20, 0.26);
  --txf-control-border-strong: rgba(23, 24, 20, 0.48);
  --txf-control-paper: rgba(255, 252, 246, 0.68);
  --txf-control-paper-hover: rgba(255, 253, 248, 0.94);
  --txf-control-dark: #1a1c19;
  --txf-control-dark-hover: #292b27;
  --txf-control-focus: #0a857c;
  --txf-control-ease: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --txf-surface-border: rgba(112, 94, 65, 0.24);
  --txf-surface-shadow: 0 24px 68px rgba(71, 55, 34, 0.075);
}

.page-home :is(a, button, summary),
.page-service :is(a, button, summary),
.page-privacy :is(a, button, summary) {
  -webkit-tap-highlight-color: transparent;
}

.page-home :is(.button, .copy-template, .copy-email),
.page-service .button,
.page-service .service-route-actions > *,
.page-service .handoff-closeout > a,
.page-home .handoff-primer .section-cta a,
.page-home #trust .boundary-closeout > a {
  box-sizing: border-box !important;
  min-height: var(--txf-control-height) !important;
  border-radius: var(--txf-control-radius) !important;
  font-family: var(--txf-sans) !important;
  font-size: 14px !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    transform var(--txf-control-ease),
    color var(--txf-control-ease),
    border-color var(--txf-control-ease),
    background-color var(--txf-control-ease),
    box-shadow var(--txf-control-ease) !important;
}

.page-service .hero-actions.is-priority > .button,
.page-home #contact .diagnosis-actions > *,
.page-service #contact .contact-form-panel .section-actions > * {
  min-height: var(--txf-control-height) !important;
  border-radius: var(--txf-control-radius) !important;
}

.page-home #contact .diagnosis-actions :is(.copy-template, .copy-email, .contact-mail) {
  min-height: var(--txf-control-height) !important;
  border-radius: var(--txf-control-radius) !important;
}

.page-home :is(.button.primary, .contact-mail),
.page-service :is(.button.primary, .handoff-closeout > a),
.page-home .handoff-primer .section-cta a:first-child {
  color: #fffaf0 !important;
  border-color: var(--txf-control-dark) !important;
  background: var(--txf-control-dark) !important;
}

.page-home .button.secondary,
.page-service .button.secondary,
.page-home #contact .diagnosis-actions :is(.copy-template, .copy-email),
.page-service #contact .contact-form-panel :is(.copy-template, .copy-email),
.page-home .handoff-primer .section-cta a:not(:first-child) {
  color: var(--txf-ink) !important;
  border-color: var(--txf-control-border) !important;
  background: var(--txf-control-paper) !important;
}

.page-service .handoff-closeout > a.button {
  color: #fffaf0 !important;
  border-color: var(--txf-control-dark) !important;
  background: var(--txf-control-dark) !important;
}

/* Inverse controls used inside dark decision bands. */
.page-service #packages .service-package-closeout .service-route-actions > * {
  color: #fffaf0 !important;
  border-color: rgba(255, 250, 240, 0.30) !important;
  background: transparent !important;
}

.page-service #packages .service-package-closeout .service-route-actions > .primary {
  color: var(--txf-control-dark) !important;
  border-color: #fffaf0 !important;
  background: #fffaf0 !important;
}

.page-home #trust .boundary-closeout > a {
  color: var(--txf-control-dark) !important;
  border-color: #fffaf0 !important;
  background: #fffaf0 !important;
}

/* Section entry tiles stay larger than commands, but share the same geometry. */
.page-home #services .service-entry-cta a {
  min-height: 54px !important;
  border-color: var(--txf-control-border) !important;
  border-radius: var(--txf-control-radius) !important;
  background: var(--txf-control-paper) !important;
  transition:
    transform var(--txf-control-ease),
    color var(--txf-control-ease),
    border-color var(--txf-control-ease),
    background-color var(--txf-control-ease),
    box-shadow var(--txf-control-ease) !important;
}

/* Inline actions need a usable click target without turning into extra buttons. */
.page-home #services .service-card-link,
.page-home #usecases .usecase-action {
  display: inline-flex !important;
  min-height: 34px !important;
  align-items: center !important;
  padding-block: 6px !important;
  border-radius: 0 !important;
  transition:
    color var(--txf-control-ease),
    border-color var(--txf-control-ease) !important;
}

.page-home #services .service-card-link::after,
.page-home #usecases .usecase-action::after,
.page-home .section-cta a::after {
  transition: transform var(--txf-control-ease);
}

/* Shared framed surfaces use one border and one restrained depth level. */
.page-home :is(
  #services .service-grid,
  #usecases .usecase-grid,
  #fit .fit-panel,
  #process .handoff-panel,
  #trust .cooperation-guide,
  #contact .contact-box
),
.page-service :is(
  #packages .package-grid,
  #process .handoff-roadmap,
  #process .handoff-standard,
  .service-rules-layout,
  #contact .contact-inner
) {
  border-color: var(--txf-surface-border) !important;
  border-radius: 3px !important;
  box-shadow: var(--txf-surface-shadow) !important;
}

/* FAQ rows are controls, not static copy. */
.page-service .rules-faq summary {
  min-height: 64px;
  border-radius: 0;
  transition:
    color var(--txf-control-ease),
    background-color var(--txf-control-ease) !important;
}

.page-service .rules-faq details[open] summary {
  color: var(--txf-accent-deep) !important;
}

/* Copy actions report success consistently on both pages. */
.page-home :is(.copy-template, .copy-email).is-copied,
.page-service :is(.copy-template, .copy-email).is-copied,
.page-home .mobile-conversion-bar > *.is-copied,
.page-service .mobile-conversion-bar > *.is-copied {
  color: #064e49 !important;
  border-color: rgba(10, 133, 124, 0.72) !important;
  background: #dceee9 !important;
  box-shadow: 0 0 0 3px rgba(10, 133, 124, 0.10) !important;
}

/* Keyboard focus remains visible against both paper and dark panels. */
.page-home :is(a, button, summary):focus-visible,
.page-service :is(a, button, summary):focus-visible,
.page-privacy :is(a, button, summary):focus-visible {
  outline: 2px solid var(--txf-control-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(10, 133, 124, 0.11) !important;
}

.page-home :is(button, [role="button"]):disabled,
.page-service :is(button, [role="button"]):disabled,
.page-home [aria-disabled="true"],
.page-service [aria-disabled="true"] {
  opacity: 0.52 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

.page-home .nav-links a,
.page-service .topbar nav a {
  position: relative;
  transition: color var(--txf-control-ease), opacity var(--txf-control-ease);
}

.page-home .nav-links a::after,
.page-service .topbar nav a::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--txf-control-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page-home :is(.button.primary, .contact-mail):hover,
  .page-service :is(.button.primary, .handoff-closeout > a):hover,
  .page-home .handoff-primer .section-cta a:first-child:hover {
    transform: translateY(-1px) !important;
    background: var(--txf-control-dark-hover) !important;
    box-shadow: 0 9px 22px rgba(23, 24, 20, 0.16) !important;
  }

  .page-home .button.secondary:hover,
  .page-service .button.secondary:hover,
  .page-home #contact .diagnosis-actions :is(.copy-template, .copy-email):hover,
  .page-service #contact .contact-form-panel :is(.copy-template, .copy-email):hover,
  .page-home .handoff-primer .section-cta a:not(:first-child):hover {
    transform: translateY(-1px) !important;
    border-color: var(--txf-control-border-strong) !important;
    background: var(--txf-control-paper-hover) !important;
    box-shadow: 0 8px 18px rgba(71, 55, 34, 0.08) !important;
  }

  .page-service #packages .service-package-closeout .service-route-actions > *:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(255, 250, 240, 0.62) !important;
    background: rgba(255, 250, 240, 0.08) !important;
  }

  .page-service #packages .service-package-closeout .service-route-actions > .primary:hover,
  .page-home #trust .boundary-closeout > a:hover {
    color: var(--txf-control-dark) !important;
    background: #ffffff !important;
    box-shadow: 0 9px 22px rgba(23, 24, 20, 0.13) !important;
  }

  .page-home #services .service-entry-cta a:hover {
    transform: translateY(-1px) !important;
    border-color: var(--txf-control-border-strong) !important;
    background: var(--txf-control-paper-hover) !important;
    box-shadow: 0 8px 18px rgba(71, 55, 34, 0.07) !important;
  }

  .page-home #services .service-card-link:hover::after,
  .page-home #usecases .usecase-action:hover::after,
  .page-home .section-cta a:hover::after {
    transform: translateX(3px);
  }

  .page-service .rules-faq summary:hover {
    color: var(--txf-accent-deep) !important;
    background: rgba(255, 252, 246, 0.44) !important;
  }

  .page-home .nav-links a:hover::after,
  .page-service .topbar nav a:hover::after,
  .page-home .nav-links a:focus-visible::after,
  .page-service .topbar nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

.page-home :is(.button, .copy-template, .copy-email, .section-cta a):active,
.page-service :is(.button, .service-route-actions > *, .handoff-closeout > a):active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .page-home,
  .page-service {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }

  .page-home .mobile-conversion-bar,
  .page-service .mobile-conversion-bar {
    width: min(358px, calc(100% - 32px));
    max-width: 358px;
    gap: 5px;
    padding: 5px;
    border-color: rgba(112, 94, 65, 0.32);
    border-radius: 6px;
    background: rgba(255, 252, 246, 0.94);
    box-shadow: 0 16px 42px rgba(48, 38, 24, 0.18);
  }

  .page-home .mobile-conversion-bar > *,
  .page-service .mobile-conversion-bar > * {
    min-height: 44px !important;
    border-radius: var(--txf-control-radius) !important;
    font-size: 13px !important;
    font-weight: 820 !important;
    transition:
      color var(--txf-control-ease),
      border-color var(--txf-control-ease),
      background-color var(--txf-control-ease) !important;
  }

  .page-home #services .service-card-link,
  .page-home #usecases .usecase-action {
    min-height: 40px !important;
    padding-block: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home *,
  .page-service *,
  .page-privacy * {
    scroll-behavior: auto !important;
  }

  .page-home :is(a, button, summary),
  .page-service :is(a, button, summary),
  .page-privacy :is(a, button, summary) {
    transition-duration: 0.01ms !important;
  }
}