/* =========================================
   COMPONENT PRIMITIVES
   Use ta-* classes only.
========================================= */

/* Page-template and content-layout components
   Owns designed page bands, page content spines, service/how/contact page layouts,
   and form components. Kept out of base.css so base remains global element/reset only. */

/* Shared quiet page identity band.
   Used by policy, resources, about, contact, and company-information templates.
   Page templates may add a modifier class for semantics only; visual rhythm is
   owned by the generic ta-page-band contract. */
.ta-page-band {
  background: linear-gradient(180deg, var(--ta-page-band-bg-start) 0%, var(--ta-page-band-bg-end) 100%);
  border-block: 0;
}

.ta-page-band__inner {
  width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-page-band-content-max-width));
  max-width: var(--ta-page-band-content-max-width);
  margin-inline: auto;
  padding-block: var(--ta-page-band-padding-block);
}

.ta-page-band__title {
  max-width: var(--ta-page-band-title-max-width);
  margin: 0;
  color: var(--ta-color-text-strong);
  font-size: var(--ta-page-band-title-font-size);
  font-weight: var(--ta-page-band-title-font-weight);
  line-height: var(--ta-page-band-title-line-height);
  letter-spacing: var(--ta-page-band-title-letter-spacing);
  text-wrap: pretty;
}

.ta-page-band__summary,
.ta-page-band__updated {
  max-width: var(--ta-page-band-summary-max-width);
  margin: var(--ta-page-band-summary-space) 0 0;
  color: var(--ta-color-text-soft);
  font-size: var(--ta-page-band-summary-font-size);
  font-weight: var(--ta-page-band-summary-font-weight);
  line-height: var(--ta-page-band-summary-line-height);
}

@media (max-width: 900px) {
  .ta-page-band__inner {
    padding-block: var(--ta-page-band-padding-block-mobile);
  }
}


/* Text-heavy document pages use the shared ancillary shell so their left edge matches the page band and main site content edge. Inner prose still keeps a controlled reading measure. */
.ta-document-content {
  width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-ancillary-content-shell-max-width));
  max-width: var(--ta-ancillary-content-shell-max-width);
  margin-inline: auto;
  padding-top: var(--ta-document-content-start-space);
}

@media (max-width: 900px) {
  .ta-document-content {
    padding-top: var(--ta-document-content-start-space-mobile);
  }
}

.ta-document-content > :where(:not(.alignwide):not([class*="alignwide"]):not(.alignfull):not([class*="alignfull"])) {
  width: 100%;
  max-width: var(--ta-document-content-max-width);
  margin-inline: 0;
}

.ta-document-content :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  width: 100%;
  max-width: var(--ta-document-content-max-width);
  margin-inline: 0;
  text-align: left;
  text-wrap: pretty;
}

.ta-document-content > :where(h1, .wp-block-heading:first-child) {
  margin-top: 0;
}

.ta-document-content :where(p, .wp-block-paragraph, ul, ol, dl, blockquote, pre, table, figure, .wp-block-list, .wp-block-table, .wp-block-quote) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ta-document-content-max-width);
}

.ta-document-content :where(p, .wp-block-paragraph) {
  font-size: clamp(1.04rem, 0.98rem + 0.18vw, 1.08rem);
  line-height: var(--ta-document-content-line-height);
  text-align: left;
  hyphens: none;
}

.ta-document-content > .ta-kicker {
  margin: 0 0 var(--ta-kicker-heading-gap);
}

.ta-document-content > .ta-kicker + :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  margin-top: 0;
}

.ta-document-content :where(p, .wp-block-paragraph) + :where(p, .wp-block-paragraph) {
  margin-top: var(--ta-document-content-paragraph-gap);
}

.ta-document-content .wp-block-list {
  padding-inline-start: var(--ta-content-list-indent);
}

.ta-document-content > * + * {
  margin-top: var(--ta-document-content-block-gap);
}

.ta-document-content > :where(h2, h3, h4, h5, h6, .wp-block-heading) {
  margin-top: var(--ta-document-content-section-gap);
  margin-bottom: var(--ta-document-content-heading-gap);
}

.ta-document-content > :where(h2, .wp-block-heading:not([data-level]), .wp-block-heading[data-level="2"]) {
  font-size: var(--ta-document-content-h2-font-size);
  line-height: var(--ta-document-content-h2-line-height);
  font-weight: var(--ta-document-content-h2-font-weight);
  color: var(--ta-document-content-h2-color);
}

.ta-document-content > :where(h3, .wp-block-heading[data-level="3"]) {
  margin-top: var(--ta-document-content-h3-margin-top);
  font-size: var(--ta-document-content-h3-font-size);
  line-height: var(--ta-document-content-h3-line-height);
}

.ta-document-content > :where(h2, h3, h4, h5, h6, .wp-block-heading) + :where(p, ul, ol, dl, blockquote, pre, table, figure, .wp-block-paragraph, .wp-block-list, .wp-block-table, .wp-block-quote) {
  margin-top: 0;
}

.ta-document-content > :where(h1, .wp-block-heading:first-child) + :where(p, .wp-block-paragraph) {
  margin-top: 0;
  margin-bottom: var(--ta-document-content-meta-gap);
  font-size: var(--ta-document-content-meta-font-size);
  line-height: 1.5;
  color: var(--ta-document-content-meta-color);
  letter-spacing: 0.01em;
}

.ta-document-content > :where(h1, .wp-block-heading:first-child) + :where(p, .wp-block-paragraph) :where(strong, b) {
  color: inherit;
}

/* Shared content-section rhythm for manually authored page sections.
   Mirrors the document-content kicker/heading relationship so section wrappers
   do not reintroduce the global heading top margin, while adjacent sections
   keep a controlled section cadence. */
.ta-content-section {
  margin-block: 0;
}

.ta-content-section + .ta-content-section {
  margin-block-start: var(--ta-content-section-stack-gap);
}

.ta-content-section > :first-child {
  margin-block-start: 0;
}

.ta-content-section > :last-child {
  margin-block-end: 0;
}

.ta-content-section > .ta-kicker {
  margin: 0 0 var(--ta-kicker-heading-gap);
}

.ta-content-section > .ta-kicker + :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  margin-top: 0;
}

/* About-page credential component. The source image can be large; this class owns the rendered page size. */
.ta-about-credential {
  width: 100%;
  max-width: var(--ta-document-content-max-width);
}

.ta-about-credential__logo {
  width: min(100%, var(--ta-about-credential-logo-max-width));
}

.ta-about-credential__image {
  display: block;
  width: 100%;
  height: auto;
}


.ta-resources-content {
  width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-ancillary-content-shell-max-width));
  max-width: var(--ta-ancillary-content-shell-max-width);
  margin-inline: auto;
  padding-top: var(--ta-resources-content-start-space);
}

@media (max-width: 900px) {
  .ta-resources-content {
    padding-top: var(--ta-resources-content-start-space-mobile);
  }
}

.ta-resources-content > :where(:not(.alignwide):not([class*="alignwide"]):not(.alignfull):not([class*="alignfull"])) {
  width: 100%;
  max-width: var(--ta-resources-content-max-width);
  margin-inline: 0;
}

.ta-resources-content :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  width: 100%;
  max-width: var(--ta-resources-content-max-width);
  margin-inline: 0;
  text-align: left;
  text-wrap: pretty;
}

.ta-resources-content > :where(h1, .wp-block-heading:first-child) {
  margin-top: 0;
}

.ta-resources-content :where(p, .wp-block-paragraph, ul, ol, dl, blockquote, pre, table, figure, .wp-block-list, .wp-block-table, .wp-block-quote) {
  width: 100%;
  max-width: var(--ta-resources-content-max-width);
}

.ta-resources-content :where(p, .wp-block-paragraph) {
  font-size: clamp(1.04rem, 0.98rem + 0.18vw, 1.08rem);
  line-height: var(--ta-resources-content-line-height);
  text-align: left;
  hyphens: none;
}

.ta-resources-content > .ta-kicker {
  margin: var(--ta-kicker-section-space) 0 var(--ta-kicker-heading-gap);
}

.ta-resources-content > .ta-kicker:first-child {
  margin-top: 0;
}

.ta-resources-content > .ta-kicker + :where(h1, h2, h3, h4, h5, h6, .wp-block-heading, p, .wp-block-paragraph, ul, ol, .wp-block-list) {
  margin-top: 0;
}

.ta-resources-content :where(p, .wp-block-paragraph) + :where(p, .wp-block-paragraph) {
  margin-top: var(--ta-resources-content-paragraph-gap);
}

.ta-resources-content .wp-block-list {
  padding-inline-start: var(--ta-content-list-indent);
}

.ta-resources-content > * + * {
  margin-top: var(--ta-resources-content-block-gap);
}

.ta-resources-content > :where(h2, h3, h4, h5, h6, .wp-block-heading) {
  margin-top: var(--ta-resources-content-section-gap);
  margin-bottom: var(--ta-resources-content-heading-gap);
}

.ta-resources-content > :where(h2, .wp-block-heading:not([data-level]), .wp-block-heading[data-level="2"]) {
  font-size: var(--ta-resources-content-h2-font-size);
  line-height: var(--ta-resources-content-h2-line-height);
  font-weight: var(--ta-resources-content-h2-font-weight);
  color: var(--ta-resources-content-h2-color);
}

.ta-resources-content > :where(h3, .wp-block-heading[data-level="3"]) {
  font-size: var(--ta-resources-content-h3-font-size);
  line-height: var(--ta-resources-content-h3-line-height);
}

.ta-resources-content > :where(h2, h3, h4, h5, h6, .wp-block-heading) + :where(p, ul, ol, dl, blockquote, pre, table, figure, .wp-block-paragraph, .wp-block-list, .wp-block-table, .wp-block-quote) {
  margin-top: 0;
}


.ta-service-content {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-top: var(--ta-service-content-start-space);
}


/* Cover-first service pages must not add generic service-content start space above the hero.
   Hero vertical anchoring is owned by the neutral cover-hero contract in shell.css. */
body.page.page-template-page-service .ta-service-content {
  padding-top: 0;
}


/* Uses the named derived fence belowNarrowTabletEnd from inc/breakpoints.php.
   This is not an independent design breakpoint. */
@media (max-width: 781px) {
  .ta-service-content {
    padding-top: var(--ta-service-content-start-space-mobile);
  }

  body.page.page-template-page-service .ta-service-content {
    padding-top: 0;
  }
}

.ta-service-header,
.ta-service-content {
  width: 100%;
}

.ta-service-header {
  width: min(100% - (var(--ta-service-outer-edge-space) * 2), var(--ta-service-body-max-width));
  margin-inline: auto;
}

.ta-service-header {
  margin-bottom: var(--ta-service-header-margin-bottom);
}

.ta-service-title {
  max-width: var(--ta-service-title-max-width);
}

.ta-service-summary {
  max-width: var(--ta-service-summary-max-width);
  font-size: var(--ta-service-summary-font-size);
  line-height: var(--ta-service-summary-line-height);
  color: var(--ta-color-text-soft);
}

.ta-service-content {
  max-width: none;
}

.ta-service-content.ta-layout-flow > :where(:not(.alignwide):not([class*="alignwide"]):not(.alignfull):not([class*="alignfull"])) {
  width: min(100% - (var(--ta-service-outer-edge-space) * 2), var(--ta-service-body-max-width));
  margin-inline: auto;
}

.ta-service-content > * + * {
  margin-top: var(--ta-service-body-section-gap);
}

.ta-service-content .ta-service-band {
  padding: var(--ta-service-band-padding-block) var(--ta-service-band-padding-inline);
  background: var(--ta-service-band-bg);
  border: 1px solid var(--ta-service-band-border-color);
  border-radius: var(--ta-service-band-radius);
}

.ta-service-content .ta-service-band > :first-child {
  margin-top: 0;
}

.ta-service-content .ta-service-band > :last-child {
  margin-bottom: 0;
}


/* How It Works content spine.
   Native How It Works pages use the editor as storage only. The top-level
   wrapper is deliberately neutral: no padding, sibling gaps, or Gutenberg
   layout flow. The first .ta-how-section after the hero receives the same
   section top padding contract as service pages through components.css. */
.ta-how-content {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-top: 0;
}

/* Defensive storage cleanup only: designed pages should not get visual rhythm
   from empty editor paragraphs or spacer blocks. */
.ta-designed-content > :where(p:empty, .wp-block-spacer:empty) {
  display: none;
}

.ta-contact-content {
  width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-ancillary-content-shell-max-width));
  max-width: var(--ta-ancillary-content-shell-max-width);
  margin-inline: auto;
  padding-top: var(--ta-contact-content-start-space);
}

/* Contact pages own their horizontal shell through .ta-contact-content.
   Override the generic ta-layout-flow child centering so the required note,
   form surface, consent row, and submit action share the page band left edge. */
.ta-contact-content.ta-layout-flow > :where(:not(.alignwide):not([class*="alignwide"]):not(.alignfull):not([class*="alignfull"])) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

@media (max-width: 767px) {
  .ta-contact-content {
    padding-top: var(--ta-contact-content-start-space-mobile);
  }
}

.ta-contact-header {
  display: grid;
  gap: var(--ta-contact-header-gap);
  margin-bottom: var(--ta-contact-header-margin-bottom);
}

.ta-contact-title {
  max-width: var(--ta-contact-title-max-width);
  margin: 0;
}

.ta-contact-title-main,
.ta-contact-title-context {
  display: inline;
}

.ta-contact-title-context {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ta-contact-title-context {
    white-space: normal;
  }
}

.ta-contact-required-note {
  margin: 0;
  color: var(--ta-contact-help-color);
}

.ta-contact-intro {
  margin-bottom: var(--ta-contact-intro-margin-bottom);
}

.ta-contact-intro :where(p, ul, ol, dl, blockquote, pre, table) {
  max-width: var(--ta-contact-intro-max-width);
}

.ta-contact-intro > :first-child {
  margin-top: 0;
}

.ta-contact-intro > :last-child {
  margin-bottom: 0;
}

.ta-contact-notice,
.ta-contact-form-error {
  margin-bottom: var(--ta-contact-notice-gap);
  padding: var(--ta-contact-notice-padding-block) var(--ta-contact-notice-padding-inline);
  border: 1px solid transparent;
  border-radius: var(--ta-contact-notice-radius);
}
.ta-contact-notice__message {
  margin: 0;
}

.ta-contact-notice__list {
  margin: var(--ta-contact-notice-list-margin-top) 0 0;
  padding-left: var(--ta-contact-notice-list-padding-left);
}

.ta-contact-notice__list a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

.ta-contact-notice__list a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


.ta-contact-notice--success {
  background: var(--ta-contact-notice-success-bg);
  border-color: var(--ta-contact-notice-success-border);
}

.ta-contact-notice--error,
.ta-contact-form-error {
  background: var(--ta-contact-notice-error-bg);
  border-color: var(--ta-contact-notice-error-border);
  color: var(--ta-contact-error-color);
}

.ta-contact-form {
  display: grid;
  gap: var(--ta-contact-form-gap);
}

.ta-contact-form > * + * {
  margin-top: var(--ta-contact-form-group-gap);
}

.ta-contact-grid {
  display: grid;
  gap: var(--ta-contact-grid-gap);
}

@media (min-width: 768px) {
  .ta-contact-grid--two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ta-contact-field {
  display: grid;
  gap: var(--ta-contact-field-gap);
}

.ta-contact-label {
  font-size: var(--ta-contact-label-font-size);
  font-weight: var(--ta-contact-label-font-weight);
  color: var(--ta-content-heading-color);
}

.ta-contact-required-indicator {
  color: var(--ta-contact-required-color);
}

.ta-contact-input {
  width: 100%;
  min-height: var(--ta-contact-input-min-height);
  padding: var(--ta-contact-input-padding-block) var(--ta-contact-input-padding-inline);
  border: 1px solid var(--ta-contact-input-border-color);
  border-radius: var(--ta-contact-input-radius);
  background: var(--ta-contact-input-bg);
  color: var(--ta-contact-input-color);
  box-sizing: border-box;
  font: inherit;
  line-height: 1.45;
  transition: border-color var(--ta-transition-fast), box-shadow var(--ta-transition-fast);
}

.ta-contact-input::placeholder {
  color: var(--ta-contact-input-placeholder-color);
}

.ta-contact-input:focus-visible {
  outline: none;
  border-color: var(--ta-contact-input-border-color-focus);
  box-shadow: var(--ta-action-primary-focus-ring);
}

.ta-contact-select {
  appearance: none;
}

.ta-contact-textarea {
  min-height: 12rem;
  resize: vertical;
}

.ta-contact-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--ta-contact-consent-gap);
}

.ta-contact-consent input {
  margin-top: var(--ta-contact-consent-input-margin-top);
}

.ta-contact-field-error {
  min-height: var(--ta-contact-field-error-min-height);
  margin: 0;
  color: var(--ta-contact-error-color);
  font-size: var(--ta-content-small-font-size);
}

.ta-contact-field-error:empty {
  visibility: hidden;
}


@media (max-width: 767px) {
  .ta-contact-form > * + * {
    margin-top: var(--ta-contact-form-group-gap-mobile);
  }

  .ta-contact-field-error {
    min-height: 0;
  }

  .ta-contact-field-error:empty {
    display: none;
  }

  .ta-contact-field-error:not(:empty) {
    margin-top: var(--ta-contact-field-error-margin-top);
  }
}

.ta-contact-actions {
  display: flex;
  align-items: center;
}


.ta-contact-after-form-shell {
  width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-ancillary-content-shell-max-width));
  max-width: var(--ta-ancillary-content-shell-max-width);
  margin-inline: auto;
}

.ta-contact-after-form-shell > :where(:not(.alignwide):not([class*="alignwide"]):not(.alignfull):not([class*="alignfull"])) {
  max-width: var(--ta-contact-after-form-max-width);
}

.ta-contact-after-form {
  display: grid;
  gap: var(--ta-contact-after-form-gap);
  margin-top: var(--ta-contact-after-form-margin-top);
  padding-top: var(--ta-contact-after-form-padding-top);
  border-top: 1px solid var(--ta-contact-after-form-border-color);
}

.ta-contact-after-form > :first-child {
  margin-top: 0;
}

.ta-contact-after-form > :last-child {
  margin-bottom: 0;
}

.ta-contact-after-form h2 {
  margin: 0;
}

.ta-contact-after-form p {
  margin: 0;
}

.ta-contact-after-form a {
  overflow-wrap: anywhere;
}


.ta-contact-honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


.ta-kicker {
  margin: 0 0 var(--ta-kicker-heading-gap);
  color: var(--ta-kicker-color);
  font-size: var(--ta-kicker-font-size);
  font-weight: var(--ta-kicker-font-weight);
  letter-spacing: var(--ta-kicker-letter-spacing);
  line-height: var(--ta-kicker-line-height);
  text-transform: uppercase;
}


.ta-service-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  padding: var(--ta-service-card-padding-block) var(--ta-service-card-padding-inline);
  background: var(--ta-service-card-bg);
  border: 1px solid var(--ta-service-card-border-color);
  border-radius: var(--ta-service-card-radius);
}

.ta-service-card > :first-child {
  margin-top: 0;
}

.ta-service-card > :last-child {
  margin-bottom: 0;
}

.ta-service-card :where(h3, h4) {
  font-size: var(--ta-service-card-title-font-size);
  line-height: var(--ta-service-card-title-line-height);
}

.ta-service-card__heading :where(h3, h4),
.ta-service-starting-card :where(h3, h4) {
  max-inline-size: none;
  text-wrap: normal;
}

.ta-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ta-service-icon-size);
  block-size: var(--ta-service-icon-size);
  background: var(--ta-service-icon-bg);
  color: var(--ta-service-icon-color);
  border-radius: 50%;
}

/* Utility: makes media fill and crop to its container. Use in split sections, cards, and other controlled media containers. */
.ta-media-fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flexible media primitive.
   Page markup may tune ratio, fit, focal point, and dimming through Tar-Aiym custom properties. */
.ta-media {
  --ta-media-ratio: auto;
  --ta-media-fit: cover;
  --ta-media-position: center center;
  --ta-media-dim: 0;

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--ta-media-ratio);
  background: var(--ta-media-bg, var(--ta-color-surface-soft-accent));
  border: 1px solid var(--ta-media-border-color, var(--ta-color-border));
  border-radius: var(--ta-media-radius, var(--ta-radius-sm));
}

.ta-media :where(figure) {
  height: 100%;
  margin: 0;
}

.ta-media :where(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--ta-media-fit);
  object-position: var(--ta-media-position);
}

.ta-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ta-media-overlay-color, var(--ta-color-primary));
  opacity: var(--ta-media-dim);
  pointer-events: none;
}

.ta-media--cover {
  --ta-media-fit: cover;
  --ta-media-position: var(--ta-media-object-position, center center);
}

.ta-media--contain {
  --ta-media-fit: contain;
  --ta-media-position: var(--ta-media-object-position, center center);
}

.ta-media--ratio-wide {
  --ta-media-ratio: 16 / 9;
}

.ta-media--ratio-mobile-wide {
  --ta-media-ratio: 3 / 2;
}

.ta-media--ratio-tall {
  --ta-media-ratio: 4 / 5;
}



.ta-service-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ta-service-link-row-gap);
  align-items: center;
}




/* =========================================
   DESIGNED PAGE NATIVE CONTENT CONTRACT
   Designed pages use the editor as storage only. Layout is owned by native
   Tar-Aiym components in the authored HTML: heroes, sections, grids, cards,
   tables, definition rows, and CTA actions. No editor-block layout compatibility
   layer is maintained for these page templates.
========================================= */
.ta-designed-content {
  box-sizing: border-box;
}

.ta-designed-content > :first-child {
  margin-block-start: 0;
}

.ta-designed-content > :last-child {
  margin-block-end: 0;
}

.ta-entry-content.ta-designed-content > * + * {
  margin-block-start: 0;
}


/* =========================================
   CONTENT COMPOSITION HELPERS
   Generic rhythm helpers for long-form, mixed-content pages where sections
   contain tables, cards, lists, definition rows, media, and CTA actions.

   These helpers are intentionally theme-level composition primitives, not
   How It Works-specific classes. Components may own their internal rhythm,
   but they must hand layout control back to the section cleanly at their
   outer edge so future content-heavy pages can reuse the same contract.

   Canonical classes for designed-page components:
   - .ta-component              generic component shell
   - .ta-component--stack       vertical component stack
   - .ta-component--grid        grid/card group shell
   - .ta-component--list        list/definition shell
   - .ta-component--table       table shell
   - .ta-component--terminal    last visible component in a section; clears component edge only
========================================= */
.ta-component,
.ta-component--stack,
.ta-component--grid,
.ta-component--list,
.ta-component--table,
.ta-component--terminal {
  box-sizing: border-box;
  min-inline-size: 0;
  margin-block: 0;
}

.ta-component > :first-child,
.ta-component--stack > :first-child,
.ta-component--grid > :first-child,
.ta-component--list > :first-child,
.ta-component--table > :first-child {
  margin-block-start: 0;
}

.ta-component > :last-child,
.ta-component--stack > :last-child,
.ta-component--grid > :last-child,
.ta-component--list > :last-child,
.ta-component--table > :last-child {
  margin-block-end: 0;
}

.ta-component--stack > * + * {
  margin-block-start: var(--ta-component-flow-gap);
}

.ta-component--list :where(ul, ol) {
  display: grid;
  gap: var(--ta-component-list-item-gap);
  margin-block: 0;
  padding-inline-start: var(--ta-component-list-indent);
}

.ta-component--list :where(li, p) {
  margin-block: 0;
}

.ta-component--table :where(table) {
  inline-size: 100%;
  margin-block: 0;
}

.ta-component--table :where(caption) {
  margin-block: 0 var(--ta-space-2);
}

:where(.ta-landing-section__inner, .ta-service-section__inner, .ta-how-section__inner) > :where(
  .ta-component,
  .ta-component--stack,
  .ta-component--grid,
  .ta-component--list,
  .ta-component--table,
  .ta-component--terminal,
  .ta-landing-panel-grid,
  .ta-landing-support-grid,
  .ta-card-grid,
  .ta-service-scope-grid,
  .ta-service-outcomes__grid,
  .ta-how-service-table-wrap,
  .ta-how-verification,
  .ta-how-process,
  .ta-how-principles,
  .ta-how-expect-grid,
  .ta-next-links
) {
  margin-block-end: var(--ta-component-exit-space);
}

:where(.ta-landing-section__inner, .ta-service-section__inner, .ta-how-section__inner) > :where(
  .ta-component,
  .ta-component--stack,
  .ta-component--grid,
  .ta-component--list,
  .ta-component--table,
  .ta-component--terminal,
  .ta-landing-panel-grid,
  .ta-landing-support-grid,
  .ta-card-grid,
  .ta-service-scope-grid,
  .ta-service-outcomes__grid,
  .ta-how-service-table-wrap,
  .ta-how-verification,
  .ta-how-process,
  .ta-how-principles,
  .ta-how-expect-grid,
  .ta-next-links
):last-child {
  margin-block-end: 0;
}

/* Section-level handoff contract.
   Terminal components clear their own outer edge, but they do not decide the
   parent section's exit rhythm. The parent section keeps the standard
   section-owned cadence so tables, card grids, and list-heavy sections do not
   create a separate visual model from text sections. */
:where(.ta-landing-section, .ta-service-section, .ta-how-section):has(> :where(.ta-landing-section__inner, .ta-service-section__inner, .ta-how-section__inner) > .ta-component--terminal:last-child) {
  padding-block-end: var(--ta-component-terminal-section-exit-space);
}



/* =========================================
   TERMINAL DENSITY SYSTEM

   Structural insight from forensic rhythm audit:
   sections already own inter-section spacing consistently.

   Remaining perceived rhythm drift came from terminal component density:
   - dense tables
   - card grids
   - grouped definition rows
   - soft-ending prose/lists

   The system therefore formalises optical terminal density instead of
   attempting mathematically identical exits for visually different objects.

   Rules:
   - sections own inter-section rhythm
   - components own internal rhythm only
   - terminal components terminate flush
   - density classes provide controlled optical balancing
   - no page-specific overrides
   - no nth-child logic

========================================= */

/* Tight terminal objects */
.ta-terminal-tight {
  padding-block-end: var(--ta-terminal-density-exit-tight);
}

/* Medium terminal objects */
.ta-terminal-medium {
  padding-block-end: var(--ta-terminal-density-exit-medium);
}

/* Heavy visual terminal objects */
.ta-terminal-heavy {
  padding-block-end: var(--ta-terminal-density-exit-heavy);
}

/* Terminal density is opt-in only.
   Do not automatically add terminal padding to base How components; doing so
   made later sections with list/definition terminals read larger than earlier
   table/card terminals. Use the density classes in markup only when a component
   needs explicit optical balancing. */


/* Canonical ownership note:
   Backward compatibility layers from the forensic/debug phase have been removed.
   The THEME-WIDE COMPONENT FLOW CONTRACT block is now the single rhythm handoff
   authority for designed-page components. */

/* Intentional WordPress/wpautop hardening.
   Guard against editor ghost nodes becoming measurable rhythm objects at
   designed-section boundaries. Structural components should own visible
   rhythm, not stray empty paragraphs or line breaks emitted by the editor
   pipeline. Keep this scoped to Tar-Aiym designed layout wrappers. */
:where(.ta-landing-section__inner, .ta-service-section__inner, .ta-how-section__inner) > :where(p:empty, br) {
  display: none;
}

/* =========================================
   SHARED PAGE SECTION RHYTHM
   Canonical section-entry system for Landing, Service, and How It Works.

   Ownership rule:
   - components.css owns page content section rhythm.
   - shell.css owns page shell, header offset, and hero/page-start mechanics only.
   - New templates should start from this section contract before adding
     template-specific components.
========================================= */

/* Landing page trust band
   A compact reassurance row intended to sit directly below the cover hero.
   The band owns only its local rhythm; the following section remains responsible
   for normal landing-section spacing. Icons are optional and should be supplied
   by page HTML as small inline SVGs if used. */
.ta-home-trust-band {
  box-sizing: border-box;
  inline-size: 100%;
  width: 100%;
  margin-block: 0;
  padding-block: var(--ta-home-trust-band-padding-block);
  padding-inline: var(--ta-home-trust-band-padding-inline);
  background: var(--ta-home-trust-band-bg);
  border-block-start: var(--ta-home-trust-band-border-width) solid var(--ta-home-trust-band-border-color);
  border-block-end: 0;
}

.ta-home-trust-band__inner {
  box-sizing: border-box;
  inline-size: min(var(--ta-home-trust-band-content-max-width), 100%);
  width: min(var(--ta-home-trust-band-content-max-width), 100%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ta-home-trust-band-item-gap);
  color: var(--ta-home-trust-band-text-color);
  font-size: var(--ta-home-trust-band-font-size);
  font-weight: var(--ta-home-trust-band-font-weight);
  line-height: var(--ta-home-trust-band-line-height);
  text-align: center;
}

.ta-home-trust-band__inner > :where(span, p, .ta-home-trust-band__item) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ta-space-1);
  margin-block: 0;
  min-inline-size: 0;
}

.ta-home-trust-band__inner > :where(span, p, .ta-home-trust-band__item) + :where(span, p, .ta-home-trust-band__item)::before {
  content: "";
  display: inline-block;
  inline-size: var(--ta-home-trust-band-border-width);
  width: var(--ta-home-trust-band-border-width);
  block-size: 1em;
  height: 1em;
  margin-inline-end: var(--ta-home-trust-band-item-separator-space);
  background: var(--ta-home-trust-band-item-separator-color);
}

.ta-home-trust-band__icon {
  display: inline-block;
  inline-size: var(--ta-home-trust-band-icon-size);
  width: var(--ta-home-trust-band-icon-size);
  block-size: var(--ta-home-trust-band-icon-size);
  height: var(--ta-home-trust-band-icon-size);
  flex: 0 0 auto;
  color: currentColor;
  opacity: var(--ta-home-trust-band-icon-opacity);
}

