:root {
  --utin-ink: #24323a;
  --utin-teal: #2b7a8b;
  --utin-teal-dark: #20616f;
  --utin-teal-soft: #e8f1f3;
  --utin-sage: #cdddb5;
  --utin-sage-soft: #e9f0dd;
  --utin-cream: #ffffff;
  --utin-navy: #24323a;
  --wa-color-brand: #2b7a8b;
  --wa-color-brand-30: #20616f;
  --wa-color-text-normal: #24323a;
  --wa-color-text-quiet: #526169;
  --wa-color-surface-default: #ffffff;
  --wa-color-surface-lowered: #f5f8f8;
  --wa-color-surface-border: #d7e1e3;
  --utin-gutter: 20px;
  --utin-shell: 120rem;
}
html { scroll-padding-top: 6rem; }
body { color: var(--utin-ink); background: white; line-height: 1.65; }
main { overflow:visible; }
body { background-image:none; }
main, main > *, section, article, aside, figure { min-width: 0; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--utin-teal); outline-offset: 4px; }
summary { cursor: pointer; font-weight: 650; }
a { text-underline-offset: .2em; }
h1,h2,h3,h4 { line-height: 1.18; text-wrap: balance; letter-spacing: -.025em; }
h1 { font-size:clamp(2rem,3.2vw,3.75rem); font-weight:750; max-width:27ch; }
h2 { font-size:clamp(1.5rem,2vw,2.25rem); font-weight:700; }
h3 { font-size: 1.4rem; font-weight: 650; }
.utin-shell { width: min(calc(100% - var(--utin-gutter) * 2),var(--utin-shell)); margin-inline: auto; }
.utin-section { padding-block: clamp(3rem,5vw,6rem); }
.utin-tint { background: var(--utin-sage-soft); }
.utin-lead { max-width: 65ch; margin-top: 1.4rem; font-size: clamp(1.1rem,1.2vw,1.3rem); line-height: 1.65; color: var(--wa-color-text-quiet); }
.utin-meta { color: var(--wa-color-text-quiet); font-size: .875rem; margin-block: 1rem; }
.utin-page-intro { padding-block:clamp(2rem,3.5vw,4rem); border-bottom: 1px solid var(--wa-color-surface-border); background: var(--utin-sage-soft); }
.utin-back { display: inline-block; margin-bottom: 1rem; color: var(--utin-teal-dark); font-weight: 650; }


