@charset "UTF-8";
html {
  width: 100%;
  font-size: var(--body-default-font-size);
}

body {
  position: relative;
  width: 100%;
  font-size: var(--body-default-font-size);
  line-height: var(--body-default-line-height);
  font-family: var(--body-font-family);
  font-weight: var(--body-default-font-weight);
  font-style: normal;
  color: var(--color-type-body);
  /* Overflow-wrap (P57) — a pasted long string (URL, token, hash) breaks to the next
     line instead of overflowing its block. break-word breaks only when a word would
     otherwise overflow, so it is safe as a global default and invisible everywhere else. */
  overflow-wrap: break-word;
  /* Text-wrap (P56) — no one-word orphan, no stranded short last line. pretty has
     no line-count cap, so it is safe on long copy; inert on single-line text and
     overridden by the headings' balance. */
  text-wrap: pretty;
}

.fw-wrapper {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

main {
  position: relative;
  width: 100%;
  background-color: var(--color-white);
}

section {
  position: relative;
  width: 100%;
  height: auto;
  padding: var(--content-vertical-padding-normal) 0px;
}

.fw-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  max-width: var(--content-width);
  margin: 0px auto;
  padding-left: var(--content-horizontal-padding);
  padding-right: var(--content-horizontal-padding);
  gap: var(--inner-spacing-lg);
}

.fw-sub-content {
  width: 100%;
  height: auto;
  display: flex;
  margin: 0px auto;
  gap: var(--inner-spacing-lg);
}

a {
  position: relative;
  color: var(--text-link-color);
  transition: color var(--transition-timing-normal) var(--transition-ease-1);
  text-decoration-color: var(--text-link-underline-color);
  text-decoration-thickness: var(--text-link-underline-height);
  text-underline-offset: var(--text-link-underline-offset);
  /* Link-underline composite (P58) — the 4th axis + explicit skip-ink. Colour,
     thickness, offset, and now style are all tokenized and DECOUPLED from the text
     colour; skip-ink keeps descenders (g, y, p) clear of the line. */
  text-decoration-style: var(--text-link-underline-style);
  text-decoration-skip-ink: auto;
}
a:visited {
  color: var(--text-link-color-visited);
}
a:hover, .fw-qa a.is-hovered {
  color: var(--text-link-color-hover);
  text-decoration-thickness: var(--text-link-underline-height-hover);
  text-decoration-color: var(--text-link-underline-color-hover);
}

.anchor-span,
section[id] {
  scroll-margin-top: var(--scroll-anchor-offset);
}

.fw-heading-xs,
.fw-heading-sm,
.fw-heading-md,
.fw-heading-lg,
.fw-heading-xl,
.fw-heading-2xl {
  font-style: normal;
  margin: 0;
  width: 100%;
  font-weight: var(--heading-font-weight);
  font-family: var(--heading-font-family);
  /* Text-wrap (P56) — even, rag-free multi-line headings. Browsers cap balance at
     ~6 lines (Chromium) / ~10 (Firefox) and fall back to normal beyond it; safe
     here because headings are short. A DEFAULT on the role, not a .text-balance utility. */
  text-wrap: balance;
}

.fw-heading-xs {
  font-family: var(--heading-font-family);
  font-size: var(--heading-xs-font-size);
  line-height: var(--heading-xs-line-height);
  font-weight: var(--heading-font-weight);
}

.fw-heading-sm {
  font-family: var(--heading-font-family);
  font-size: var(--heading-sm-font-size);
  line-height: var(--heading-sm-line-height);
}

.fw-heading-md {
  font-family: var(--heading-font-family);
  font-size: var(--heading-md-font-size);
  line-height: var(--heading-md-line-height);
}

.fw-heading-lg {
  font-size: var(--heading-lg-font-size);
  line-height: var(--heading-lg-line-height);
}

.fw-heading-xl {
  font-size: var(--heading-xl-font-size);
  line-height: var(--heading-xl-line-height);
  font-family: var(--display-font-family);
  font-weight: var(--display-font-weight);
}

.fw-heading-2xl {
  font-size: var(--heading-2xl-font-size);
  line-height: var(--heading-2xl-line-height);
  font-family: var(--display-font-family);
  font-weight: var(--display-font-weight);
}

.fw-tabular {
  font-variant-numeric: tabular-nums slashed-zero;
}

.fw-eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-eyebrow);
}

p {
  width: 100%;
}

.fw-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fw-text-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--text-clamp-max-lines);
  line-clamp: var(--text-clamp-max-lines);
  overflow: hidden;
}

ul,
ol {
  width: 100%;
  padding-left: 14px;
}
ul li,
ol li {
  margin-top: var(--list-item-vertical-margin);
  margin-bottom: var(--list-item-vertical-margin);
}
ul li::marker,
ol li::marker {
  color: var(--list-marker-color);
}

hr {
  background: var(--hr-color);
  margin: 0;
  text-align: left;
  border: 0;
  width: var(--hr-width);
  height: var(--hr-height);
}

.fw-vertical-rule {
  align-self: stretch;
  width: var(--hr-height);
  min-height: 1em;
  background: var(--hr-color);
}

blockquote {
  border-left: 1px solid var(--block-quote-border-color);
  font-size: var(--block-quote-font-size);
  font-style: var(--block-quote-font-style);
  margin: calc(var(--block-quote-vertical-sapcing) * 2) 0;
  padding: var(--block-quote-vertical-sapcing) var(--block-quote-horizontal-sapcing);
}
blockquote p {
  max-width: var(--block-quote-max-width);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
  border: var(--table-border-thickness) solid var(--table-border-color);
  text-align: left;
}

thead th {
  background-color: var(--table-head-background-color);
  color: var(--table-head-text-color);
  font-weight: var(--table-head-font-weight);
}

input[type]:where(:not([type=checkbox]):not([type=radio])),
button,
optgroup,
select,
textarea {
  max-width: var(--input-max-width);
  min-height: var(--control-height);
  font-family: var(--input-font-family);
  font-weight: var(--input-font-weight);
  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
  outline: none;
  border: var(--input-border-thickness) solid var(--input-border-color);
  background-color: var(--input-background-color);
  color: var(--input-text-color);
  border-radius: var(--input-border-radius);
  -webkit-tap-highlight-color: transparent;
}
input[type]:where(:not([type=checkbox]):not([type=radio])):focus, .fw-qa input[type]:where(:not([type=checkbox]):not([type=radio])).is-focused,
button:focus,
.fw-qa button.is-focused,
optgroup:focus,
.fw-qa optgroup.is-focused,
select:focus,
.fw-qa select.is-focused,
textarea:focus,
.fw-qa textarea.is-focused {
  border: 1px solid var(--input-border-color-focus);
  outline: none;
}
input[type]:where(:not([type=checkbox]):not([type=radio])):disabled,
button:disabled,
optgroup:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
input[type]:where(:not([type=checkbox]):not([type=radio]))::placeholder,
button::placeholder,
optgroup::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--input-placeholder-color);
  opacity: var(--input-placeholder-opacity);
}

input[type=checkbox].fw-frameworker-switch {
  appearance: none;
  -webkit-appearance: none;
  width: var(--switch-width);
  height: var(--switch-height);
  padding: 0;
  border: var(--input-border-thickness) solid var(--switch-track-color);
  border-radius: var(--switch-height);
  background-color: var(--switch-track-color);
  background-image: radial-gradient(circle closest-side, var(--switch-thumb-color) calc(100% - 1px), transparent);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: var(--switch-height) var(--switch-height);
  transition: background-position var(--transition-timing-fast) var(--transition-ease-1), background-color var(--transition-timing-fast) var(--transition-ease-1);
  cursor: pointer;
}
input[type=checkbox].fw-frameworker-switch:checked {
  background-color: var(--switch-track-color-on);
  border-color: var(--switch-track-color-on);
  background-position: right center;
}

input[type=range] {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: none;
  background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  height: var(--range-track-height);
  background: var(--range-track-color);
  border-radius: var(--range-track-height);
}
input[type=range]::-moz-range-track {
  height: var(--range-track-height);
  background: var(--range-track-color);
  border-radius: var(--range-track-height);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
  border-radius: 50%;
  background: var(--input-accent-color);
}
input[type=range]::-moz-range-thumb {
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border: none;
  border-radius: 50%;
  background: var(--input-accent-color);
}

input[type=checkbox],
input[type=radio] {
  width: var(--input-check-size);
  height: var(--input-check-size);
  accent-color: var(--input-accent-color);
  margin: 0;
  margin-inline-end: var(--input-check-gap);
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible {
  outline: calc(var(--line-thickness) * 2) solid var(--input-border-color-focus);
  outline-offset: 2px;
}
input[type=checkbox]:disabled,
input[type=radio]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

input[type=date],
input[type=time],
input[type=datetime-local],
input[type=number] {
  accent-color: var(--input-accent-color);
}

.editor-styles-wrapper input[type],
.editor-styles-wrapper select,
.editor-styles-wrapper textarea {
  border: var(--input-border-thickness) solid var(--input-border-color);
  background-color: var(--input-background-color);
  color: var(--input-text-color);
  border-radius: var(--input-border-radius);
  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="var(--input-text-color)" d="M8 12l-4-4h8l-4 4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px top 10px;
  background-size: 20px;
  padding-right: calc(var(--input-padding-horizontal) + 20px);
}

.fw-frameworker-button,
.fw-main-nav-inner .menu-item.fw-frameworker-button a,
.fw-secondary-nav-inner .menu-item.fw-frameworker-button a,
button,
input[type=submit] {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: var(--control-height);
  border: var(--button-border-thickness) var(--button-border-type) var(--button-border-color);
  background-color: var(--button-default-background-color);
  padding: var(--button-padding-vertical) var(--control-padding-x);
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  color: var(--button-default-font-color);
  border-radius: var(--button-border-radius);
  transition: color var(--transition-timing-normal) var(--transition-ease-1), background-color var(--transition-timing-normal) var(--transition-ease-1), border var(--transition-timing-normal) var(--transition-ease-1);
  cursor: pointer;
  line-height: 1;
}
.fw-frameworker-button:hover, .fw-qa .fw-frameworker-button.is-hovered,
.fw-main-nav-inner .menu-item.fw-frameworker-button a:hover,
.fw-qa .fw-main-nav-inner .menu-item.fw-frameworker-button a.is-hovered,
.fw-secondary-nav-inner .menu-item.fw-frameworker-button a:hover,
.fw-qa .fw-secondary-nav-inner .menu-item.fw-frameworker-button a.is-hovered,
button:hover,
.fw-qa button.is-hovered,
input[type=submit]:hover,
.fw-qa input[type=submit].is-hovered {
  background-color: var(--button-default-background-color-hover);
  color: var(--button-default-font-color-hover);
  border-color: var(--button-default-border-color-hover);
}
.fw-frameworker-button:focus,
.fw-main-nav-inner .menu-item.fw-frameworker-button a:focus,
.fw-secondary-nav-inner .menu-item.fw-frameworker-button a:focus,
button:focus,
input[type=submit]:focus {
  border: 1px solid var(--input-border-color-focus);
  outline: none;
}
.fw-frameworker-button:visited,
.fw-main-nav-inner .menu-item.fw-frameworker-button a:visited,
.fw-secondary-nav-inner .menu-item.fw-frameworker-button a:visited,
button:visited,
input[type=submit]:visited {
  color: var(--button-default-font-color);
}

.fw-frameworker-button {
  text-decoration: none;
  /* Touch robustness (P60): fire on tap without the legacy click delay and never
     trigger double-tap zoom on the CTA. Inert on non-touch / where unsupported. */
  touch-action: manipulation;
}

.fw-select-all {
  user-select: all;
}

.fw-frameworker-pagination {
  margin-top: var(--content-vertical-padding-normal);
  border-top: var(--pagination-border-width) solid var(--pagination-border-color);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: var(--pagination-padding-vertical) var(--pagination-padding-horizontal);
}
.fw-frameworker-pagination .page-numbers,
.fw-frameworker-pagination .next,
.fw-frameworker-pagination .prev {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  outline: 1px solid var(--pagination-clickable-border-color);
  margin: 0px;
  padding: var(--pagination-button-padding-vertical) var(--control-padding-x);
  background-color: var(--pagination-clickable-background-color);
  color: var(--pagination-clickable-text-color);
  line-height: 1;
  margin: 0px var(--pagination-button-space-between);
  transition: all var(--transition-timing-normal) var(--transition-ease-1);
}
.fw-frameworker-pagination .page-numbers:after,
.fw-frameworker-pagination .next:after,
.fw-frameworker-pagination .prev:after {
  display: none;
}
.fw-frameworker-pagination .page-numbers:hover,
.fw-frameworker-pagination .next:hover,
.fw-frameworker-pagination .prev:hover {
  outline: 1px solid var(--pagination-active-border-color);
  background: var(--pagination-clickable-background-color-hover);
  color: var(--pagination-clickable-border-color-hover);
}
.fw-frameworker-pagination .next,
.fw-frameworker-pagination .prev {
  padding-left: var(--pagination-net-prev-padding);
  padding-right: var(--pagination-net-prev-padding);
}
.fw-frameworker-pagination .current {
  outline: 1px solid var(--pagination-active-border-color);
  background: var(--pagination-active-background-color);
  color: var(--pagination-active-text-color);
}
.fw-frameworker-pagination .current:hover {
  outline: 1px solid var(--pagination-active-border-color);
  background: var(--pagination-active-background-color);
  color: var(--pagination-active-text-color);
}

.fw-frameworker-breadcrumb {
  display: block;
  width: 100%;
  margin-bottom: var(--breadcrumb-margin-bottom);
  font-size: var(--breadcrumb-font-size);
}
.fw-frameworker-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--breadcrumb-item-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fw-frameworker-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--breadcrumb-item-gap);
}
.fw-frameworker-breadcrumb li + li::before {
  content: "/";
  color: var(--breadcrumb-separator-color);
}
.fw-frameworker-breadcrumb a {
  color: var(--breadcrumb-link-color);
}
.fw-frameworker-breadcrumb li[aria-current=page] {
  color: var(--breadcrumb-current-color);
  text-decoration: none;
}

/* CSS-first tooltip: <span data-tooltip="hint text">…</span>
   Shows on hover AND keyboard focus. Supplementary text only — the host must
   carry its own accessible name (aria-label / visible text); the bubble is
   aria-hidden by construction (pseudo-element content). */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--tooltip-offset));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: var(--tooltip-max-width);
  padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
  border-radius: var(--tooltip-border-radius);
  background-color: var(--tooltip-background-color);
  color: var(--tooltip-text-color);
  font-size: var(--tooltip-font-size);
  line-height: var(--caption-line-height);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-timing-fast) var(--transition-ease-1);
  z-index: 10; /* placeholder — graduated plan rebinds to a real P7 layer; note the P7 scale has no slot between raised:1 and header:100, so the plan must pick/mint a real layer, not keep 10 (Cato 2026-07-31) */
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::after {
    transition: none;
  }
}
.fw-reveal {
  position: relative;
}
.fw-reveal .reveal-front,
.fw-reveal .reveal-back {
  position: absolute;
  inset: 0;
  transition: opacity var(--transition-timing-normal) var(--transition-ease-2), transform var(--transition-timing-normal) var(--transition-ease-2);
}
.fw-reveal .reveal-front {
  opacity: 1;
}
.fw-reveal .reveal-back {
  opacity: 0;
}
.fw-reveal:hover .reveal-front, .fw-reveal:focus-visible .reveal-front, .fw-reveal:focus-within .reveal-front {
  opacity: 0;
}
.fw-reveal:hover .reveal-back, .fw-reveal:focus-visible .reveal-back, .fw-reveal:focus-within .reveal-back {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .fw-reveal .reveal-front,
  .fw-reveal .reveal-back {
    transition: none;
  }
}

@media screen and (max-width: 885px) {
  .fw-content {
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  .next,
  .prev,
  .fw-next,
  .fw-prev {
    display: none;
  }
}
/* Disclosure primitive (ThemeUtils.collapse) — JS animates height from 0 */
[data-collapse-body] {
  overflow: hidden;
}

.fw-embed-reset {
  all: revert;
}