@media (max-width: 640px) {
  .ta-home-trust-band {
    padding-block: var(--ta-home-trust-band-padding-block-mobile);
  }

  .ta-home-trust-band__inner {
    flex-direction: column;
    gap: var(--ta-home-trust-band-stack-gap-mobile);
    line-height: var(--ta-home-trust-band-line-height-mobile);
  }

  .ta-home-trust-band__inner > :where(span, p, .ta-home-trust-band__item) + :where(span, p, .ta-home-trust-band__item)::before {
    content: none;
  }
}

/* Reusable notice strip
   A compact announcement row for timely support messages. It is intentionally
   generic so it can be reused for MTD, deadline reminders, resource launches,
   or short service notices without creating page-specific components. */
.ta-notice-strip {
  --ta-notice-strip-current-bg: var(--ta-notice-strip-bg);
  --ta-notice-strip-current-border-color: var(--ta-notice-strip-border-color);
  --ta-notice-strip-current-border-block-start-width: var(--ta-notice-strip-border-block-start-width);
  --ta-notice-strip-current-border-block-end-width: var(--ta-notice-strip-border-block-end-width);
  --ta-notice-strip-current-message-bg: var(--ta-notice-strip-message-bg);
  --ta-notice-strip-current-message-border-color: var(--ta-notice-strip-message-border-color);
  --ta-notice-strip-current-message-border-width: var(--ta-notice-strip-message-border-width);

  box-sizing: border-box;
  inline-size: 100%;
  width: 100%;
  margin-block: 0;
  padding-block-start: var(--ta-notice-strip-padding-block-start);
  padding-block-end: var(--ta-notice-strip-padding-block-end);
  min-block-size: var(--ta-notice-strip-min-block-size);
  padding-inline: var(--ta-notice-strip-padding-inline);
  display: flex;
  align-items: center;
  background: var(--ta-notice-strip-current-bg);
  border-block-start: var(--ta-notice-strip-current-border-block-start-width) solid var(--ta-notice-strip-current-border-color);
  border-block-end: var(--ta-notice-strip-current-border-block-end-width) solid var(--ta-notice-strip-current-border-color);
}

.ta-notice-strip--accent {
  --ta-notice-strip-current-bg: var(--ta-notice-strip-bg-accent);
  --ta-notice-strip-current-border-color: var(--ta-notice-strip-border-color-accent);
  --ta-notice-strip-current-border-block-start-width: var(--ta-notice-strip-accent-border-block-start-width);
  --ta-notice-strip-current-border-block-end-width: var(--ta-notice-strip-accent-border-block-end-width);
  --ta-notice-strip-current-message-bg: var(--ta-notice-strip-message-bg-accent);
  --ta-notice-strip-current-message-border-color: var(--ta-notice-strip-message-border-color-accent);
  --ta-notice-strip-current-message-border-width: var(--ta-notice-strip-message-border-width-accent);
}

.ta-notice-strip__inner {
  box-sizing: border-box;
  inline-size: min(var(--ta-notice-strip-content-max-width), 100%);
  width: min(var(--ta-notice-strip-content-max-width), 100%);
  margin-inline: auto;
  color: var(--ta-notice-strip-text-color);
  font-size: var(--ta-notice-strip-font-size);
  font-weight: var(--ta-notice-strip-font-weight);
  line-height: var(--ta-notice-strip-line-height);
  text-align: var(--ta-notice-strip-text-align);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ta-notice-strip__inner > :where(p, .wp-block-paragraph) {
  box-sizing: border-box;
  display: inline-block;
  max-inline-size: none;
  max-width: none;
  padding-block: var(--ta-notice-strip-message-padding-block);
  padding-inline: var(--ta-notice-strip-message-padding-inline);
  background: var(--ta-notice-strip-current-message-bg);
  border: var(--ta-notice-strip-current-message-border-width) solid var(--ta-notice-strip-current-message-border-color);
  border-radius: var(--ta-notice-strip-message-radius);
}

.ta-notice-strip__inner > :where(p, .wp-block-paragraph):empty {
  display: none;
}

.ta-notice-strip__inner > :first-child {
  margin-block-start: 0;
}

.ta-notice-strip__inner > :last-child {
  margin-block-end: 0;
}

.ta-notice-strip strong {
  color: var(--ta-notice-strip-strong-color);
  font-weight: var(--ta-font-weight-semibold);
}

.ta-notice-strip strong + a {
  margin-inline-start: var(--ta-notice-strip-message-gap);
}

.ta-notice-strip a {
  color: var(--ta-notice-strip-link-color);
  font-weight: var(--ta-notice-strip-link-font-weight);
  text-decoration-thickness: var(--ta-link-arrow-decoration-thickness);
  text-underline-offset: var(--ta-link-arrow-underline-offset);
}

.ta-notice-strip a:hover,
.ta-notice-strip a:focus-visible {
  color: var(--ta-notice-strip-link-hover-color);
}

@media (max-width: 640px) {
  .ta-notice-strip {
    padding-block-start: var(--ta-notice-strip-padding-block-start-mobile);
    padding-block-end: var(--ta-notice-strip-padding-block-end-mobile);
  }
}

.ta-landing-section,
.ta-service-section {
  box-sizing: border-box;
  inline-size: 100%;
  width: 100%;
  margin-block: 0;
  padding-block: var(--ta-page-section-padding-block);
}

.ta-landing-section--tight,
.ta-service-section--tight {
  padding-block: var(--ta-page-section-padding-block-tight);
}

.ta-landing-section--loose,
.ta-service-section--loose {
  padding-block: var(--ta-page-section-padding-block-spacious);
}

/* Shared native content-exit rhythm.
   Section wrappers own cadence; child components finish flush unless they
   deliberately define their own internal rhythm. */
.ta-landing-section__inner > :first-child,
.ta-service-section__inner > :first-child {
  margin-block-start: 0;
}

.ta-landing-section__inner > :last-child,
.ta-service-section__inner > :last-child {
  margin-block-end: 0;
}

.ta-landing-section__inner > :where(ul, ol, dl, table, figure, .ta-how-service-table-wrap, .ta-landing-panel-grid, .ta-landing-support-grid, .ta-card-grid, .ta-service-scope-grid, .ta-service-outcomes__grid, .ta-how-verification, .ta-how-process, .ta-how-principles, .ta-how-expect-grid),
.ta-service-section__inner > :where(ul, ol, dl, table, figure, .ta-how-service-table-wrap, .ta-landing-panel-grid, .ta-landing-support-grid, .ta-card-grid, .ta-service-scope-grid, .ta-service-outcomes__grid, .ta-how-verification, .ta-how-process, .ta-how-principles, .ta-how-expect-grid) {
  margin-block-end: var(--ta-component-exit-space);
}

.ta-landing-section__inner {
  box-sizing: border-box;
  inline-size: min(var(--ta-landing-section-content-max-width), calc(100% - (var(--ta-landing-section-inner-edge-space) * 2)));
  width: min(var(--ta-landing-section-content-max-width), calc(100% - (var(--ta-landing-section-inner-edge-space) * 2)));
  max-inline-size: none;
  max-width: none;
  margin-inline: auto;
}

.ta-landing-section__intro {
  inline-size: 100%;
  width: 100%;
  max-inline-size: none;
  max-width: none;
  margin-inline: 0 auto;
  margin-block-end: var(--ta-page-section-content-gap);
}

.ta-landing-section__intro > :first-child {
  margin-block-start: 0;
}

.ta-landing-section__intro > :last-child {
  margin-block-end: 0;
}

.ta-landing-section__intro > .ta-kicker {
  margin-block: 0 var(--ta-kicker-heading-gap);
}

.ta-landing-section__intro > :where(h1, h2, h3) {
  inline-size: fit-content;
  width: fit-content;
  max-inline-size: min(100%, var(--ta-page-section-heading-max-width));
  max-width: min(100%, var(--ta-page-section-heading-max-width));
  margin-block: 0 var(--ta-page-section-intro-heading-body-gap);
}

.ta-landing-section__intro > :where(h1, h2, h3):last-child {
  margin-block-end: 0;
}

.ta-landing-section__intro > :where(p:not(.ta-kicker)) {
  inline-size: auto;
  width: auto;
  max-inline-size: var(--ta-landing-section-body-max-width);
  max-width: var(--ta-landing-section-body-max-width);
}

.ta-landing-section__intro > :where(h1, h2, h3) + :where(p:not(.ta-kicker)) {
  margin-block-start: 0;
}

.ta-landing-section__intro > :where(p:not(.ta-kicker)) + :where(p:not(.ta-kicker)) {
  margin-block-start: var(--ta-page-section-intro-body-flow-gap);
}

.ta-landing-panel-grid,
.ta-landing-support-grid {
  display: grid;
  align-items: stretch;
  gap: var(--ta-landing-panel-grid-gap);
  inline-size: 100%;
  width: 100%;
  margin: 0;
}

.ta-landing-panel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ta-landing-support-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Landing outcomes composition.
   The landing starter pattern currently uses the support-grid class for the
   final outcomes cluster. Keep the selector stable and constrain the two short
   outcome columns so they read as one intentional group. */
.ta-landing-section__inner > .ta-landing-section__intro:has(+ .ta-landing-support-grid) {
  margin-block-end: var(--ta-landing-outcomes-intro-grid-gap);
}

.ta-landing-section__inner > .ta-landing-support-grid {
  inline-size: min(100%, var(--ta-landing-outcomes-grid-max-width));
  width: min(100%, var(--ta-landing-outcomes-grid-max-width));
}

.ta-landing-panel {
  min-inline-size: 0;
  margin: 0;
}

.ta-landing-panel > :first-child,
.ta-landing-support-item > :first-child,
.ta-landing-support-grid > :where(*):first-child,
.ta-landing-support-grid > :where(*) > :first-child {
  margin-block-start: 0;
}

.ta-landing-panel > :last-child,
.ta-landing-support-item > :last-child,
.ta-landing-support-grid > :where(*):last-child,
.ta-landing-support-grid > :where(*) > :last-child {
  margin-block-end: 0;
}

.ta-landing-panel > :where(h3, h4):first-child,
.ta-landing-support-item > :where(h3, h4):first-child,
.ta-landing-support-grid > :where(*) > :where(h3, h4):first-child {
  margin-block: 0 var(--ta-landing-card-heading-body-gap);
}

.ta-landing-panel > :where(h3, h4):first-child + :where(p),
.ta-landing-support-item > :where(h3, h4):first-child + :where(p),
.ta-landing-support-grid > :where(*) > :where(h3, h4):first-child + :where(p) {
  margin-block-start: 0;
}

.ta-landing-list {
  max-inline-size: var(--ta-landing-section-body-max-width);
  max-width: var(--ta-landing-section-body-max-width);
  margin-block: var(--ta-landing-section-heading-list-gap) 0;
  margin-inline: 0;
}

.ta-landing-section__inner > .ta-landing-section__intro:has(+ :where(ul, ol)) {
  margin-block-end: var(--ta-landing-section-heading-list-gap);
}

.ta-landing-section__inner > .ta-landing-section__intro + :where(ul, ol) {
  margin-block: 0;
}

.ta-landing-action {
  margin-block: var(--ta-landing-support-action-margin-top) 0;
}



/* Landing page service-route refinement.
   The final paragraph remains the layout hook that keeps onward links aligned
   at the bottom of equal-height landing panels. Arrow rendering is owned by
   the reusable .ta-link-arrow pattern, not by landing-panel selectors. */
.ta-landing-panel {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
}

.ta-landing-panel > p:last-child {
  margin-block-start: auto;
  padding-block-start: var(--ta-space-4);
}

.ta-landing-panel > p:last-child .ta-link-arrow {
  font-size: var(--ta-landing-panel-link-font-size);
  line-height: var(--ta-landing-panel-link-line-height);
}

/* Reusable inline moving-arrow link.
   The text span owns the underline; the generated arrow remains a separate,
   non-underlined moving affordance inside the same link. */
.ta-link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ta-link-arrow-gap);
  max-width: 100%;
  width: max-content;
  color: var(--ta-content-link-color);
  font-weight: var(--ta-font-weight-medium);
  line-height: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.ta-link-arrow:hover,
.ta-link-arrow:focus-visible {
  color: var(--ta-content-link-hover-color);
  text-decoration: none;
}

.ta-link-arrow__text {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: var(--ta-link-arrow-decoration-thickness);
  text-underline-offset: var(--ta-link-arrow-underline-offset);
}

.ta-link-arrow:hover .ta-link-arrow__text,
.ta-link-arrow:focus-visible .ta-link-arrow__text {
  text-decoration-thickness: var(--ta-content-link-decoration-thickness-hover);
}

.ta-link-arrow::after {
  content: "→";
  flex: 0 0 auto;
  font-size: 1em;
  line-height: 1;
  opacity: var(--ta-link-arrow-opacity);
  text-decoration: none;
  transform: translateX(0);
  transition: var(--ta-link-arrow-transition);
}

.ta-link-arrow:hover::after,
.ta-link-arrow:focus-visible::after {
  opacity: 1;
  transform: translateX(var(--ta-link-arrow-hover-shift));
}

@media (max-width: 767px) {
  .ta-landing-panel-grid,
  .ta-landing-support-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mobile stacked landing routes: when the desktop route selector collapses from
   three columns into a vertical list, the grid owns the gap between complete
   route items, while each route panel owns the body-to-link relationship. This
   keeps the Explore link visibly attached to its body copy rather than floating
   midway between one service description and the next service heading. */
@media (max-width: 767px) {
  .ta-landing-panel-grid {
    row-gap: var(--ta-landing-route-stack-gap-mobile);
  }

  .ta-landing-panel > :where(h3, h4):first-child + :where(p) {
    margin-block-end: 0;
  }

  .ta-landing-panel > p:last-child {
    margin-block-start: 0;
    padding-block-start: var(--ta-landing-route-link-gap-mobile);
  }
}



/* =========================================
   SERVICE PAGE SYSTEM
   Reusable service-page rhythm for Bookkeeping, Payroll, and Business Administration.

   Responsive authority:
   - Card grids use the existing theme layout bands only:
     mobile <= 767px, tablet 768-1100px, desktop >= 1101px.
   - The grid owns both row and column spacing through one gap token.
   - Split sections stack at the existing <= 767px mobile content boundary.
========================================= */

.ta-service-section__intro {
  max-width: var(--ta-service-intro-max-width);
  margin-inline: 0 auto;
  margin-bottom: var(--ta-service-content-gap);
}

.ta-service-section__intro > :first-child {
  margin-top: 0;
}

.ta-service-section__intro > :last-child {
  margin-bottom: 0;
}

.ta-service-section__intro :where(p:not(.ta-kicker)) {
  max-width: var(--ta-service-intro-body-max-width);
}

.ta-service-section__intro :where(h2, h3) {
  max-inline-size: min(100%, var(--ta-page-section-heading-max-width));
  max-width: min(100%, var(--ta-page-section-heading-max-width));
  margin-bottom: var(--ta-service-intro-heading-body-gap);
}

.ta-service-section__intro :where(h2, h3) + :where(p:not(.ta-kicker)) {
  margin-top: 0;
}

.ta-service-section__intro > :where(p:not(.ta-kicker)) + :where(p:not(.ta-kicker)) {
  margin-top: var(--ta-service-intro-body-flow-gap);
}

.ta-service-section {
  box-sizing: border-box;
  inline-size: 100%;
  width: 100%;
  margin-block: 0;
  padding-block-start: var(--ta-service-section-padding-block);
  padding-block-end: var(--ta-service-section-exit-space);
}

.ta-service-section + .ta-service-section {
  margin-block-start: 0;
  padding-block-start: 0;
}

.ta-service-section--muted {
  background: var(--ta-service-section-muted-bg, transparent);
}

.ta-service-section--quiet {
  margin-block-start: var(--ta-service-quiet-margin-top);
  padding-block-start: var(--ta-service-quiet-padding-block);
  padding-block-end: var(--ta-service-section-exit-space);
}

.ta-service-section__inner {
  width: min(var(--ta-service-content-max-width), calc(100% - (var(--ta-service-inner-edge-space) * 2)));
  margin-inline: auto;
}

/* Shared card-grid layout system. */
.ta-card-grid,
.ta-service-scope-grid,
.ta-service-outcomes__grid {
  display: grid;
  grid-auto-flow: row;
  align-items: stretch;
  min-width: 0;
}

.ta-service-scope-grid,
.ta-service-starting-grid {
  --ta-card-grid-gap: var(--ta-service-scope-grid-gap);
}

.ta-card-grid,
.ta-service-scope-grid {
  gap: var(--ta-card-grid-gap);
}

.ta-card-grid--4-2-1,
.ta-service-scope-grid {
  --ta-card-grid-columns: var(--ta-card-grid-columns-4-2-1);
  grid-template-columns: repeat(var(--ta-card-grid-columns), minmax(0, 1fr));
}

.ta-card-grid--3-2-1 {
  --ta-card-grid-columns: var(--ta-card-grid-columns-3-2-1);
  grid-template-columns: repeat(var(--ta-card-grid-columns), minmax(0, 1fr));
}

.ta-card-grid--3-3-1 {
  --ta-card-grid-columns: var(--ta-card-grid-columns-3-3-1);
  grid-template-columns: repeat(var(--ta-card-grid-columns), minmax(0, 1fr));
}

.ta-card-grid > *,
.ta-service-scope-grid > * {
  min-width: 0;
  margin: 0;
}


.ta-service-card--scope {
  background: var(--ta-service-card-scope-bg);
}

.ta-service-card__heading {
  min-block-size: var(--ta-service-scope-card-heading-min-block-size);
  margin-block-end: var(--ta-service-scope-card-heading-body-gap);
}

.ta-service-card__heading > :first-child,
.ta-service-card__body > :first-child {
  margin-block-start: 0;
}

.ta-service-card__heading > :last-child,
.ta-service-card__body > :last-child {
  margin-block-end: 0;
}

.ta-service-card__heading :where(h3, h4) {
  min-block-size: 0;
  margin: 0;
}

.ta-service-card > :where(h3, h4):first-child {
  min-block-size: var(--ta-service-scope-card-heading-min-block-size);
  margin: 0 0 var(--ta-service-scope-card-heading-body-gap);
}

.ta-service-card > :where(h3, h4):first-child + :where(p, .ta-service-card__body),
.ta-service-card__body {
  margin-block-start: 0;
}

.ta-service-split {
  display: grid;
  grid-template-columns: var(--ta-service-split-grid-template-columns);
  gap: var(--ta-service-split-gap);
  align-items: start;
  align-content: start;
  grid-auto-rows: max-content;
  min-block-size: 0;
  block-size: auto;
}

/* Service media placement variants. */
.ta-service-split--media-tall {
  grid-template-columns: var(--ta-service-media-tall-grid-template-columns);
}

.ta-service-split--media-wide-below {
  grid-template-columns: var(--ta-service-media-wide-grid-template-columns);
}

.ta-service-split--media-above .ta-service-split__media {
  order: -1;
}

/* Service media contract: layout controls inline size; the active asset controls block size. */
.ta-service-split__media {
  --ta-media-fit: contain;
  --ta-media-position: var(--ta-media-object-position, center top);
  --ta-media-dim: 0;

  position: relative;
  isolation: isolate;
  align-self: start;
  min-inline-size: 0;
  min-block-size: 0;
  block-size: auto;
  max-block-size: none;
  aspect-ratio: auto;
  line-height: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.ta-service-split--media-tall .ta-service-split__media {
  justify-self: end;
  inline-size: min(100%, var(--ta-service-media-tall-max-inline-size));
}

.ta-service-split--media-wide-below .ta-service-split__media {
  min-block-size: 0;
}

.ta-service-split__media.ta-media,
.ta-service-split__media.ta-media--service,
.ta-service-split__media.ta-media--contain {
  --ta-media-ratio: auto;
  --ta-media-fit: contain;
  --ta-media-position: var(--ta-media-object-position, center top);
  display: block;
  align-self: start;
  block-size: auto;
  min-block-size: 0;
  max-block-size: none;
  aspect-ratio: auto;
  overflow: visible;
}

.ta-service-split__media :where(img, video, .ta-media-fill),
.ta-service-split__media > .ta-media__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 0;
  max-block-size: none;
  aspect-ratio: auto;
  object-fit: var(--ta-media-fit, contain);
  object-position: var(--ta-media-position, center top);
  border-radius: 0;
}

.ta-service-split__media > br,
.ta-service-section > p:empty,
.ta-service-section__inner > p:empty,
.ta-service-split > p:empty,
.ta-service-split__content > p:empty,
.ta-service-split__media > p:empty,
.ta-service-split__media > p:has(> br:only-child),
.ta-service-split > br,
.ta-service-section__inner > br {
  display: none;
  margin: 0;
  padding: 0;
  block-size: 0;
  min-block-size: 0;
}

.ta-service-split__media > p:has(.ta-media__img) {
  display: contents;
  margin: 0;
  padding: 0;
}

.ta-service-split__media:not(.ta-media)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ta-media-overlay-color, var(--ta-color-primary));
  opacity: var(--ta-media-dim, 0);
  pointer-events: none;
}

.ta-service-split__media .ta-media__img--tall {
  display: block;
}

.ta-service-split__media .ta-media__img--wide {
  display: none;
}

@media (max-width: 767px) {
  .ta-service-split__media .ta-media__img--tall {
    display: none;
  }

  .ta-service-split__media .ta-media__img--wide {
    display: block;
  }
}

.ta-media picture {
  display: block;
  width: 100%;
}

/* Service outcomes styling is owned by the explicit .ta-service-section--outcomes
   canonical model later in this file. Unscoped legacy outcomes rules were
   removed in the Phase 3b service cleanup to avoid fallback cascade paths. */

@media (min-width: 768px) and (max-width: 1100px) {
  .ta-card-grid--4-2-1,
  .ta-service-scope-grid {
    --ta-card-grid-columns: var(--ta-card-grid-columns-4-2-1-tablet);
  }

  .ta-card-grid--3-2-1 {
    --ta-card-grid-columns: var(--ta-card-grid-columns-3-2-1-tablet);
  }

  .ta-card-grid--3-3-1 {
    --ta-card-grid-columns: var(--ta-card-grid-columns-3-3-1-tablet);
  }
}

@media (max-width: 767px) {
  .ta-card-grid--4-2-1,
  .ta-service-scope-grid {
    --ta-card-grid-columns: var(--ta-card-grid-columns-4-2-1-mobile);
  }

  .ta-card-grid--3-2-1 {
    --ta-card-grid-columns: var(--ta-card-grid-columns-3-2-1-mobile);
  }

  .ta-card-grid--3-3-1 {
    --ta-card-grid-columns: var(--ta-card-grid-columns-3-3-1-mobile);
  }
}



/* Service split collapse follows the official content-layout mobile boundary. */
@media (max-width: 767px) {
  .ta-service-outcomes__grid > :where(div, article) {
    padding-inline: 0;
  }

  .ta-service-outcomes__grid > :where(div, article):not(:last-child)::after {
    display: none;
  }

  .ta-service-outcomes__grid > :where(div, article)::before {
    inset-inline-start: 0;
  }

  .ta-service-split {
    grid-template-columns: 1fr;
    row-gap: var(--ta-service-split-stacked-gap, var(--ta-service-split-gap));
  }

  .ta-service-split--media-above .ta-service-split__media {
    order: 0;
  }

}

/* Service visual-support utilities. */
.ta-service-section--textured {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ta-service-section--textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--ta-service-section-texture-image, none);
  background-position: var(--ta-service-section-texture-position, center);
  background-size: var(--ta-service-section-texture-size, cover);
  background-repeat: no-repeat;
  opacity: var(--ta-service-section-texture-opacity, 0.16);
  mix-blend-mode: var(--ta-service-section-texture-blend-mode, multiply);
}

.ta-service-starting-grid {
  --ta-card-grid-gap: var(--ta-service-starting-grid-gap);
}

.ta-service-starting-card {
  display: flex;
  flex-direction: column;
  gap: var(--ta-service-starting-card-gap);
  min-height: 0;
  padding: var(--ta-service-starting-card-padding-block) var(--ta-service-starting-card-padding-inline);
  background-color: var(--ta-service-starting-card-bg);
  border: 1px solid var(--ta-service-starting-card-border-color);
  border-radius: var(--ta-service-starting-card-radius);
  box-shadow: var(--ta-service-starting-card-shadow);
}

/* Starting point card texture windows. */
.ta-service-section--textured-cards .ta-service-starting-card {
  background-image:
    linear-gradient(
      var(--ta-service-starting-card-texture-overlay),
      var(--ta-service-starting-card-texture-overlay)
    ),
    var(--ta-service-card-texture-image, none);
  background-size: auto, var(--ta-service-starting-card-texture-size);
  background-repeat: no-repeat, var(--ta-service-starting-card-texture-repeat);
  background-position: center, var(--ta-service-starting-card-texture-position-1);
}

.ta-service-section--textured-cards .ta-service-starting-card:nth-child(1) {
  background-position: center, var(--ta-service-starting-card-texture-position-1);
}

.ta-service-section--textured-cards .ta-service-starting-card:nth-child(2) {
  background-position: center, var(--ta-service-starting-card-texture-position-2);
}

.ta-service-section--textured-cards .ta-service-starting-card:nth-child(3) {
  background-position: center, var(--ta-service-starting-card-texture-position-3);
}

.ta-service-section--textured-cards .ta-service-starting-card:nth-child(4) {
  background-position: center, var(--ta-service-starting-card-texture-position-4);
}

.ta-service-starting-card > :first-child {
  margin-top: 0;
}

.ta-service-starting-card > :last-child {
  margin-bottom: 0;
}

.ta-service-starting-card :where(h3, h4) {
  min-block-size: var(--ta-service-starting-card-heading-min-block-size);
  margin: 0 0 var(--ta-service-starting-card-heading-body-gap);
}

.ta-service-starting-card :where(h3, h4) + :where(p) {
  margin-block-start: 0;
}

.ta-service-starting-card :where(p) {
  margin-block-end: 0;
}

.ta-service-starting-card__icon {
  --ta-icon-size: var(--ta-service-starting-icon-size);
  --ta-icon-color: var(--ta-service-starting-icon-color);
  --ta-icon-opacity: var(--ta-service-starting-icon-opacity);
  margin-bottom: var(--ta-service-starting-icon-margin-bottom);
}

/* Shared icon system: page HTML chooses semantic icon classes; theme owns rendering. */
.ta-icon {
  --ta-icon-url: none;
  --ta-icon-glyph-size: var(--ta-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ta-icon-size);
  block-size: var(--ta-icon-size);
  color: var(--ta-icon-color);
  opacity: var(--ta-icon-opacity);
  flex: 0 0 auto;
}

.ta-icon::before {
  content: "";
  display: block;
  inline-size: var(--ta-icon-glyph-size);
  block-size: var(--ta-icon-glyph-size);
  background-color: currentColor;
  -webkit-mask-image: var(--ta-icon-url);
  mask-image: var(--ta-icon-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ta-icon--time { --ta-icon-url: url("../icons/time.svg"); }
.ta-icon--rhythm { --ta-icon-url: url("../icons/rhythm.svg"); }
.ta-icon--refresh { --ta-icon-url: url("../icons/refresh.svg"); }
.ta-icon--organisation { --ta-icon-url: url("../icons/organisation.svg"); }
.ta-icon--document { --ta-icon-url: url("../icons/document.svg"); }
.ta-icon--process { --ta-icon-url: url("../icons/process.svg"); }
.ta-icon--resources { --ta-icon-url: url("../icons/resources.svg"); }
.ta-icon--support { --ta-icon-url: url("../icons/support.svg"); }
.ta-icon--check { --ta-icon-url: url("../icons/check.svg"); }
.ta-icon--payroll { --ta-icon-url: url("../icons/payroll.svg"); }
.ta-icon--quotation { --ta-icon-url: url("../icons/quotation.svg"); }
.ta-icon--scope { --ta-icon-url: url("../icons/scope.svg"); }
.ta-icon--terms { --ta-icon-url: url("../icons/terms.svg"); }
.ta-icon--responsibilities { --ta-icon-url: url("../icons/responsibilities.svg"); }
.ta-icon--verification { --ta-icon-url: url("../icons/verification.svg"); }
.ta-icon--engagement { --ta-icon-url: url("../icons/engagement.svg"); }
.ta-icon--arrangements { --ta-icon-url: url("../icons/arrangements.svg"); }

/* Icon role modifiers: semantic icon chooses the symbol; role chooses emphasis. */
.ta-icon--subtle {
  --ta-icon-size: var(--ta-icon-role-subtle-size);
  --ta-icon-glyph-size: var(--ta-icon-role-subtle-size);
  --ta-icon-color: var(--ta-icon-role-subtle-color);
  --ta-icon-opacity: var(--ta-icon-role-subtle-opacity);
}

/* Primary action button component.
 * Used by designed-page link CTAs and native form submit buttons.
 */
.ta-site-main .ta-button {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ta-action-primary-min-height);
  padding: var(--ta-action-primary-padding-block) var(--ta-action-primary-padding-inline);
  border: 1px solid transparent;
  border-radius: var(--ta-action-primary-radius);
  background: var(--ta-action-primary-bg);
  color: var(--ta-action-primary-color);
  -webkit-text-fill-color: var(--ta-action-primary-color);
  font: inherit;
  font-size: var(--ta-action-primary-font-size);
  font-weight: var(--ta-action-primary-font-weight);
  line-height: var(--ta-action-primary-line-height);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ta-transition-fast), box-shadow var(--ta-transition-fast);
}

.ta-site-main .ta-button:hover,
.ta-site-main .ta-button:focus-visible {
  background: var(--ta-action-primary-hover-bg);
  color: var(--ta-action-primary-color);
  -webkit-text-fill-color: var(--ta-action-primary-color);
}

.ta-site-main .ta-button:focus-visible {
  outline: none;
  box-shadow: var(--ta-action-primary-focus-ring);
}

/* Component-owned CTA rhythm for designed pages. */
.ta-section-action {
  margin-block: var(--ta-section-action-margin-top) 0;
}

.ta-section-action > a {
  margin: 0;
}

.ta-landing-section__inner > .ta-landing-support-grid + .ta-section-action {
  margin-block-start: var(--ta-landing-support-action-margin-top);
  margin-block-end: 0;
}

.ta-landing-section__inner > .ta-landing-support-grid:has(+ .ta-section-action) {
  margin-block-end: var(--ta-landing-support-terminal-grid-exit-space);
}

.ta-landing-section__inner > .ta-section-action:last-child {
  display: flex;
  align-items: center;
  gap: var(--ta-content-buttons-gap);
}

/* Landing outcomes CTA refinement.
   Keep the outcomes composition constrained while reducing the visual
   separation before the CTA. */
.ta-landing-section__inner > .ta-landing-support-grid + .ta-section-action {
  inline-size: min(100%, var(--ta-landing-outcomes-grid-max-width));
  width: min(100%, var(--ta-landing-outcomes-grid-max-width));
  margin-block-start: var(--ta-space-2);
  justify-content: flex-start;
}

.ta-landing-section:has(.ta-landing-section__inner > .ta-landing-support-grid + .ta-section-action) {
  padding-block-end: var(--ta-landing-terminal-section-padding-block-end);
}



/* Outcomes section rhythm refinement.
   Keep the intro tied to the outcome columns and attach the CTA
   to the outcome flow rather than leaving it visually isolated. */
.ta-landing-section__inner > .ta-landing-section__intro:has(+ .ta-landing-support-grid) {
  max-inline-size: var(--ta-landing-outcomes-grid-max-width);
}

.ta-landing-section__inner > .ta-landing-section__intro:has(+ .ta-landing-support-grid) > :where(p:not(.ta-kicker)) {
  max-inline-size: 42rem;
}

@media (min-width: 768px) and (max-width: 1100px) {
  .ta-landing-panel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--ta-grid-gap-three-column-tablet);
    row-gap: var(--ta-grid-gap-row-tablet);
  }

  .ta-landing-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ta-grid-gap-two-column-tablet);
    row-gap: var(--ta-grid-gap-row-tablet);
  }

  .ta-landing-section__inner > .ta-landing-section__intro:has(+ .ta-landing-support-grid),
  .ta-landing-section__inner > .ta-landing-support-grid,
  .ta-landing-section__inner > .ta-landing-support-grid + .ta-section-action {
    max-inline-size: none;
    inline-size: 100%;
    width: 100%;
  }

  .ta-landing-support-grid > :where(*) {
    min-inline-size: 0;
    min-width: 0;
  }

  .ta-landing-panel > p:last-child {
    padding-block-start: var(--ta-grid-link-gap-tablet);
  }

}

.ta-how-section__intro > .ta-section-action {
  margin-block-start: var(--ta-section-action-margin-top);
}

.ta-icon--cta {
  --ta-icon-glyph-size: var(--ta-icon-role-cta-size);
  --ta-icon-color: var(--ta-icon-role-cta-color);
  --ta-icon-opacity: var(--ta-icon-role-cta-opacity);
}

/* Next links: shared shaped row links used by service and How It Works templates. */
.ta-next-links {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: var(--ta-next-links-gap, var(--ta-space-4));
  margin-top: var(--ta-next-links-margin-top);
}

/* WordPress content hardening: wpautop can wrap editable next-link anchors
   in paragraph elements and insert line breaks between inline spans. Those
   wrappers are editor noise for this component, so the component neutralises
   them while preserving the anchor markup. */
.ta-next-links > p {
  display: contents;
  margin-block: 0;
}

.ta-next-link > br {
  display: none;
}

.ta-next-link {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3.8rem, 6.4vw, 4.8rem) minmax(0, var(--ta-next-link-content-column-max)) auto;
  grid-template-areas:
    "icon label arrow"
    "icon title arrow"
    "icon text arrow";
  column-gap: var(--ta-next-link-column-gap);
  row-gap: var(--ta-next-link-row-gap);
  align-items: start;
  justify-content: start;
  padding-block: var(--ta-next-link-padding-block);
  padding-inline: 0 var(--ta-next-link-padding-inline-end);
  color: inherit;
  text-decoration: none;
}


.ta-next-link__icon {
  --ta-icon-size: clamp(1.75rem, 3vw, 2.2rem);
  --ta-icon-color: var(--ta-next-link-icon-color);
  --ta-icon-opacity: var(--ta-next-link-icon-opacity);
  grid-area: icon;
  align-self: start;
  inline-size: var(--ta-next-link-icon-shell-size);
  block-size: var(--ta-next-link-icon-shell-size);
  margin-top: var(--ta-next-link-icon-margin-top);
  color: var(--ta-next-link-icon-color);
  background-color: var(--ta-next-link-icon-bg);
  border-radius: var(--ta-radius-pill);
}

.ta-next-link__label {
  grid-area: label;
  display: block;
  color: var(--ta-next-link-label-color);
  font-size: var(--ta-next-link-label-font-size);
  font-weight: var(--ta-next-link-label-font-weight);
  letter-spacing: var(--ta-next-link-label-letter-spacing);
  line-height: var(--ta-next-link-label-line-height);
  text-transform: uppercase;
}

.ta-next-link__title {
  grid-area: title;
  display: block;
  color: var(--ta-color-text);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: var(--ta-font-weight-semibold);
  line-height: 1.15;
}

.ta-next-link__text {
  grid-area: text;
  display: block;
  max-inline-size: 42rem;
  color: var(--ta-color-text-soft);
  font-size: var(--ta-font-size-base);
  line-height: 1.55;
}

.ta-next-link::after {
  content: "\2192";
  grid-area: arrow;
  align-self: center;
  color: var(--ta-color-primary);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1;
  opacity: 0.72;
  transition: transform 180ms ease, opacity 180ms ease;
}


.ta-next-link:hover::after,
.ta-next-link:focus-visible::after {
  transform: translateX(0.35rem);
  opacity: 1;
}

.ta-next-link:focus-visible {
  outline: 2px solid rgba(47, 107, 79, 0.32);
  outline-offset: 0.3rem;
}


@media (max-width: 767px) {
  .ta-next-link {
    grid-template-columns: clamp(2.9rem, 13vw, 3.35rem) minmax(0, 1fr) auto;
    column-gap: var(--ta-next-link-column-gap-mobile);
    padding-block: var(--ta-next-link-padding-block-mobile);
    padding-inline-end: var(--ta-next-link-padding-inline-end-mobile);
  }

  .ta-next-link__icon {
    --ta-icon-size: 1.62rem;
    inline-size: 2.65rem;
    block-size: 2.65rem;
  }

  .ta-next-link__title {
    font-size: clamp(1.15rem, 5.5vw, 1.35rem);
  }

  .ta-next-link__text {
    font-size: var(--ta-font-size-sm);
  }

  .ta-next-link::after {
    font-size: 1.45rem;
  }
}

/* =========================================
   SERVICE MOBILE RHYTHM MODEL

   Mobile-only rhythm authority for service pages. The tokens define one
   stacked-section cadence used by scope, split, starting, outcomes, and
   related sections without changing tablet or desktop layout.
========================================= */
@media (max-width: 767px) {
  .ta-service-section,
  .ta-service-section--quiet,
  .ta-service-section--related,
  .ta-service-section--muted,
  .ta-service-section--textured,
  .ta-service-section--textured-cards {
    margin-block-start: 0;
    padding-block-start: var(--ta-service-section-padding-block);
    padding-block-end: var(--ta-service-section-exit-space);
  }

  .ta-service-section + .ta-service-section {
    margin-block-start: 0;
    padding-block-start: 0;
  }

  .ta-service-section__intro {
    margin-block-end: var(--ta-service-content-gap);
  }

  .ta-service-section__intro > .ta-kicker {
    margin-block: 0 var(--ta-kicker-heading-gap);
  }

  .ta-service-section__intro :where(h2, h3) {
    margin-block: 0 var(--ta-service-intro-heading-body-gap);
  }

  .ta-service-section__intro :where(h2, h3) + :where(p:not(.ta-kicker)) {
    margin-block-start: 0;
  }

  .ta-service-section__intro > :where(p:not(.ta-kicker)):last-child {
    margin-block-end: 0;
  }

  .ta-service-scope-grid,
  .ta-service-starting-grid {
    row-gap: var(--ta-service-card-grid-gap-mobile);
  }

}

/* Service canonical intro rhythm.
   .ta-service-section__intro owns copy rhythm; split variants own layout/media ordering. */
.ta-service-split__content > .ta-service-section__intro:only-child {
  margin-block-end: 0;
}

@media (max-width: 767px) {
  .ta-service-split--media-after-heading .ta-service-split__content,
  .ta-service-split--media-after-heading .ta-service-split__content > .ta-service-section__intro {
    display: contents;
  }

  .ta-service-split--media-after-heading .ta-service-split__content > .ta-service-section__intro {
    max-width: none;
    margin-block-end: 0;
  }

  .ta-service-split--media-after-heading .ta-service-section__intro > .ta-kicker {
    order: 1;
    margin-block: 0 var(--ta-kicker-heading-gap);
  }

  .ta-service-split--media-after-heading .ta-service-section__intro > :where(h1, h2, h3) {
    order: 2;
    margin-block: 0;
  }

  .ta-service-split--media-after-heading .ta-service-split__media {
    order: 3;
    margin-block: var(--ta-service-split-after-heading-media-gap-mobile) 0;
  }

  .ta-service-split--media-after-heading .ta-service-section__intro > :where(p, ul, ol):not(.ta-kicker) {
    order: 4;
    margin-block: var(--ta-service-split-after-heading-body-gap-mobile) 0;
  }

  .ta-service-split--media-after-heading .ta-service-section__intro > :where(p, ul, ol):not(.ta-kicker):first-of-type {
    margin-block-start: var(--ta-service-split-after-heading-body-gap-mobile);
  }

  .ta-service-split--media-after-heading .ta-service-section__intro > :where(p, ul, ol):not(.ta-kicker) + :where(p, ul, ol) {
    margin-block-start: var(--ta-service-intro-body-flow-gap);
  }
}

/* =========================================
   SERVICE TABLET RHYTHM MODEL

   Tablet-only service rhythm authority. Keeps Outcomes and Related visually
   distinct through their components while preventing section variants from
   creating a second vertical spacing system. Desktop and mobile remain owned
   by their existing rhythm bands.
========================================= */
@media (min-width: 768px) and (max-width: 1100px) {
  .ta-service-section,
  .ta-service-section--muted,
  .ta-service-section--textured,
  .ta-service-section--textured-cards,
  .ta-service-section--related {
    margin-block-start: 0;
    padding-block-start: var(--ta-service-section-padding-block);
    padding-block-end: var(--ta-service-section-exit-space);
  }

  .ta-service-section--quiet {
    margin-block-start: var(--ta-service-quiet-margin-top);
    padding-block-start: var(--ta-service-quiet-padding-block);
    padding-block-end: var(--ta-service-section-exit-space);
  }

  .ta-service-section + .ta-service-section {
    margin-block-start: 0;
    padding-block-start: 0;
  }

  .ta-service-section__intro {
    margin-block-end: var(--ta-service-content-gap);
  }

  .ta-service-split__content > .ta-service-section__intro:only-child {
    margin-block-end: 0;
  }

  .ta-service-section__intro > .ta-kicker {
    margin-block: 0 var(--ta-kicker-heading-gap);
  }

  .ta-service-section__intro :where(h2, h3) {
    margin-block: 0 var(--ta-service-intro-heading-body-gap);
  }

  .ta-service-section__intro :where(h2, h3) + :where(p:not(.ta-kicker)) {
    margin-block-start: 0;
  }

  .ta-service-section__intro > :where(p:not(.ta-kicker)):last-child {
    margin-block-end: 0;
  }

}


/* =========================================
   SERVICE DESKTOP RHYTHM MODEL

   Desktop-only service rhythm pass. Mobile and tablet keep their existing
   rhythm bands; this only reduces excessive desktop section air while keeping
   Outcomes and Related as deliberate visual breaks.
========================================= */
@media (min-width: 1101px) {
  .ta-service-section,
  .ta-service-section--muted,
  .ta-service-section--textured,
  .ta-service-section--textured-cards,
  .ta-service-section--related {
    margin-block-start: 0;
    padding-block-start: var(--ta-service-section-padding-block);
    padding-block-end: var(--ta-service-section-exit-space);
  }

  .ta-service-section--quiet {
    margin-block-start: var(--ta-service-quiet-margin-top);
    padding-block-start: var(--ta-service-quiet-padding-block);
    padding-block-end: var(--ta-service-section-exit-space);
  }

  .ta-service-section + .ta-service-section {
    margin-block-start: 0;
    padding-block-start: 0;
  }

  .ta-service-section__intro {
    margin-block-end: var(--ta-service-content-gap);
  }

  .ta-service-split__content > .ta-service-section__intro:only-child {
    margin-block-end: 0;
  }

  .ta-service-section__intro > .ta-kicker {
    margin-block: 0 var(--ta-kicker-heading-gap);
  }

  .ta-service-section__intro :where(h2, h3) {
    margin-block: 0 var(--ta-service-intro-heading-body-gap);
  }

  .ta-service-section__intro :where(h2, h3) + :where(p:not(.ta-kicker)) {
    margin-block-start: 0;
  }

  .ta-service-section__intro > :where(p:not(.ta-kicker)):last-child {
    margin-block-end: 0;
  }

}

/* =========================================
   SERVICE MOBILE SPLIT INTRO RHYTHM GUARD

   Keeps the canonical kicker-to-heading rhythm identical for split sections
   using .ta-service-split--media-after-heading. The split variant may reorder
   media on mobile, but it must not define a separate kicker/heading cadence.
========================================= */
@media (max-width: 767px) {
  .ta-service-split--media-after-heading .ta-service-section__intro > .ta-kicker {
    margin-block-start: 0;
    margin-block-end: var(--ta-kicker-heading-gap);
  }

  .ta-service-split--media-after-heading .ta-service-section__intro > :where(h1, h2, h3) {
    margin-block-start: 0;
  }
}

/* =========================================
   SERVICE MOBILE SPLIT GRID GAP

   The media-after-heading mobile split uses display: contents so the kicker,
   heading, media, and body copy become direct grid items. The base stacked
   split row-gap was therefore adding extra space between the kicker and
   heading on top of the canonical intro margin. For this variant, row spacing
   is owned by the intro/media tokens instead.
========================================= */
@media (max-width: 767px) {
  .ta-service-split--media-after-heading {
    row-gap: 0;
  }
}

/* =========================================
   HOW IT WORKS PAGE SYSTEM
   Clean implementation reset for the process/reference page.

   Contract:
   - How It Works keeps its own visual components.
   - Section rhythm follows the same shared page-section model as service pages.
   - Section wrappers own vertical entry/exit padding.
   - Components own only their internal spacing.
   - List-bearing verification groups use compact internal gaps so component
     exit rhythm does not masquerade as section rhythm.
   - No adjacent margin stack, hero-specific gap, or editor flow rhythm.
========================================= */
.ta-how-section {
  box-sizing: border-box;
  inline-size: 100%;
  width: 100%;
  margin-block: 0;
  padding-block-start: var(--ta-how-section-padding-block);
  padding-block-end: var(--ta-how-section-exit-space);
  background: transparent;
}

/* Match the shared section contract: each section has normal entry padding,
   while adjacent designed sections avoid double-stacking by removing only the
   following section's entry padding. This keeps the hero-to-first-section
   handoff resilient even when editor/content wrappers interrupt exact sibling
   matching, and prevents the sequential model from collapsing the page rhythm. */
.ta-how-section + .ta-how-section {
  margin-block-start: 0;
  padding-block-start: 0;
}

.ta-how-section--muted,
.ta-how-section--quiet,
.ta-how-section--terminal {
  background: var(--ta-how-section-muted-bg, transparent);
}

.ta-how-section--quiet {
  margin-block-start: var(--ta-how-section-quiet-margin-top);
  padding-block-start: var(--ta-how-section-quiet-padding-block);
  padding-block-end: var(--ta-how-section-exit-space);
  border-top: 1px solid var(--ta-how-section-quiet-border-color);
}

.ta-how-section__inner {
  box-sizing: border-box;
  inline-size: min(var(--ta-how-content-max-width), calc(100% - (var(--ta-how-inner-edge-space) * 2)));
  width: min(var(--ta-how-content-max-width), calc(100% - (var(--ta-how-inner-edge-space) * 2)));
  max-inline-size: none;
  max-width: none;
  margin-inline: auto;
}

.ta-how-section :where(p, ul, ol, dl, blockquote, pre, table, figure, h1, h2, h3, h4, h5, h6) {
  margin-block: 0;
}

.ta-how-section :where(ul, ol) {
  padding-inline-start: var(--ta-content-list-indent);
}


/* How components participate in the theme-wide component flow contract.
   This prevents nested paragraph/list/table rhythm from affecting the next
   section's kicker spacing. */
.ta-how-service-table-wrap,
.ta-how-verification,
.ta-how-check-block,
.ta-how-check-list,
.ta-how-definition-list,
.ta-how-process,
.ta-how-principles,
.ta-how-expect-grid,
.ta-next-links {
  box-sizing: border-box;
  margin-block-end: var(--ta-component-exit-space);
}

.ta-how-service-table-wrap > :first-child,
.ta-how-verification > :first-child,
.ta-how-check-block > :first-child,
.ta-how-check-list > :first-child,
.ta-how-definition-list > :first-child,
.ta-how-process > :first-child,
.ta-how-principles > :first-child,
.ta-how-expect-grid > :first-child,
.ta-next-links > :first-child {
  margin-block-start: 0;
}

.ta-how-service-table-wrap > :last-child,
.ta-how-verification > :last-child,
.ta-how-check-block > :last-child,
.ta-how-check-list > :last-child,
.ta-how-definition-list > :last-child,
.ta-how-process > :last-child,
.ta-how-principles > :last-child,
.ta-how-expect-grid > :last-child,
.ta-next-links > :last-child {
  margin-block-end: 0;
}

.ta-how-check-list :where(ul, ol),
.ta-how-verification-list {
  display: grid;
  gap: var(--ta-component-list-item-gap);
  margin-block: 0;
  padding-inline-start: var(--ta-how-verification-list-padding-inline-start);
}

.ta-how-check-list :where(li, p),
.ta-how-verification-list :where(li, p) {
  margin-block: 0;
}

.ta-how-section__inner > :first-child,
.ta-how-section__intro > :first-child,
.ta-how-verification__content > :first-child,
.ta-how-check-block > :first-child,
.ta-how-check-list > :first-child,
.ta-how-principle-card > :first-child,
.ta-how-process-card > :first-child,
.ta-how-process-card__heading > :first-child,
.ta-how-process-card__body > :first-child {
  margin-block-start: 0;
}

.ta-how-section__inner > :last-child,
.ta-how-section__intro > :last-child,
.ta-how-verification__content > :last-child,
.ta-how-check-block > :last-child,
.ta-how-check-list > :last-child,
.ta-how-principle-card > :last-child,
.ta-how-process-card > :last-child,
.ta-how-process-card__heading > :last-child,
.ta-how-process-card__body > :last-child {
  margin-block-end: 0;
}

.ta-how-section__intro {
  inline-size: 100%;
  width: 100%;
  max-inline-size: var(--ta-how-intro-max-width);
  max-width: var(--ta-how-intro-max-width);
  margin-inline: 0 auto;
  margin-block-end: 0;
}

.ta-how-section__intro {
  margin-block-end: 0;
}

.ta-how-section__intro + :where(
  .ta-how-service-table-wrap,
  .ta-how-verification,
  .ta-how-process,
  .ta-how-principles,
  .ta-how-expect-grid,
  .ta-next-links
) {
  margin-block-start: var(--ta-how-section-content-gap);
}

.ta-how-section__intro > .ta-kicker {
  margin-block: 0 var(--ta-kicker-heading-gap);
}

.ta-how-section__intro :where(h2, h3) {
  max-inline-size: min(100%, var(--ta-page-section-heading-max-width));
  max-width: min(100%, var(--ta-page-section-heading-max-width));
  margin-block: 0 var(--ta-how-intro-heading-body-gap);
}

.ta-how-section__intro :where(p:not(.ta-kicker)) {
  max-inline-size: var(--ta-how-intro-body-max-width);
  max-width: var(--ta-how-intro-body-max-width);
}

.ta-how-section__intro :where(h2, h3) + :where(p:not(.ta-kicker)) {
  margin-block-start: 0;
}

.ta-how-section__intro > :where(p:not(.ta-kicker)) + :where(p:not(.ta-kicker)) {
  margin-block-start: var(--ta-how-intro-body-flow-gap);
}


.ta-how-note {
  max-inline-size: var(--ta-how-note-max-width);
  max-width: var(--ta-how-note-max-width);
  margin-block: var(--ta-how-note-margin-top) 0;
  padding-inline-start: var(--ta-how-note-padding-inline-start);
  border-inline-start: 1px solid var(--ta-how-note-border-color);
  color: var(--ta-how-note-color);
  font-size: var(--ta-how-note-font-size);
  line-height: var(--ta-how-note-line-height);
}

.ta-how-verification {
  display: grid;
  gap: var(--ta-how-verification-flow-gap);
  min-inline-size: 0;
}

/* Internal subsection rhythm is deliberately separate from full section
   handoff rhythm. These are groups inside one designed section, not new
   top-level kicker sections. */
.ta-how-verification > :where(.ta-how-check-block, .ta-how-verification__section) + :where(.ta-how-check-block, .ta-how-verification__section) {
  margin-block-start: 0;
}

.ta-how-verification__section,
.ta-how-verification__content {
  min-inline-size: 0;
  margin: 0;
}

.ta-how-verification__content {
  max-inline-size: var(--ta-how-intro-max-width);
  max-width: var(--ta-how-intro-max-width);
  margin-inline: 0 auto;
}

.ta-how-verification__content :where(h3, h4) {
  margin-block: 0 var(--ta-how-intro-heading-body-gap);
}

.ta-how-verification__content :where(p),
.ta-how-check-block :where(p) {
  max-inline-size: var(--ta-how-verification-body-max-width);
  max-width: var(--ta-how-verification-body-max-width);
}

.ta-how-verification__content :where(p) + :where(p),
.ta-how-verification__content :where(p) + .ta-how-verification-list,
.ta-how-check-block :where(p) + :where(p) {
  margin-block-start: var(--ta-how-intro-body-flow-gap);
}

.ta-how-verification-list {
  max-inline-size: var(--ta-how-verification-list-max-width);
  max-width: var(--ta-how-verification-list-max-width);
  margin-block: var(--ta-how-verification-section-gap) 0;
  padding-inline-start: var(--ta-how-verification-list-padding-inline-start);
}

.ta-how-verification__content > .ta-how-verification-list:first-child,
.ta-how-check-list .ta-how-verification-list {
  margin-block-start: 0;
}

.ta-how-verification-list > li + li {
  margin-block-start: var(--ta-how-verification-list-gap);
}

.ta-how-check-block {
  position: relative;
  max-inline-size: var(--ta-how-check-block-max-width);
  max-width: var(--ta-how-check-block-max-width);
  margin-inline: 0 auto;
  padding-block-start: var(--ta-how-check-block-padding-block);
  padding-inline: var(--ta-how-check-block-padding-inline);
  background: var(--ta-how-check-block-bg);
  border-block-start: 0;
  border-inline-start-width: var(--ta-how-check-block-accent-width);
  border-inline-start-color: var(--ta-how-check-block-accent-color);
  border-radius: var(--ta-how-check-block-radius);
}

.ta-how-verification > .ta-how-check-block:first-child {
  padding-block-start: 0;
}

.ta-how-check-block :where(h3, h4) {
  margin-block: 0 var(--ta-how-check-block-heading-body-gap);
  max-inline-size: none;
  max-width: none;
  font-size: var(--ta-how-check-block-heading-font-size);
  line-height: var(--ta-how-check-block-heading-line-height);
  text-wrap: normal;
}

@media (min-width: 768px) {
  .ta-how-check-block :where(h3, h4) {
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

@media (max-width: 767px) {
  .ta-how-check-block :where(h3, h4) {
    white-space: normal;
    text-wrap: normal;
  }
}

.ta-how-check-list {
  max-inline-size: var(--ta-how-verification-list-max-width);
  max-width: var(--ta-how-verification-list-max-width);
  margin-block-start: var(--ta-how-check-list-margin-top);
  padding-block-start: var(--ta-how-check-list-padding-block);
  padding-inline: var(--ta-how-check-list-padding-inline);
  background: var(--ta-how-check-list-bg);
  border-block-start: 1px solid var(--ta-how-check-list-border-color);
  border-radius: calc(var(--ta-how-check-block-radius) * 0.75);
}

.ta-how-check-list__label {
  margin-block: 0 var(--ta-space-3);
  color: var(--ta-how-check-list-label-color);
  font-size: var(--ta-how-check-list-label-font-size);
  font-weight: var(--ta-how-check-list-label-font-weight);
  letter-spacing: var(--ta-how-check-list-label-letter-spacing);
  line-height: var(--ta-line-height-tight);
  text-transform: var(--ta-how-check-list-label-text-transform);
}

.ta-how-definition-list {
  display: grid;
  inline-size: 100%;
  max-inline-size: var(--ta-how-definition-list-max-width);
  max-width: var(--ta-how-definition-list-max-width);
  margin-block: var(--ta-how-verification-section-gap) 0;
  border-block-start: 1px solid var(--ta-how-definition-list-border-color);
}

.ta-how-definition-row {
  display: grid;
  inline-size: 100%;
  grid-template-columns: minmax(0, var(--ta-how-definition-list-term-width)) minmax(0, 1fr);
  column-gap: var(--ta-how-definition-list-row-gap);
  row-gap: calc(var(--ta-how-definition-list-row-gap) * 0.5);
  align-items: start;
  padding-block: var(--ta-how-definition-list-row-padding-block);
}

.ta-how-definition-row + .ta-how-definition-row {
  border-block-start: 1px solid var(--ta-how-definition-list-border-color);
}

.ta-how-definition-row__term {
  display: block;
  grid-column: 1;
  grid-row: 1;
  min-inline-size: 0;
  color: var(--ta-how-definition-list-term-color);
  font-size: var(--ta-how-definition-list-term-font-size);
  font-weight: var(--ta-how-definition-list-term-font-weight);
  line-height: var(--ta-content-line-height);
}

.ta-how-definition-row > p {
  grid-column: 2;
  grid-row: 1;
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
  margin: 0;
}

@media (max-width: 767px) {
  .ta-how-definition-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ta-how-definition-row__term,
  .ta-how-definition-row > p {
    grid-column: 1;
    grid-row: auto;
  }
}

.ta-how-process,
.ta-how-principles,
.ta-how-expect-grid {
  display: grid;
  grid-auto-flow: row;
  align-items: stretch;
  min-inline-size: 0;
}

.ta-how-process {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ta-how-process-grid-gap);
}

.ta-how-principles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ta-how-principles-grid-gap);
}

.ta-how-expect-grid {
  grid-template-columns: var(--ta-how-expect-grid-template-columns);
  gap: var(--ta-how-expect-grid-gap);
  padding-block: var(--ta-how-expect-padding-block);
}

.ta-how-process > *,
.ta-how-principles > *,
.ta-how-expect-grid > * {
  min-inline-size: 0;
  margin: 0;
}

.ta-how-process-card,
.ta-how-principle-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ta-how-process-card {
  gap: 0;
  padding: var(--ta-how-process-card-padding-block) var(--ta-how-process-card-padding-inline);
  background: var(--ta-how-process-card-bg);
  border: 1px solid var(--ta-how-process-card-border-color);
  border-radius: var(--ta-how-process-card-radius);
}

.ta-how-process-card :where(h3, h4) {
  margin-block: 0 var(--ta-how-process-card-heading-body-gap);
  font-size: var(--ta-how-process-card-title-font-size);
  line-height: var(--ta-how-process-card-title-line-height);
}

.ta-how-process-card__step {
  display: block;
  margin-block-end: var(--ta-space-2);
  color: var(--ta-color-primary);
  font-size: var(--ta-font-size-xs);
  font-weight: var(--ta-font-weight-semibold);
  letter-spacing: 0.08em;
  line-height: 1;
}

.ta-how-process-card__heading {
  min-block-size: var(--ta-how-process-card-heading-min-block-size);
  margin-block-end: var(--ta-how-process-card-heading-body-gap);
}

.ta-how-process-card__heading :where(h3, h4) {
  min-block-size: 0;
  margin: 0;
}

.ta-how-principle-card {
  gap: var(--ta-how-principle-card-gap);
  padding: var(--ta-how-principle-card-padding-block) var(--ta-how-principle-card-padding-inline);
  background-color: var(--ta-how-principle-card-bg);
  border: 1px solid var(--ta-how-principle-card-border-color);
  border-radius: var(--ta-how-principle-card-radius);
  box-shadow: var(--ta-how-principle-card-shadow);
}

.ta-how-section--textured-cards .ta-how-principle-card {
  background-image:
    linear-gradient(var(--ta-how-principle-card-texture-overlay), var(--ta-how-principle-card-texture-overlay)),
    var(--ta-how-card-texture-image, none);
  background-size: auto, var(--ta-how-principle-card-texture-size);
  background-repeat: no-repeat, var(--ta-how-principle-card-texture-repeat);
  background-position: center, var(--ta-how-principle-card-texture-position-1);
}

.ta-how-section--textured-cards .ta-how-principle-card:nth-child(1) { background-position: center, var(--ta-how-principle-card-texture-position-1); }
.ta-how-section--textured-cards .ta-how-principle-card:nth-child(2) { background-position: center, var(--ta-how-principle-card-texture-position-2); }
.ta-how-section--textured-cards .ta-how-principle-card:nth-child(3) { background-position: center, var(--ta-how-principle-card-texture-position-3); }
.ta-how-section--textured-cards .ta-how-principle-card:nth-child(4) { background-position: center, var(--ta-how-principle-card-texture-position-4); }