.utin-category-nav { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.utin-category-nav a { color:var(--utin-teal-dark); text-decoration:underline; }
.utin-article-layout { display:grid; gap:2.5rem; padding-block:3rem; align-items:start; }
.utin-article-nav { font-size:.95rem; }
.utin-article-nav details { border-bottom:1px solid var(--wa-color-surface-border); padding-block:1rem; }
.utin-article-nav nav { padding-top:1rem; display:grid; gap:.6rem; }
.utin-article-nav nav ul { display:grid; gap:.5rem; }
.utin-article-nav nav ul ul { padding-left:1rem; margin-top:.5rem; }
.utin-article-nav a:hover { text-decoration:underline; color:var(--utin-teal-dark); }
.utin-article { width:100%; max-width:96rem; }
.utin-article-prose { width:100%; font-size:1.0625rem; line-height:1.75; }
.content-prose { color:var(--utin-ink); }
.content-prose :where(p,ul,ol,blockquote) { max-width:72ch; }
.content-prose :where(h2,h3,h4) { max-width:38ch; scroll-margin-top:6rem; }
.content-prose h2 { margin:2.5rem 0 1rem; }
.content-prose h3 { margin:2rem 0 .75rem; }
.content-prose h4 { margin:1.5rem 0 .75rem; }
.content-prose p { margin:1rem 0; }
.content-prose > :first-child { margin-top:0; }
.content-prose ul,.content-prose ol { margin:1.25rem 0; padding-left:1.5rem; }
.content-prose ul { list-style:disc; }
.content-prose ol { list-style:decimal; }
.content-prose li { padding-left:.25rem; margin:.5rem 0; }
.content-prose li::marker { color:var(--utin-teal-dark); }
.content-prose :where(p,li,td,th,a,code) { overflow-wrap:anywhere; }
.content-prose a { color:var(--utin-teal-dark); text-decoration:underline; text-decoration-thickness:1px; }
.content-prose a:hover { text-decoration-thickness:2px; }
.content-prose table { display:block; max-width:100%; width:fit-content; overflow-x:auto; border-collapse:collapse; margin:1.5rem 0 2rem; font-size:.95rem; line-height:1.6; border-radius:.5rem; }
.content-prose th,.content-prose td { min-width:9rem; max-width:32rem; padding:1rem 1.25rem; border:1px solid var(--wa-color-surface-border); text-align:left; vertical-align:top; }
.content-prose th { background:var(--utin-sage-soft); font-weight:650; }
.content-prose tbody tr:nth-child(even) { background:#f8faf6; }
.content-prose pre { max-width:100%; overflow-x:auto; margin:1.5rem 0; padding:1.25rem; border:1px solid var(--wa-color-surface-border); border-radius:.5rem; background:#f5f8f8; font-size:.9rem; }
.content-prose pre code { overflow-wrap:normal; }
.content-prose blockquote { margin:1.5rem 0; padding:.25rem 1.5rem; border-left:3px solid var(--utin-sage); }
.content-prose figure { max-width:100%; margin-block:2rem; }
.content-prose figure img { border:1px solid var(--wa-color-surface-border); border-radius:.5rem; }
.content-prose figcaption { max-width:72ch; font-size:.875rem; color:var(--wa-color-text-quiet); margin-top:.7rem; }
.utin-article-next { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--wa-color-surface-border); }
.utin-article-next h2 { font-size:1.4rem; }
.utin-article-next nav { display:grid; gap:.75rem; margin-block:1.25rem; }
.utin-article-next nav a { color:var(--utin-teal-dark); text-decoration:underline; }
.utin-eyebrow { font-size:.9rem; color:var(--utin-teal-dark); font-weight:650; text-transform:none; letter-spacing:normal; }
.utin-icon-circle { display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; color:var(--utin-teal-dark); }
.utin-matrix-groups { display:grid; gap:1rem; }
.utin-matrix-groups details { border:1px solid var(--wa-color-surface-border); border-radius:.6rem; overflow:hidden; }
.utin-matrix-groups summary { display:flex; align-items:center; gap:1rem; padding:1.1rem; }
.utin-matrix-groups summary small { display:block; font-weight:400; color:var(--wa-color-text-quiet); }
.utin-matrix-scroll { overflow-x:auto; }
.utin-matrix-scroll table { width:100%; border-collapse:collapse; min-width:42rem; }
.utin-matrix-scroll :where(th,td) { padding:1rem; border:1px solid var(--wa-color-surface-border); text-align:left; }
.utin-matrix-scroll th { background:var(--utin-sage-soft); }
.utin-matrix-scroll small { display:block; max-width:28ch; margin-top:.5rem; }
.utin-feature-status { text-transform:none; letter-spacing:normal; display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:650; }
.utin-feature-status-available { color:#35511f; }
.utin-feature-status-not-supported { color:var(--wa-color-text-quiet); }
.utin-matrix-legend { display:flex; flex-wrap:wrap; gap:1rem; }
.utin-matrix-footnote { max-width:72ch; margin-top:1rem; font-size:.9rem; color:var(--wa-color-text-quiet); }
main form:not(.utin-signup-form) { max-width:32rem; }
@media (min-width:640px) {
  :root { --utin-gutter:32px; }
}
@media (min-width:1024px) {
  :root { --utin-gutter:clamp(48px,3.125vw,80px); }
  .utin-article-layout { grid-template-columns:17rem minmax(0,1fr); gap:clamp(2rem,4vw,5rem); }
  .utin-article-nav { position:sticky; top:6rem; max-height:calc(100dvh - 7rem); overflow-y:auto; }
  .utin-legal-layout { max-width:90rem; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }


main > section:has(> .utin-shell), .utin-feature-matrix-section { padding-inline:0; }
.utin-shell { padding-inline:0; }

.utin-directory { display:grid; gap:2rem; padding-block:3rem 5rem; }
.utin-directory-nav { display:flex; flex-wrap:wrap; gap:.5rem; align-content:start; }
.utin-directory-nav a { padding:.65rem .85rem; border:1px solid var(--wa-color-surface-border); border-radius:.5rem; font-size:.95rem; color:var(--utin-teal-dark); }
.utin-directory-nav a:hover { background:var(--utin-sage-soft); }
.utin-directory-group { margin-bottom:3rem; scroll-margin-top:6rem; }
.utin-directory-group > h2 { margin-bottom:1.4rem; }
.utin-resource-grid { display:grid; gap:1rem; }
.utin-resource { display:flex; flex-direction:column; padding:1.5rem; border:1px solid var(--wa-color-surface-border); border-radius:.75rem; background:white; min-width:0; transition:border-color .15s,background .15s; }
.utin-resource:hover { background:#f8faf6; border-color:var(--utin-teal); }
.utin-resource h3 { font-size:1.2rem; line-height:1.35; text-wrap:pretty; }
.utin-resource p { max-width:60ch; margin:.75rem 0 1.25rem; font-size:.95rem; color:var(--wa-color-text-quiet); line-height:1.65; }
.utin-resource > span { margin-top:auto; font-size:.875rem; font-weight:650; color:var(--utin-teal-dark); text-decoration:underline; }
.utin-hub-intro { display:grid; gap:2rem; align-items:center; }
.utin-start-guide { display:block; padding:2rem; background:var(--utin-sage-soft); border-radius:.75rem; border:1px solid var(--utin-sage); }
.utin-start-guide > span { color:var(--utin-teal-dark); font-size:.9rem; font-weight:650; }
.utin-start-guide h2 { font-size:1.6rem; margin:.75rem 0; }
.utin-start-guide p { font-size:1rem; max-width:55ch; margin-bottom:1rem; }
.utin-start-guide strong { color:var(--utin-teal-dark); text-decoration:underline; }
.utin-desktop-contents { display:none; }
.utin-desktop-contents h2 { font-size:1rem; margin-bottom:.5rem; }
.utin-tool-inputs { width:100%; max-width:36rem; padding:clamp(1.25rem,2vw,2rem); border:1px solid var(--utin-sage); border-radius:.75rem; background:white; }
.utin-partner-next { padding:2rem; background:var(--utin-sage-soft); border-radius:.75rem; }
.utin-partner-next h2 { margin:.75rem 0; }
.utin-partner-next .utin-btn { margin-top:1.5rem; }
.utin-comparison-intro { display:grid; gap:2rem; align-items:start; }
.utin-comparison-intro > p { max-width:65ch; font-size:1.1rem; }
.utin-comparison-content .utin-resource-grid { margin-block:1.5rem 3rem; }
.utin-comparison-content h2 { margin-bottom:1rem; scroll-margin-top:6rem; }
.utin-comparison-content > section { padding-block:2rem; border-bottom:1px solid var(--wa-color-surface-border); }
.utin-comparison-content > section > p { max-width:72ch; margin:1rem 0; }
.utin-comparison-content { padding-bottom:4rem; }
.utin-error { padding-block:clamp(4rem,10vw,9rem); }
.utin-error h1 { margin:1rem 0; }
.utin-error p { max-width:55ch; }
.utin-error .utin-btn { margin-top:2rem; }
@media(min-width:640px) { .utin-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1024px) {
  .utin-directory { grid-template-columns:15rem minmax(0,1fr); gap:clamp(2rem,4vw,5rem); }
  .utin-directory-nav { display:grid; position:sticky; top:6rem; align-self:start; }
  .utin-directory-nav a { border:0; border-left:2px solid var(--utin-sage); border-radius:0; }
  .utin-hub-intro { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(3rem,6vw,8rem); }
  .utin-desktop-contents { display:block; }
  .utin-mobile-contents { display:none; }
  .utin-partner-next { grid-column:2; }
  .utin-comparison-intro { grid-template-columns:1fr 1fr; gap:4rem; }
  .utin-resource-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(min-width:1920px) { .utin-resource-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .utin-hub-intro + .utin-directory .utin-resource-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

main .utin-btn-light { background:white; color:var(--utin-teal-dark); border:1px solid var(--utin-teal); box-shadow:none; }
.utin-comparison-content > .utin-category-nav { padding-block:2rem 0; margin-bottom:0; }
@media(min-width:1024px) { .utin-comparison-content > section:first-of-type .utin-resource-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.utin-matrix-scroll thead th { text-transform:none; letter-spacing:normal; font-size:.9rem; }
.utin-product-intro { display:grid; gap:2rem; align-items:center; }
.utin-product-view { min-width:0; }
.utin-product-view img { width:100%; height:auto; border:1px solid var(--wa-color-surface-border); border-radius:.75rem; }
.utin-product-view figcaption { font-size:.875rem; color:var(--wa-color-text-quiet); margin-top:.75rem; max-width:72ch; }
.utin-product-view figcaption a { text-decoration:underline; color:var(--utin-teal-dark); }
@media(min-width:1024px) { .utin-product-intro { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,4vw,5rem); } }

.utin-hub-start { padding-block:2.5rem; border-bottom:1px solid var(--wa-color-surface-border); }
.utin-hub-start h2 { margin-bottom:1.5rem; }
@media(min-width:1024px) { .utin-hub-start .utin-resource-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }