/* WCAG 2.2 AA overrides for workflowunity.io (2026-10-31). Loaded by inc/a11y.php.
   Colors are the smallest shift that reaches 4.5:1. Rules for page templates use !important
   because those templates print their own <style> blocks later in the document. */

/* ---- Skip link ---- */
.wfu-a11y-skip{position:fixed;left:12px;top:-120px;z-index:100000;background:#06101F;color:#fff;padding:.7rem 1.1rem;border-radius:8px;font-family:'DM Sans',-apple-system,sans-serif;font-size:.95rem;font-weight:700;text-decoration:underline}
.wfu-a11y-skip:focus{top:12px;color:#fff}
#wfu-content:focus,.wfu-chat__panel:focus{outline:none}

/* ---- Focus ring: blue with a white halo, so it shows on light and dark sections ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid #1E6FE8!important;outline-offset:2px!important;box-shadow:0 0 0 2px #fff!important}

/* Keep the focused control clear of the fixed nav and the chat bubble */
a,button,input,select,textarea,summary{scroll-margin-top:96px;scroll-margin-bottom:90px}

/* ---- Blue text on white or pale backgrounds ---- */
.callout-compare-eyebrow,.toc-list a.active,.compare-us .compare-label,.portfolio-footer a,.portfolio-tag,.callout-quote-cite a{color:#1F69DD}
.dev-role,.ak-role{color:#1C60CC}
.article-faq-q:hover{color:#1F69DD}
.cap-head>.eyebrow.blue,.wdlp-proof-head>.eyebrow.blue,.saas-narrative-inner>.eyebrow.blue,.ph-process-head>.eyebrow.blue,.ph-proof-head>.eyebrow.blue,.showcase-header>.eyebrow.blue,.portfolio-head>.eyebrow.blue,.csdc-process-head>.eyebrow.blue,.csdc-compare-head>.eyebrow.blue,.dma-faq-head>.eyebrow.blue,.dma-form-head>.eyebrow.blue,.wfu-vbuild-head>.eyebrow.blue,.saas-stack-head>.eyebrow.blue,.wdlp-get-head>.eyebrow.blue,.wdlp-faq-head>.eyebrow.blue,.wcity-local-copy>.eyebrow.blue,.wcity-related-inner>.eyebrow.blue,.wdlp-pain-head>.eyebrow.blue,.wdlp-founder-copy>.eyebrow.blue{color:#1F69DD!important}
.section-inner>.eyebrow.blue{color:#1F69DD}
.wdlp-all-head>.eyebrow.blue{color:#5BA0FF!important}
.privacy-tldr-label,.article-prose .article-roadmap-label,.gs-about-eyebrow,.ph-path-num,.wdlp-path-item b,.wdlp-trust-local a,.wcity-areas__note a,.dma-req,.dma-faq-item[open] summary{color:#1F69DD!important}

/* ---- Article callout button: the darker link blue would fail on its navy background ---- */
.article-prose a.callout-cta-btn{color:#2B7FFF}
.article-prose a.callout-cta-btn:hover{color:#fff;background:#1E6FE8}

/* ---- White on blue buttons, including hover ---- */
.btn-fill{background:#1E6FE8}
.btn-fill:hover{background:#1858BD}
.dma-submit{background:#1E6FE8!important}
.dma-submit:hover{background:#1858BD!important}
.site-nav .nav-links .nav-cta:hover{background:#1E6FE8!important}
.footer-cta-btn,.toc-cta-btn,.article-meta-avatar{background:#1E6FE8}
.footer-cta-btn:hover,.toc-cta-btn:hover{background:#1858BD}
.wlb-btn{background:#1E6FE8!important}
.wlb-btn:hover{background:#1858BD!important}
.ph-blueprint,.dma-blueprint,.portfolio-featured-flag{background:linear-gradient(135deg,#1858BD,#1E6FE8)!important}
.ph-blueprint__body p,.dma-blueprint__body p{color:#fff!important}

/* ---- Grey text on white or pale backgrounds (was #7B8794) ---- */
.toc-label,.blog-card-meta,.footer-blog-card-meta,.stat-source,.ds-lbl,.form-sub{color:#656F7A}
.ph-stats-note,.wdlp-stats-note,.dma-roi-note,.dma-opt,.dma-fineprint,.svc-links__label,.wdlp-pain-card__kicker,.wcity-areas__title,.ph-step-tag,.ph-links__label{color:#656F7A!important}

/* ---- Faint grey on white (was #8A93A6) ---- */
.wfu-embed-opt,.wfu-embed-fineprint,.wfu-est-opt,.wfu-est-fineprint,.wfu-est-dev__stat-lbl,.gs-opt,.gs-fineprint,.gs-results-note,.gs-tag-them,.wfu-qc__status,.wfu-qc__hint,.gs-stat-lbl,.gs-about-disclaimer,.wfu-est-svc-group-title,.wfu-est-svc-panel__hint,.vb-source,.gs-page .gs-form-wrap--close .gs-fineprint{color:#676E7C!important}
.compare-them{opacity:1}
.compare-them .compare-list li{color:#656F7A}

/* ---- Amber text on white or pale backgrounds (was #F59E0B) ---- */
.wfu-embed-eyebrow,.wfu-est-form-eyebrow,.gs-form-eyebrow,.wfu-est-dev__role,.wfu-est-charity__link,.ph-dev__role,.wfu-embed-req,.wfu-est-req,.gs-req{color:#A85A06!important}
.gs-tag-us{color:#996305!important}

/* ---- Green badge on a pale background ---- */
.dashboard-hero-badge{color:#065F46}

/* ---- Gold text on white (was #C9982E) ---- */
.section-inner>.eyebrow.gold,.privacy-hero .eyebrow.gold{color:#86641C}
.callout-cta-eyebrow{color:#86641C}
.wdlp-get-card__kicker,.wdlp-proof-card__kicker,.wdlp-shot-cap b,.wdlp-founder-tag,.ph-step-kicker,.ph-proof-card__kicker{color:#86641C!important}

/* ---- Pale white text on the dark footer and heroes ---- */
.footer-tagline,.footer-aws-badge,.footer-col-title,.footer-col a,.footer-contact-item,.footer-contact-item a,.footer-contact-item span,.footer-copy,.footer-charity,.footer-cta-band p{color:rgba(255,255,255,.68)}
.footer-copy a,.footer-copy a.footer-legal-link{color:rgba(255,255,255,.85);text-decoration:underline;white-space:nowrap}
.footer-col a:hover,.footer-contact-item a:hover,.footer-copy a:hover,.footer-copy a.footer-legal-link:hover{color:#fff}
.hero-sub{color:rgba(255,255,255,.78)}
.hero-sub a{color:#A9CCFF}
.mission-hero p{color:rgba(255,255,255,.7)}
.hero-aws,.callout-stat-source,.chrome-url{color:rgba(255,255,255,.7)}
.callout-stat-source a{color:rgba(255,255,255,.8)}
.wxr-proto,.wxr-note,.wall-header>p{color:rgba(255,255,255,.7)!important}

/* ---- /saas-product-development/ reuses this box without its styles: dark text on navy ---- */
.csdc-risk-icon{color:#5BA0FF}
.csdc-risk-content h3{color:#fff!important}
.csdc-risk-content p{color:rgba(255,255,255,.72)!important}

/* ---- Long words and fixed widths at 320px ---- */
.prose,.privacy-list,.wp-block-paragraph{overflow-wrap:break-word}
@media (max-width:400px){
  .wfu-est-turnstile{align-items:center!important}
}

/* ---- Stop the endless pulse after a few seconds; honor the reduced motion setting ---- */
.wfu-chat__bubble-pulse,.float-cta,.dashboard-hero-badge::before{animation-iteration-count:2!important}
.wlb.is-open .wlb-scan{animation-iteration-count:1!important}
.hero-bg .orb,.article-hero-bg .orb,.wlb-orb-a,.wlb-orb-b{animation:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==== Second round, from the independent review (2026-10-31) ==== */

/* ---- Focus ring drawn inside the box where a parent clips with overflow:hidden ---- */
.blog-card-link:focus-visible,.article-faq-q:focus-visible,.wcity-card__shot:focus-visible,.callout-compare-table-wrap:focus-visible{outline-offset:-4px!important;box-shadow:inset 0 0 0 2px #fff!important}
.wfu-qc__thread:focus-visible{outline-offset:-3px!important;box-shadow:none!important}

/* ---- /estimate/: the hidden field really hides. Field errors. Required note. ---- */
.wfu-est-other-wrap[hidden]{display:none}
.wfu-est-field-err{margin:6px 2px 0;font-size:13px;font-weight:600;color:#B91C1C}
.wfu-est-field-err[hidden]{display:none}
.wfu-a11y-reqnote{margin:0 0 .75rem;font-size:13px;line-height:1.4;color:#56606E}
#wfu-est-error-banner:focus{outline:2px solid #1E6FE8;outline-offset:2px}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#B91C1C!important}

/* ---- Field borders at 3:1 against the page (1.4.11). Focus and error colors still win. ---- */
form .wfu-est-field input,form .wfu-est-field textarea,form .wfu-est-field select,form .wfu-est-svc-trigger,
form .wfu-embed-field input:not([type=checkbox]),form .wfu-embed-field textarea,
form .gs-field input:not([type=checkbox]),form .gs-field textarea,
form .dma-field input:not([type=checkbox]),form .dma-field textarea,
.wfu-qc .wfu-qc__input{border-color:#7F8899}
form .wfu-est-field input:focus,form .wfu-est-field textarea:focus,form .wfu-est-svc-trigger:focus,
form .wfu-embed-field input:focus,form .wfu-embed-field textarea:focus,
form .gs-field input:focus,form .gs-field textarea:focus,
form .dma-field input:focus,form .dma-field textarea:focus{border-color:#1E6FE8}
.wfu-qc .wfu-qc__input:focus{border-color:var(--wfu-accent)}
.wlb-field input:not(:focus),.wxr-field input:not(:focus),.wxr-cta-form input:not(:focus),.nf-search input:not(:focus){border-color:rgba(255,255,255,.42)!important}

/* ---- Remaining contrast ---- */
.nf-col .eyebrow.blue,.nf-note a{color:#1F69DD!important}
.ph-links__row a:hover,.svc-links__row a:hover{color:#1F69DD!important}
.wfu-chat__foot{color:#E4E7EE!important}
.wfu-chat__head-text span{opacity:.88!important}
.wlb-fine,.wlb-art-cap,.wlb-later,.wlb-lbl,.wlb-ring-num small{color:rgba(255,255,255,.62)!important}
.wlb-later:hover{color:#fff!important}
input::placeholder,textarea::placeholder{color:#667080!important;opacity:1}
.wlb-field input::placeholder,.wxr-field input::placeholder,.wxr-cta-form input::placeholder,.nf-search input::placeholder{color:rgba(255,255,255,.62)!important}

/* ---- Chat: visible labels, field errors, spoken status ---- */
.wfu-a11y-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wfu-qc__field{min-width:0}
.wfu-qc__label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:#4B5466}
.wfu-qc__err{order:5;flex-basis:100%;margin-top:4px;font-size:12.5px;font-weight:600;color:#B91C1C}
.wfu-qc__err[hidden]{display:none}
.wfu-qc__other{flex-wrap:wrap;align-items:flex-end}
.wfu-qc__other .wfu-qc__label{flex:1;min-width:0}
.wfu-qc__other .wfu-qc__btn--send{min-height:46px}
.wfu-qc__btn[aria-disabled="true"],.wfu-qc__chip[aria-disabled="true"]{opacity:.6;cursor:wait;transform:none}

/* ---- Chat on short screens and at 400% zoom: the whole panel scrolls, so Next can be reached ---- */
@media (max-height:640px){
  .wfu-chat.is-open .wfu-chat__panel{height:calc(100vh - 28px)!important;overflow-y:auto!important}
  .wfu-chat.is-open .wfu-chat__panel>*{flex:none!important}
  .wfu-qc--embedded{display:block!important;overflow:visible!important}
  .wfu-qc--embedded .wfu-qc__thread{max-height:none!important;overflow:visible!important}
}

/* ---- Small-screen menu (also a 1366px laptop at 200% zoom) ---- */
.nav-toggle{display:none}
@media (max-width:768px){
  .site-nav .nav-inner{justify-content:space-between!important;position:relative}
  .nav-toggle:not([hidden]){display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .85rem;background:none;border:1px solid #7F8899;border-radius:8px;color:var(--navy);font-family:var(--fb);font-size:.9rem;font-weight:700;cursor:pointer}
  .site-nav.is-menu-open .nav-links{display:flex!important;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 64px);overflow-y:auto;background:#fff!important;border-bottom:1px solid var(--g100)!important;box-shadow:0 12px 24px rgba(6,16,31,.12);padding:.4rem 1.2rem .9rem!important}
  .site-nav.is-menu-open .nav-links a{display:block;padding:.7rem .4rem;font-size:1rem;color:var(--navy)}
  .site-nav.is-menu-open .nav-links .nav-cta{margin-top:.4rem;padding:.7rem 1rem!important;text-align:center}
}

/* ---- Footer: landmarks, plain-text capabilities, 24px legal targets ---- */
.footer-legal{display:inline}
.footer-col li span{font-size:.88rem;font-weight:500;color:rgba(255,255,255,.68)}
.footer-copy a.footer-legal-link{display:inline-block;padding:4px 0}

/* ---- Text spacing at 320px (1.4.12): let these rows wrap instead of running off the edge ---- */
@media (max-width:480px){
  .about-kyle{flex-wrap:wrap}
  .about-kyle>div:not(.ak-photo){flex:1 1 100%;min-width:0}
}
.showcase-site-link{max-width:100%;flex-wrap:wrap}
.wdlp-trust span{flex-wrap:wrap;min-width:0}

/* ---- Blog card: thumbnail paints over a ring on the link, so the card carries it ---- */
.blog-card:has(.blog-card-link:focus-visible){outline:2px solid #1E6FE8;outline-offset:2px}
/* ---- /xray/: the visible field border is on the wrapper around the input ---- */
.wxr-field:not(:focus-within){border-color:rgba(255,255,255,.42)!important}
/* ---- Menu open: the chat bubble must not sit on top of a menu item ---- */
.wfu-menu-open .wfu-chat{visibility:hidden}