.ta-how-principle-card :where(h3, h4) {
  min-block-size: var(--ta-how-principle-card-heading-min-block-size);
  margin: 0 0 var(--ta-how-principle-card-heading-body-gap);
}

.ta-how-principle-card :where(h3, h4) + :where(p),
.ta-how-principle-card :where(p) {
  margin-block-start: 0;
  margin-block-end: 0;
}

.ta-how-principle-card__icon {
  --ta-icon-size: var(--ta-how-principle-icon-size);
  --ta-icon-color: var(--ta-how-principle-icon-color);
  --ta-icon-opacity: var(--ta-how-principle-icon-opacity);
  margin-block-end: var(--ta-how-principle-icon-margin-bottom);
}


.ta-how-service-table-wrap {
  box-sizing: border-box;
  inline-size: 100%;
  width: 100%;
  max-width: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ta-how-service-table {
  width: 100%;
  min-width: var(--ta-how-table-min-width);
  table-layout: fixed;
  border-collapse: collapse;
  border-block-start: 1px solid var(--ta-how-table-border-color);
}

.ta-how-service-table :where(th, td) {
  padding: var(--ta-how-table-cell-padding-block) var(--ta-how-table-cell-padding-inline);
  text-align: left;
  vertical-align: top;
  border-block-end: 1px solid var(--ta-how-table-border-color);
}

.ta-how-service-table th {
  color: var(--ta-color-text);
  font-weight: var(--ta-font-weight-semibold);
  background: var(--ta-how-table-header-bg);
}

.ta-how-service-table tbody tr:nth-child(even) {
  background: var(--ta-how-table-row-alt-bg);
}

.ta-how-service-table tbody tr:last-child td {
  padding-block-end: var(--ta-how-table-final-row-padding-block-end);
  border-block-end: 0;
}

.ta-how-service-table td {
  color: var(--ta-color-text-soft);
}

.ta-how-service-table :where(th, td):nth-child(1) { width: var(--ta-how-table-first-column-width); }
.ta-how-service-table :where(th, td):nth-child(2) { width: var(--ta-how-table-frequency-column-width); }
.ta-how-service-table :where(th, td):nth-child(3) { width: var(--ta-how-table-communication-column-width); }
.ta-how-service-table :where(th, td):nth-child(4) { width: var(--ta-how-table-focus-column-width); }

.ta-how-service-table td:first-child {
  color: var(--ta-color-text);
  font-weight: var(--ta-font-weight-medium);
}

@media (max-width: 767px) {
  .ta-how-process,
  .ta-how-principles,
  .ta-how-expect-grid {
    grid-template-columns: 1fr;
  }

  .ta-how-expect-grid {
    row-gap: var(--ta-how-expect-grid-row-gap-mobile);
  }

  .ta-how-expect-grid > :where(div, article) {
    padding-block: var(--ta-how-expect-item-padding-block-mobile);
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .ta-how-process,
  .ta-how-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Service adjacent-section rhythm. How It Works has the same no-double-stack
   behaviour in its own section contract above, while keeping its component
   selectors separate. */
.ta-service-section + .ta-service-section {
  margin-block-start: 0;
  padding-block-start: 0;
}

.ta-service-section--related {
  margin-block-start: 0;
  padding-block-start: 0;
  padding-block-end: var(--ta-service-section-exit-space);
}

/* =========================================
   RHYTHM DEBUG OVERLAY
   Admin-only diagnostic overlay. It does not participate in normal rendering
   and carries no production spacing or terminal-trim rules. Enable with
   ?ta_rhythm_debug=1 while logged in as an administrator when inspecting
   rhythm ownership.
========================================= */
.ta-rhythm-debug {
  --ta-debug-rhythm-section: rgba(38, 96, 190, 0.95);
  --ta-debug-rhythm-inner: rgba(25, 150, 180, 0.95);
  --ta-debug-rhythm-component: rgba(132, 72, 190, 0.95);
  --ta-debug-rhythm-concrete: rgba(219, 128, 35, 0.95);
  --ta-debug-rhythm-kicker: rgba(22, 128, 72, 0.95);
  --ta-debug-rhythm-padding: rgba(220, 64, 64, 0.08);
}

.ta-rhythm-debug :where(.ta-landing-section, .ta-service-section, .ta-how-section) {
  position: relative;
  outline: 2px solid var(--ta-debug-rhythm-section);
  outline-offset: -2px;
  background-image:
    linear-gradient(
      to bottom,
      var(--ta-debug-rhythm-padding) 0,
      var(--ta-debug-rhythm-padding) var(--ta-page-section-padding-block),
      transparent var(--ta-page-section-padding-block),
      transparent calc(100% - var(--ta-page-section-padding-block)),
      var(--ta-debug-rhythm-padding) calc(100% - var(--ta-page-section-padding-block)),
      var(--ta-debug-rhythm-padding) 100%
    );
}

.ta-rhythm-debug :where(.ta-landing-section, .ta-service-section, .ta-how-section)::before {
  content: "section padding";
  position: absolute;
  inset-block-start: 0.15rem;
  inset-inline-start: max(0.5rem, calc((100% - var(--ta-page-section-content-max-width, var(--ta-how-content-max-width))) / 2 - 4.5rem));
  z-index: 1;
  padding: 0.12rem 0.35rem;
  border: 1px solid var(--ta-debug-rhythm-section);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ta-debug-rhythm-section);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.ta-rhythm-debug :where(.ta-landing-section__inner, .ta-service-section__inner, .ta-how-section__inner) {
  outline: 2px dashed var(--ta-debug-rhythm-inner);
  outline-offset: 4px;
}

.ta-rhythm-debug :where(.ta-kicker) {
  outline: 2px solid var(--ta-debug-rhythm-kicker);
  outline-offset: 3px;
  background: rgba(22, 128, 72, 0.08);
}

.ta-rhythm-debug :where(.ta-landing-section__intro, .ta-service-section__intro, .ta-how-section__intro) {
  outline: 1px dashed rgba(22, 128, 72, 0.7);
  outline-offset: 6px;
}

.ta-rhythm-debug :where(
  .ta-card-grid,
  .ta-service-scope-grid,
  .ta-service-outcomes__grid,
  .ta-service-split,
  .ta-landing-panel-grid,
  .ta-landing-support-grid,
  .ta-how-service-table-wrap,
  .ta-how-principles,
  .ta-how-verification,
  .ta-how-check-block,
  .ta-how-check-list,
  .ta-how-definition-list,
  .ta-next-links
) {
  outline: 2px solid var(--ta-debug-rhythm-concrete);
  outline-offset: 12px;
}

.ta-rhythm-debug :where(
  .ta-landing-section__inner > :last-child,
  .ta-service-section__inner > :last-child,
  .ta-how-section__inner > :last-child,
  .ta-component:last-child,
  .ta-card-grid:last-child,
  .ta-service-scope-grid:last-child,
  .ta-service-outcomes__grid:last-child,
  .ta-service-split:last-child,
  .ta-landing-panel-grid:last-child,
  .ta-landing-support-grid:last-child,
  .ta-how-service-table-wrap:last-child,
  .ta-how-principles:last-child,
  .ta-how-verification:last-child,
  .ta-how-definition-list:last-child
) {
  position: relative;
}

.ta-rhythm-debug :where(
  .ta-landing-section__inner > :last-child,
  .ta-service-section__inner > :last-child,
  .ta-how-section__inner > :last-child,
  .ta-component:last-child,
  .ta-card-grid:last-child,
  .ta-service-scope-grid:last-child,
  .ta-service-outcomes__grid:last-child,
  .ta-service-split:last-child,
  .ta-landing-panel-grid:last-child,
  .ta-landing-support-grid:last-child,
  .ta-how-service-table-wrap:last-child,
  .ta-how-principles:last-child,
  .ta-how-verification:last-child,
  .ta-how-definition-list:last-child
)::after {
  content: "terminal edge";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 2;
  display: block;
  inline-size: max-content;
  margin-block-start: 0.35rem;
  padding: 0.12rem 0.35rem;
  border: 1px solid var(--ta-debug-rhythm-component);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ta-debug-rhythm-component);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Company Information rhythm debug support.
   Diagnostic only: reveals company page spacing ownership without changing
   production layout. Enable with ?ta_rhythm_debug=1 while logged in as an
   administrator. */
.ta-rhythm-debug :where(.ta-company-content) {
  outline: 2px dashed var(--ta-debug-rhythm-inner);
  outline-offset: 8px;
}

.ta-rhythm-debug :where(.ta-company-body) {
  position: relative;
  outline: 2px solid var(--ta-debug-rhythm-component);
  outline-offset: 12px;
}

.ta-rhythm-debug :where(.ta-company-body)::before {
  content: "company section handoff";
  position: absolute;
  inset-block-start: -1.55rem;
  inset-inline-start: 0;
  z-index: 2;
  padding: 0.12rem 0.35rem;
  border: 1px solid var(--ta-debug-rhythm-component);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ta-debug-rhythm-component);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.ta-rhythm-debug :where(.ta-company-section) {
  position: relative;
  outline: 2px solid var(--ta-debug-rhythm-section);
  outline-offset: -2px;
  background: rgba(38, 96, 190, 0.035);
}

.ta-rhythm-debug :where(.ta-company-section)::before {
  content: "company section";
  position: absolute;
  inset-block-start: 0.15rem;
  inset-inline-start: -0.25rem;
  z-index: 2;
  transform: translateX(-100%);
  padding: 0.12rem 0.35rem;
  border: 1px solid var(--ta-debug-rhythm-section);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ta-debug-rhythm-section);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.ta-rhythm-debug :where(.ta-company-record) {
  outline: 2px solid var(--ta-debug-rhythm-concrete);
  outline-offset: 6px;
}

.ta-rhythm-debug :where(.ta-company-record-row) {
  outline: 1px dashed var(--ta-debug-rhythm-concrete);
  outline-offset: 2px;
  background: rgba(219, 128, 35, 0.045);
}

.ta-rhythm-debug :where(.ta-company-note, .ta-company-link-list, .ta-company-related) {
  outline: 2px solid var(--ta-debug-rhythm-kicker);
  outline-offset: 6px;
  background: rgba(22, 128, 72, 0.045);
}

.ta-rhythm-debug :where(
  .ta-company-section > :last-child,
  .ta-company-record:last-child,
  .ta-company-note:last-child,
  .ta-company-link-list:last-child,
  .ta-company-related:last-child
) {
  position: relative;
}

.ta-rhythm-debug :where(
  .ta-company-section > :last-child,
  .ta-company-record:last-child,
  .ta-company-note:last-child,
  .ta-company-link-list:last-child,
  .ta-company-related:last-child
)::after {
  content: "company terminal edge";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 2;
  display: block;
  inline-size: max-content;
  margin-block-start: 0.35rem;
  padding: 0.12rem 0.35rem;
  border: 1px solid var(--ta-debug-rhythm-component);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ta-debug-rhythm-component);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

/* =========================================
   SERVICE OUTCOMES + RELATED CANONICAL MODEL

   This is the single production model for the service outcomes and related
   link components. This model is now owned by explicit section modifiers rather than
   structural inference selectors.

   Model:
   - outcomes outer wrapper is structural
   - outcomes inner component is a compact flex row panel
   - related links are a compact block stack
   - section rhythm remains token-owned
========================================= */

/* Service sections: no ad hoc margin stacking. */
.ta-service-section,
.ta-service-section--muted,
.ta-service-section--textured,
.ta-service-section--textured-cards,
.ta-service-section--quiet,
.ta-service-section--outcomes,
.ta-service-section--related {
  margin-block-start: 0;
}

/* Service terminal components hand back cleanly to section rhythm. */
.ta-service-section__inner > .ta-component--terminal:last-child,
.ta-service-section__inner > .ta-service-scope-grid:last-child,
.ta-service-section__inner > .ta-service-starting-grid:last-child,
.ta-service-section__inner > .ta-service-split:last-child,
.ta-service-section__inner > .ta-service-outcomes:last-child,
.ta-service-section__inner > .ta-next-links:last-child {
  margin-block-end: 0;
}

/* Split sections remain start-aligned. */
.ta-service-split {
  align-items: start;
}

.ta-service-split.ta-component--terminal,
.ta-service-split__media {
  margin-block: 0;
  padding-block-end: 0;
}

.ta-service-split__content > .ta-service-section__intro:only-child {
  margin-block-end: 0;
}


/* OUTCOMES: outer wrapper is structural only. */
.ta-service-section--outcomes .ta-service-outcomes {
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-block-size: 0;
  block-size: auto;
  height: auto;
}

/* OUTCOMES: compact visible panel. Use flex to avoid inherited grid stretch. */
.ta-service-section--outcomes .ta-service-outcomes__grid {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 0;
  block-size: auto;
  height: auto;
  padding: var(--ta-service-outcomes-panel-padding-block) var(--ta-service-outcomes-panel-padding-inline);
  background: var(--ta-service-outcomes-bg);
  border: 1px solid var(--ta-service-outcomes-border-color);
  border-radius: var(--ta-service-outcomes-radius);
  box-shadow: var(--ta-service-outcomes-shadow);
}

/* Outcomes stack content contract: the grid may only contain outcome item
   wrappers. WordPress/wpautop can create direct paragraph or br artefacts
   inside Custom HTML; keep the guard scoped to the explicit outcomes section. */
.ta-service-section--outcomes .ta-service-outcomes__grid > :where(p, br) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  block-size: 0 !important;
}

.ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article) {
  position: relative;
  flex: 1 1 0;
  min-inline-size: 0;
  min-block-size: 0;
  block-size: auto;
  height: auto;
  padding-inline: var(--ta-service-outcome-panel-item-padding-inline);
  padding-block: var(--ta-service-outcome-panel-item-padding-block);
  margin: 0;
  align-self: flex-start;
}

.ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article):empty {
  display: none;
}

.ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article):first-child {
  padding-inline-start: 0;
}

.ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article):last-child,
.ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article):nth-child(3) {
  padding-inline-end: 0;
}

.ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article) > :last-child {
  margin-block-end: 0;
}

/* Outcome dividers exist only between real items and match the text mass. */
.ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article):not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: var(--ta-service-outcome-panel-divider-start);
  inline-size: var(--ta-service-outcome-item-separator-width);
  block-size: var(--ta-service-outcome-panel-divider-height);
  background: var(--ta-service-outcome-item-separator-color);
  opacity: var(--ta-service-outcome-item-separator-opacity);
}

.ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article):nth-child(3)::after,
.ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article):last-child::after {
  content: none;
  display: none;
}

.ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article)::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: var(--ta-service-outcome-panel-item-padding-inline);
  width: var(--ta-service-outcome-item-accent-width);
  height: var(--ta-service-outcome-item-accent-height);
  background: var(--ta-service-outcome-item-accent-color);
}

.ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article):first-child::before {
  inset-inline-start: 0;
}

.ta-service-section--outcomes .ta-service-outcomes__grid :where(h3, h4) {
  margin-block-start: 0;
  margin-block-end: var(--ta-service-outcome-heading-body-gap);
}

.ta-service-section--outcomes .ta-service-outcomes__grid :where(h3, h4) + :where(p) {
  margin-block-start: 0;
}

.ta-service-section--outcomes .ta-service-outcomes__grid :where(p) {
  font-size: var(--ta-service-outcome-item-text-size);
  line-height: var(--ta-service-outcome-item-text-line-height);
}

@media (max-width: 767px) {
  .ta-service-section--outcomes .ta-service-outcomes__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ta-service-outcomes-panel-row-gap-mobile);
    padding-block-start: var(--ta-service-outcomes-panel-padding-block-start-mobile);
    padding-block-end: var(--ta-service-outcomes-panel-padding-block-end-mobile);
  }

  .ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article) {
    flex: 0 0 auto;
    padding-inline: 0;
    padding-block-start: var(--ta-service-outcome-panel-item-padding-block-start-mobile);
    padding-block-end: var(--ta-service-outcome-panel-item-padding-block-end-mobile);
  }

  .ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article):last-child {
    padding-block-end: var(--ta-service-outcome-panel-final-item-padding-block-end-mobile);
  }

  .ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article):not(:last-child)::after {
    content: none;
    display: none;
  }

  .ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article)::before,
  .ta-service-section--outcomes .ta-service-outcomes__grid > :where(div, article):first-child::before {
    inset-inline-start: 0;
  }

}

/* =========================================
   SERVICE SECTION RHYTHM AUTHORITY

   Clean structural correction: service sections now use the same entry/exit
   rhythm contract as the How It Works template. The section wrapper owns
   inter-section cadence; terminal split components do not use negative margins
   or selector-specific visual nudges.
========================================= */

/* =========================================
   SERVICE OUTCOMES CONTAINER SIZING

   Outcomes already uses the canonical service section inner container.
   The visible panel was still overflowing that container because the grid
   was set to inline-size: 100% while padding and border were added on top
   of that width. Keep the shared rhythm/width authority intact and make
   the component consume its parent width using border-box sizing.
========================================= */
.ta-service-section--outcomes .ta-service-outcomes,
.ta-service-section--outcomes .ta-service-outcomes__grid {
  box-sizing: border-box;
}

.ta-service-section--outcomes .ta-service-outcomes__grid {
  width: 100%;
  inline-size: 100%;
  max-width: 100%;
  max-inline-size: 100%;
}


/* =========================================
   SERVICE TERMINAL DENSITY RHYTHM

   Keep one shared section rhythm authority, but let the section choose its
   exit token from the terminal component actually present in the rendered
   hierarchy. Outcomes use the explicit .ta-service-section--outcomes
   modifier, so spacing is class-owned rather than inferred from quiet sections.

   This is component-contract spacing, not page/nth-child compensation.
========================================= */
.ta-service-section:has(> .ta-service-section__inner > .ta-service-split:last-child),
.ta-service-section:has(.ta-service-split) {
  padding-block-end: var(--ta-service-section-exit-space-after-split);
}

.ta-service-section--outcomes {
  padding-block-end: var(--ta-service-section-exit-space-after-panel);
}


/* Company Information page
   Layout-only support for editor-managed company/transparency content.
   Uses the shared ancillary shell for alignment with the page band and header/content edge.
   This intentionally reads as a public-record page rather than a service page:
   no card grid, no process blocks, no sales components. */
.ta-company-content {
  width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-ancillary-content-shell-max-width));
  max-width: var(--ta-ancillary-content-shell-max-width);
  margin-inline: auto;
  padding-top: var(--ta-company-content-start-space);
}

.ta-company-body {
  display: block;
}

.ta-company-section + .ta-company-section {
  margin-block-start: var(--ta-company-section-gap);
}

.ta-company-section + .ta-company-section:has(> .ta-company-link-list),
.ta-company-section + .ta-company-section:has(> .ta-company-related) {
  margin-block-start: var(--ta-company-related-section-gap);
}

.ta-company-content > :where(:not(.alignwide):not([class*="alignwide"]):not(.alignfull):not([class*="alignfull"])),
.ta-company-body > :where(:not(.alignwide):not([class*="alignwide"]):not(.alignfull):not([class*="alignfull"])) {
  width: 100%;
  max-width: var(--ta-company-content-max-width);
  margin-inline: 0;
}

.ta-company-content :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  width: 100%;
  max-width: var(--ta-company-content-max-width);
  margin-inline: 0;
  color: var(--ta-color-text-strong);
  text-align: left;
  text-wrap: pretty;
}

.ta-company-content :where(h2, .wp-block-heading) {
  margin-block: 0;
  padding-block-end: 0;
  border: 0;
}

.ta-company-content :where(p, .wp-block-paragraph, ul, ol, dl, blockquote, pre, table, figure, .wp-block-list, .wp-block-table, .wp-block-quote) {
  width: 100%;
  max-width: var(--ta-company-content-max-width);
}

.ta-company-content :where(p, .wp-block-paragraph) {
  font-size: var(--ta-font-size-md);
  line-height: var(--ta-company-content-line-height);
  text-align: left;
  hyphens: none;
}

.ta-company-intro {
  max-width: var(--ta-company-intro-max-width);
  color: var(--ta-color-text-soft);
  font-size: var(--ta-company-intro-font-size);
  line-height: var(--ta-company-content-line-height);
}

.ta-company-section {
  display: grid;
  gap: var(--ta-company-section-inner-gap);
  margin-block: 0;
}

.ta-company-section > :first-child {
  margin-block-start: 0;
}


.ta-company-record {
  display: grid;
  gap: var(--ta-company-record-row-gap);
  margin: 0;
}


.ta-company-record-row {
  display: grid;
  grid-template-columns: minmax(var(--ta-company-record-label-min-width), var(--ta-company-record-label-width)) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--ta-company-record-column-gap);
  row-gap: var(--ta-space-1);
  padding-block: var(--ta-company-record-row-padding-block);
  border: 0;
}

.ta-company-record dt {
  margin: 0;
  padding: 0;
  color: var(--ta-color-muted);
  font-size: var(--ta-font-size-xs);
  font-weight: var(--ta-font-weight-bold);
  letter-spacing: var(--ta-kicker-letter-spacing);
  line-height: var(--ta-line-height-tight);
  text-transform: uppercase;
}

.ta-company-record dd {
  margin: 0;
  padding: 0;
  color: var(--ta-color-text-strong);
  font-size: var(--ta-font-size-md);
  font-weight: var(--ta-font-weight-semibold);
  line-height: var(--ta-line-height-normal);
}

/* Inline arrow link for factual record/detail values.
   This is separate from .ta-link-arrow, which is a navigation/list link. */
.ta-record-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ta-link-arrow-gap);
  width: auto;
  max-width: 100%;
  color: var(--ta-content-link-color);
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
  vertical-align: baseline;
}

.ta-record-link:hover,
.ta-record-link:focus-visible {
  color: var(--ta-content-link-hover-color);
}

.ta-record-link__text {
  text-decoration-line: underline;
  text-decoration-thickness: var(--ta-link-arrow-decoration-thickness);
  text-underline-offset: var(--ta-link-arrow-underline-offset);
}

.ta-record-link:hover .ta-record-link__text,
.ta-record-link:focus-visible .ta-record-link__text {
  text-decoration-thickness: var(--ta-link-arrow-decoration-thickness);
}

.ta-record-link__arrow {
  flex: 0 0 auto;
  color: currentColor;
  line-height: 1;
  opacity: var(--ta-link-arrow-opacity);
  text-decoration: none;
  transform: translateX(0);
  transition: var(--ta-link-arrow-transition);
}

.ta-record-link:hover .ta-record-link__arrow,
.ta-record-link:focus-visible .ta-record-link__arrow {
  opacity: 1;
  transform: translateX(var(--ta-link-arrow-hover-shift));
}

.ta-company-note {
  max-width: var(--ta-company-intro-max-width);
  margin-block: 0;
  color: var(--ta-color-text-soft);
  font-size: var(--ta-font-size-md);
  line-height: var(--ta-company-content-line-height);
}


.ta-company-related,
.ta-company-link-list {
  display: grid;
  gap: var(--ta-space-1);
  margin-block: 0;
  padding-inline-start: var(--ta-space-5);
}

.ta-company-related li,
.ta-company-link-list li {
  padding-inline-start: var(--ta-space-1);
}

@media (max-width: 900px) {
  .ta-company-content {
    padding-top: var(--ta-company-content-start-space-mobile);
  }

  .ta-company-record-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--ta-space-1);
  }
}

/* =========================================
   MAKING TAX DIGITAL PAGE TEMPLATE
   Uses the standard non-service page band, document spine, content-section,
   kicker, contact form, and button contracts. These selectors only arrange
   the MTD two-column layout and compact form surface.
========================================= */
.ta-mtd-content {
  padding-top: var(--ta-document-content-start-space);
}

.ta-mtd-content > .ta-mtd-lead-grid,
.ta-mtd-content > .ta-mtd-wide-section {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ta-ancillary-content-shell-max-width);
}

.ta-mtd-content > .ta-mtd-lead-grid {
  margin-top: 0;
}

.ta-mtd-content > .ta-mtd-lead-grid + .ta-mtd-wide-section {
  margin-top: var(--ta-content-section-stack-gap);
}

.ta-mtd-lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--ta-mtd-lead-aside-min-width), var(--ta-mtd-lead-aside-column-fr));
  gap: var(--ta-mtd-lead-grid-gap);
  align-items: start;
}

.ta-mtd-lead-main,
.ta-mtd-lead-aside,
.ta-mtd-form-shell,
.ta-mtd-inline-note,
.ta-mtd-wide-section {
  box-sizing: border-box;
  min-width: 0;
}

.ta-mtd-lead-aside {
  display: grid;
  gap: var(--ta-document-content-section-gap);
}

.ta-mtd-form-shell {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.ta-mtd-form-shell > :first-child,
.ta-mtd-inline-note > :first-child {
  margin-block-start: 0;
}

.ta-mtd-form-shell > :last-child,
.ta-mtd-inline-note > :last-child {
  margin-block-end: 0;
}

.ta-mtd-form-shell > .ta-kicker,
.ta-mtd-inline-note > .ta-kicker {
  margin: 0 0 var(--ta-kicker-heading-gap);
}

.ta-mtd-form-shell > .ta-kicker + :where(h1, h2, h3, h4, h5, h6),
.ta-mtd-inline-note > .ta-kicker + :where(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

.ta-document-content .ta-content-section > :where(h2, .wp-block-heading:not([data-level]), .wp-block-heading[data-level="2"]),
.ta-mtd-form-shell > :where(h2, .wp-block-heading:not([data-level]), .wp-block-heading[data-level="2"]),
.ta-mtd-inline-note > :where(h2, .wp-block-heading:not([data-level]), .wp-block-heading[data-level="2"]) {
  font-size: var(--ta-document-content-h2-font-size);
  line-height: var(--ta-document-content-h2-line-height);
  font-weight: var(--ta-document-content-h2-font-weight);
  color: var(--ta-document-content-h2-color);
}

.ta-document-content .ta-content-section > :where(h3, .wp-block-heading[data-level="3"]),
.ta-mtd-form-shell > :where(h3, .wp-block-heading[data-level="3"]),
.ta-mtd-inline-note > :where(h3, .wp-block-heading[data-level="3"]) {
  font-size: var(--ta-document-content-h3-font-size);
  line-height: var(--ta-document-content-h3-line-height);
}

.ta-mtd-form-shell > :where(h2, h3, h4, h5, h6) + :where(p, ul, ol),
.ta-mtd-inline-note > :where(h2, h3, h4, h5, h6) + :where(p, ul, ol) {
  margin-block-start: 0;
}

.ta-mtd-form-shell > * + *,
.ta-mtd-inline-note > * + * {
  margin-block-start: var(--ta-document-content-block-gap);
}

.ta-mtd-inline-note {
  margin-block-start: var(--ta-content-section-stack-gap);
}

.ta-mtd-checklist,
.ta-mtd-stage-list {
  display: grid;
  gap: var(--ta-mtd-list-gap);
  padding-inline-start: var(--ta-content-list-indent);
}

.ta-contact-form--compact {
  gap: var(--ta-contact-form-gap);
}

.ta-contact-form--compact > * + * {
  margin-top: 0;
}

.ta-contact-form--compact .ta-contact-grid {
  gap: var(--ta-contact-grid-gap);
}

.ta-contact-textarea--compact {
  min-height: var(--ta-mtd-compact-textarea-min-height);
}

.ta-mtd-form-shell .ta-contact-required-note {
  margin-block-start: var(--ta-mtd-form-required-note-space);
  font-size: var(--ta-content-small-font-size);
}

@media (max-width: 900px) {
  .ta-mtd-content {
    padding-top: var(--ta-document-content-start-space-mobile);
  }

  .ta-mtd-lead-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ta-document-content-section-gap);
  }

  .ta-mtd-form-shell .ta-contact-actions {
    margin-top: var(--ta-space-2);
  }

  .ta-mtd-content > .ta-mtd-lead-grid + .ta-mtd-wide-section {
    margin-top: 0;
  }
}

/* Sign-in page template.
 * Branded public SSO entry point; does not alter direct WordPress admin login.
 * v591 keeps the shorter heading on one line on normal desktop widths.
 */
.ta-sign-in-page {
  min-height: clamp(30rem, 62vh, 44rem);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--ta-color-primary) 10%, transparent), transparent 30%),
    linear-gradient(180deg, var(--ta-page-band-bg-start) 0%, var(--ta-surface-page) 100%);
}

.ta-sign-in-page__inner {
  width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-page-band-content-max-width));
  margin-inline: auto;
}

.ta-sign-in-card {
  max-width: 44rem;
  padding: clamp(1.5rem, 4vw, 2.35rem);
  border: 1px solid var(--ta-color-border);
  border-radius: var(--ta-radius);
  background: color-mix(in srgb, var(--ta-surface-page) 92%, white 8%);
  box-shadow: var(--ta-shadow);
}

.ta-sign-in-card > :first-child {
  margin-block-start: 0;
}

.ta-sign-in-card > h1 {
  max-width: 24ch;
  margin: 0;
  color: var(--ta-color-text-strong);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: var(--ta-font-weight-semibold);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.ta-sign-in-card__summary {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: var(--ta-color-text-muted);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.1rem);
  line-height: 1.55;
}

.ta-sign-in-notice {
  display: grid;
  gap: 0.25rem;
  max-width: 39rem;
  margin: 1.35rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, #8a1f1f 26%, transparent);
  border-radius: var(--ta-radius-sm);
  background: color-mix(in srgb, #8a1f1f 8%, transparent);
  color: #5f1515;
  line-height: 1.45;
}

.ta-sign-in-actions {
  margin-block-start: 1.6rem;
}

.ta-site-main .ta-sign-in-button {
  min-width: min(100%, 17rem);
}

.ta-sign-in-card__note {
  max-width: 34rem;
  margin: 1.15rem 0 0;
  color: var(--ta-color-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .ta-sign-in-page {
    min-height: auto;
    align-items: flex-start;
    padding-block: clamp(2rem, 9vw, 3rem);
  }

  .ta-sign-in-card {
    padding: clamp(1.25rem, 6vw, 1.75rem);
  }

  .ta-sign-in-card > h1 {
    max-width: 16ch;
  }

  .ta-site-main .ta-sign-in-button {
    width: 100%;
  }
}