/* =========================================================================
   CXperts site stylesheet
   1. Fonts  2. Design tokens  3. Base + shared components (from the approved
   canvas pages)  4. Responsive rules  5. Site chrome added for the build
   (skip link, mobile menu, contact modal, carousel, lightbox, article prose).
   Colors come from the design system: change a token here, it changes everywhere.
   ========================================================================= */

/* 1. Fonts (self-hosted, no Google request) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/fraunces-latin-opsz-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/fraunces-latin-ext-opsz-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/public-sans-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/public-sans-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/public-sans-latin-wght-italic.woff2') format('woff2');}

/* 2. Design tokens (from the CXperts design system) */
:root{
  --paper:#fbfcfc;
  --white:#ffffff;
  --hero-tint:#eaf8fc;
  --sky:#d2f3fb;
  --sky-200:#c5edf9;
  --sky-line:#bfe3ec;
  --sky-wash:#f4fbfd;
  --ink:#323846;
  --ink-raised:#3a4150;
  --ink-line:#4f5868;
  --spruce:#496e7f;
  --fog:#c2ced4;
  --muted:#5f6f78;
  --line:#dce3e6;
  --control-border:#7a8a94;
  --control-border-dark:#8792a0;
  --mint:#c3f7eb;
  --turquoise:#41ecc6;
  --turquoise-hover:#2fdcb3;
  --text-on-ink:#d3dade;
  --text-on-spruce:#e3eef1;
  --error:#b4332b;
  --error-surface:#fdf0ef;
  --error-ink:#7a1f19;
  --pending-surface:#fff4d6;
  --pending-ink:#5c4a12;
  /* short names used throughout the page markup */
  --turq:var(--turquoise);
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* 3. Base + shared components */
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--paper);}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--spruce);}
.container{max-width:1180px;margin:0 auto;padding:0 32px;width:100%;}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--spruce);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 26px;border-radius:999px;font-weight:600;font-size:15px;cursor:pointer;border:1.5px solid transparent;font-family:inherit;}
.btn-accent{background:var(--turq);color:var(--ink);}
.btn-accent:hover{background:#2fdcb3;color:var(--ink);}
.btn-ghost{border-color:var(--spruce);color:var(--ink);background:transparent;}
.btn-ghost:hover{border-color:var(--ink);background:var(--sky);color:var(--ink);}
.btn-ghost-light{border-color:rgba(251,252,252,0.5);color:#fff;background:transparent;}
.btn-ghost-light:hover{border-color:#fff;color:#fff;}
.grid{display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line);}
.grid > .cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.grid-dark{border-color:#4F5868;}
.grid-dark > .cell{border-color:#4F5868;}
.g2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.g3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.g4{grid-template-columns:repeat(4, minmax(0, 1fr));}
.path-cell{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:18px 24px;font-size:16px;font-weight:600;background:#fff;}
.path-cell:hover{background:var(--sky);color:var(--ink);}
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--spruce);}
.text-link:hover{color:var(--ink);}
.menu-btn{display:none;}
#hp-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#hp-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
.dark-link{display:inline-flex;align-items:center;gap:8px;color:var(--turq);font-weight:700;font-size:15px;margin-top:6px;}
.dark-link:hover{color:var(--mint);}
.menu-item{display:block;padding:12px 14px;border-radius:12px;font-size:15px;font-weight:500;}
.menu-item:hover{background:var(--sky);color:var(--ink);}
.icon-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid #7A8A94;background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.icon-btn:hover{border-color:var(--spruce);}
.dot{width:12px;height:12px;border-radius:50%;border:0;padding:0;cursor:pointer;}
.dot-hit{width:28px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;}
a:focus-visible, button:focus-visible, .btn:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px;box-shadow:0 0 0 4px #323846;}
a:focus:not(:focus-visible), button:focus:not(:focus-visible){outline:none;}
.btn-ghost.on-sky{background:var(--sky);}
.btn-ghost.on-sky:hover{background:transparent;border-color:var(--ink);color:var(--ink);}
.nav-dd{position:relative;display:flex;}
.nav-dd > a{display:flex;align-items:center;gap:6px;padding:0 18px;border-left:1px solid var(--line);}
.dd-menu{display:none;position:absolute;top:100%;left:0;min-width:240px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(50,56,70,0.14);z-index:40;}
.nav-dd:hover .dd-menu, .nav-dd:focus-within .dd-menu{display:flex;flex-direction:column;}
.dd-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;}
.dd-menu a.sub{padding-left:28px;font-size:14px;color:var(--muted);}
.dd-menu a:hover{background:var(--sky);color:var(--ink);}
.phone-arrow{display:none;}
#op-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#op-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
#cl-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#cl-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
.logo-cell:hover{background:var(--paper) !important;color:var(--ink) !important;}
.story-stack{display:none;}
#ci-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#ci-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
.jump-card{display:flex;flex-direction:column;gap:8px;position:relative;padding:24px 26px 26px;background:#fff;border:1.5px solid var(--spruce);border-radius:20px;color:var(--ink);}
.jump-card:hover{background:var(--sky);}
.jump-arrow{position:absolute;top:22px;right:22px;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--spruce);display:inline-flex;align-items:center;justify-content:center;color:var(--spruce);}
.logo-dark:hover{background:#465063 !important;}
em{font-style:italic;}
#co-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#co-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
#ws-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#ws-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
#ow-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#ow-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
.svc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 4px;border-bottom:1px solid #C9E6EE;color:var(--ink);font-size:17px;}
.svc-row:hover{color:var(--spruce);}
.svc-sub{display:block;font-size:14px;color:var(--muted);margin-top:2px;}
.chip{min-height:40px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--spruce);background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
.ind-select{min-height:40px;padding:8px 36px 8px 14px;border-radius:999px;border:1.5px solid var(--spruce);background:#fff;font:inherit;font-size:14px;color:var(--ink);}
.story-tile{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:14px;}
.tag{display:inline-flex;padding:4px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:#47525A;}
.tag-sol{background:var(--mint);border-color:#9EE6D6;color:var(--ink);}
.chk{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 8px;border:0;border-radius:8px;background:transparent;color:#E6ECEF;font:inherit;font-size:15px;text-align:left;cursor:pointer;}
.chk:hover{background:rgba(255,255,255,0.06);}
.chk-box{flex-shrink:0;width:18px;height:18px;border-radius:5px;border:1.5px solid #9AA6B0;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;line-height:1;}
.bubble{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 12px 6px 14px;border-radius:999px;border:0;background:var(--mint);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
.bubble:hover{background:#A9F0E0;}
.clear-link{border:0;background:transparent;color:#fff;font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 4px;}
.filter-toggle{display:none;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:12px 18px;border:1.5px solid #8792A0;border-radius:14px;background:rgba(58,65,80,0.85);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;}
.show-results{display:none;}
#cs-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#cs-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
.meta-link{color:var(--spruce);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.mini-stat{padding:10px 16px;border-radius:999px;background:var(--sky);font-size:15px;}
.mini-stat strong{font-family:var(--font-display);font-size:19px;margin-right:4px;}
#ab-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#ab-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
.g6{grid-template-columns:repeat(6, minmax(0, 1fr));}
.jump{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid var(--spruce);background:#fff;font-size:15px;font-weight:600;color:var(--ink);}
.jump:hover{background:var(--sky);color:var(--ink);}
.team-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));}
#pt-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#pt-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
#fu-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#fu-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
#bl-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#bl-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
.post-link{color:var(--ink);}
.post-link:hover{color:var(--spruce);text-decoration:underline;text-underline-offset:3px;}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.page-num{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border-radius:12px;border:1.5px solid #7A8A94;background:#fff;font-size:15px;font-weight:600;color:var(--ink);}
a.page-num:hover{border-color:var(--spruce);}
.prose{font-size:18px;line-height:1.75;color:var(--ink);}
.prose p{margin:0 0 20px;}
.prose h2{margin:44px 0 14px;font-size:30px;line-height:1.2;scroll-margin-top:100px;}
.prose ul{margin:0 0 22px;padding-left:1.3em;}
.prose li{margin:0 0 8px;padding-left:4px;}
.prose li::marker{color:var(--spruce);}
.prose a{color:var(--spruce);text-decoration:underline;text-underline-offset:3px;font-weight:600;}
.toc-link{display:block;padding:8px 0 8px 12px;border-left:2px solid var(--line);font-size:15px;line-height:1.35;color:var(--ink);}
.toc-link:hover{border-left-color:var(--turq);color:var(--spruce);}
#bp-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#bp-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
#pp-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#pp-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
.modal-alt{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:17px;font-weight:600;color:#fff;}
.modal-alt:hover{color:var(--turq);}
.chip:hover{border-color:var(--spruce);}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-size:15px;font-weight:600;}
.field input,.field textarea{width:100%;font-family:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:#fff;border-radius:12px;padding:12px 14px;resize:vertical;}
.field input:focus,.field textarea:focus{outline:3px solid var(--turq);outline-offset:1px;}
.field-err{margin:0;font-size:14px;font-weight:600;color:#B4332B;}
.lost-link{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:120px;padding:24px 26px;}
.lost-t{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--spruce);}
.lost-d{font-family:var(--font-sans);font-size:15px;line-height:1.45;color:var(--muted);}
#nf-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#nf-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}
.nf-chute{transform-box:view-box;transform-origin:252px 46px;animation:nf-sway 6s ease-in-out infinite;}
#cm-nl-email::placeholder{color:#DCE9ED;opacity:1;}
#cm-nl-email:focus{outline:2px solid var(--turq);outline-offset:2px;}

/* 4. Responsive rules */
@media (max-width: 960px){ .main-nav{display:none !important;} .menu-btn{display:inline-flex;} .g3,.g4{grid-template-columns:repeat(2, minmax(0, 1fr));} .split{grid-template-columns:minmax(0, 1fr) !important;} .qside{display:none !important;} .qgrid{grid-template-columns:minmax(0, 1fr) !important;} }
@media (max-width: 640px){ .g2,.g3,.g4{grid-template-columns:minmax(0, 1fr);} .hero-title{font-size:42px !important;} .big-title{font-size:36px !important;} .nav-cta{display:none !important;} }
@media (max-width: 640px){ .hide-phone{display:none !important;} }
@media (max-width: 640px){ .stat-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} .stat-grid > .cell{padding:22px 18px !important;} .stat-grid > .cell > div:first-child{font-size:38px !important;} }
@media (max-width: 640px){ .desk-arrows{display:none !important;} .phone-arrow{display:inline-flex;} .qcard{padding:26px 24px !important;gap:16px !important;} .qcard blockquote{font-size:16px !important;} }
@media (max-width: 960px){ .grid[style*="repeat(5"]{grid-template-columns:repeat(3, minmax(0, 1fr)) !important;} }
@media (max-width: 640px){ .grid[style*="repeat(5"]{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
@media (max-width: 640px){ .story-second{display:none !important;} }
@media (max-width: 640px){ .desk-arrows{display:none !important;} .phone-arrow{display:inline-flex;} .story-pair{display:none !important;} .story-stack{display:grid;touch-action:pan-y;} .story-stack > article{padding:24px 22px !important;gap:12px !important;} .story-stack h3{font-size:21px !important;} .story-stack article > div:nth-of-type(2){padding:12px 0 !important;} .story-stack article > div:nth-of-type(2) > span:first-child{font-size:36px !important;} .story-stack blockquote{font-size:15px !important;line-height:1.55 !important;} .story-stack blockquote .q-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;} }
@media (max-width: 960px){ .logo-grid{grid-template-columns:repeat(3, minmax(0, 1fr)) !important;} }
@media (max-width: 640px){ .logo-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
@media (max-width: 1100px){ .logo-grid[style*="repeat(6"]{grid-template-columns:repeat(3, minmax(0, 1fr)) !important;} }
@media (max-width: 640px){ .logo-grid[style*="repeat(6"]{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
@media (max-width: 640px){ .tex-mobile-soft{opacity:0.06 !important;} }
@media (max-width: 1100px){ .ind-grid{grid-template-columns:repeat(3, minmax(0, 1fr)) !important;} }
@media (max-width: 760px){ .ind-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
@media (max-width: 480px){ .ind-grid{grid-template-columns:1fr !important;} }
@media (max-width: 960px){ .lvl-strip{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
@media (max-width: 960px){ .filter-toggle{display:flex;} .filter-panel.is-closed{display:none !important;} .chk{min-height:44px !important;} }
@media (max-width: 960px){ #ow-filters{gap:18px !important;padding:18px 16px !important;} #ow-filters fieldset{flex-direction:row !important;flex-wrap:wrap !important;gap:8px !important;} #ow-filters legend{margin-bottom:8px !important;} #ow-filters .chk{width:auto !important;min-height:44px !important;padding:8px 14px !important;border:1.5px solid #8792A0 !important;border-radius:999px !important;font-size:14.5px !important;} #ow-filters .chk .chk-box{display:none !important;} #ow-filters .chk[aria-checked="true"]{background:#41ECC6 !important;border-color:#41ECC6 !important;color:#323846 !important;font-weight:600;} #ow-filters .chk[aria-checked="true"]::before{content:"\2713";font-weight:700;margin-right:2px;} .show-results{display:inline-flex;width:100%;} }
@media (max-width: 960px){ .meta-grid, .stat-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
@media (max-width: 1100px){ .g6{grid-template-columns:repeat(3, minmax(0, 1fr)) !important;} }
@media (max-width: 640px){ .g6{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
@media (max-width: 960px){ .team-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} .founders{grid-template-columns:minmax(0, 1fr) !important;} .grid.np-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
/* Phones: the nonprofits card gives its logo grid more room so wide logos stay readable */
@media (max-width: 640px){ .np-card{padding:28px 20px !important;} .np-grid > .cell{padding:12px 10px !important;min-height:80px !important;} }
@media (max-width: 560px){ .team-grid{grid-template-columns:minmax(0, 1fr) !important;} }
@media (max-width: 1100px){ .partner-wall{grid-template-columns:repeat(3, minmax(0, 1fr)) !important;} }
@media (max-width: 640px){ .partner-wall{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
@media (max-width: 960px){ .cust-wall{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} .bullets-2{grid-template-columns:minmax(0, 1fr) !important;} }
@media (max-width: 640px){ .stat-row{grid-template-columns:minmax(0, 1fr) !important;} }
@media (max-width: 1100px){ .post-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
@media (max-width: 960px){ .post-layout{grid-template-columns:minmax(0, 1fr) !important;} .post-aside{position:static !important;} .feat-post{grid-template-columns:minmax(0, 1fr) !important;} .post-stats{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
@media (max-width: 640px){ .post-grid{grid-template-columns:minmax(0, 1fr) !important;} }
@media (max-width: 640px){ .head-cover{aspect-ratio:16/9 !important;} }
@media (max-width: 960px){ .toc-box{display:none !important;} }
@media (max-width: 860px){ .modal-card{grid-template-columns:minmax(0, 1fr) !important;} }
@keyframes nf-sway{0%,100%{transform:rotate(-3deg) translateY(0);}50%{transform:rotate(3deg) translateY(6px);}}
@media (prefers-reduced-motion: reduce){ .nf-chute{animation:none;} }
@media (max-width: 640px){ .modal-overlay{padding:0 !important;align-items:stretch !important;} .modal-card{border-radius:0 !important;box-shadow:none !important;min-height:100%;align-content:start;} .modal-side{padding:28px 24px 24px !important;gap:14px !important;} .modal-side img{display:none;} .modal-side h2{font-size:30px !important;} .modal-form{padding:28px 24px 40px !important;} }

/* =========================================================================
   5. Site chrome added for the build
   ========================================================================= */
html{scroll-padding-top:104px;}
img{max-width:100%;}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 18px;background:var(--ink);color:#fff;border-radius:12px;font-weight:700;}
.skip-link:focus{top:12px;color:#fff;}
main:focus{outline:none;}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
body.is-locked{overflow:hidden;}
[hidden]{display:none !important;}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:rgba(251,252,252,0.95);border-bottom:1px solid var(--line);}
.site-header-inner{max-width:1360px;height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.site-logo{flex-shrink:0;}
.site-logo img{height:48px;width:auto;display:block;}
.main-nav{display:flex;align-items:stretch;height:100%;font-size:15px;font-weight:500;}
.main-nav > :last-child{border-right:1px solid var(--line);}
.nav-link{display:flex;align-items:center;padding:0 18px;border-left:1px solid var(--line);}
.nav-dd-btn{display:flex;align-items:center;gap:6px;padding:0 18px;border:0;border-left:1px solid var(--line);background:transparent;font:inherit;color:var(--ink);cursor:pointer;}
.nav-dd-btn:hover{color:var(--spruce);}
.nav-dd-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.nav-dd.is-open .dd-menu{display:flex;flex-direction:column;}
.nav-link.is-current,.nav-dd.is-current > .nav-dd-btn{box-shadow:inset 0 -3px 0 var(--turq);font-weight:700;}
.dd-menu a[aria-current="page"]{background:var(--sky-wash);font-weight:700;}
.site-header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.nav-cta{padding:10px 20px !important;font-size:14px !important;}
/* Small laptops: the full menu only fits on one line from 1160px, so narrower screens use the menu button (same as tablets) */
@media (min-width: 961px) and (max-width: 1159px){ .main-nav{display:none !important;} .menu-btn{display:inline-flex;} }
.menu-btn{padding:10px 14px !important;}
@media (max-width: 960px){ .site-header-inner{height:72px;} .site-logo img{height:40px;} }
@media (max-width: 640px){ .site-logo img{height:36px;} }

/* Mobile menu sheet */
.m-sheet{position:fixed;inset:0;z-index:60;background:#fff;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;}
.m-sheet-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 20px;background:#fff;border-bottom:1px solid var(--line);}
.m-sheet-head img{height:36px;width:auto;display:block;}
.round-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.m-nav{flex:1;display:flex;flex-direction:column;gap:28px;padding:16px 20px 32px;}
.m-list,.m-subs{list-style:none;margin:0;padding:0;}
.m-subs{margin:8px 0 12px;display:flex;flex-direction:column;}
.m-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0 4px;border:0;border-bottom:1px solid var(--line);background:transparent;font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--ink);text-align:left;cursor:pointer;}
.m-link[aria-current="page"]{color:var(--spruce);box-shadow:inset 3px 0 0 var(--turq);padding-left:12px;}
.m-link[aria-expanded="true"] .m-chev{transform:rotate(180deg);}
.m-sub{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;min-height:48px;padding:6px 4px 6px 16px;font-size:16px;font-weight:500;color:var(--ink);border-left:2px solid var(--line);}
.m-sub-note{font-size:14px;color:var(--muted);}
.m-foot{display:flex;flex-direction:column;gap:14px;margin-top:auto;}
.m-direct{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;font-size:15px;font-weight:600;color:var(--spruce);}
.m-direct a{min-height:44px;display:inline-flex;align-items:center;}
@media (min-width: 1160px){ .m-sheet{display:none !important;} }

/* Footer */
.site-footer{position:relative;overflow:hidden;background:var(--ink);}
.footer-texture{position:absolute;width:1100px;height:auto;max-width:none;right:-240px;top:-40px;opacity:0.35;-webkit-mask-image:linear-gradient(to left,#000 40%,transparent 85%);mask-image:linear-gradient(to left,#000 40%,transparent 85%);pointer-events:none;}
.footer-inner{position:relative;padding-top:96px;padding-bottom:36px;display:flex;flex-direction:column;gap:64px;}
.footer-cta{display:flex;flex-direction:column;gap:6px;}
.footer-cta-label{font-size:15px;font-weight:600;color:var(--turq);}
.footer-cta-title{font-size:56px;line-height:1.1;color:var(--fog);}
.footer-cta-email{font-family:var(--font-display);font-weight:600;font-size:56px;line-height:1.1;color:var(--turq);overflow-wrap:anywhere;}
.footer-cta-email:hover{color:var(--mint);}
.footer-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);gap:48px;}
.footer-brand{display:flex;flex-direction:column;gap:18px;}
.footer-brand img{height:46px;width:auto;display:block;align-self:flex-start;}
.footer-brand p{margin:0;font-size:14px;line-height:1.6;color:var(--fog);max-width:280px;}
.footer-direct{font-size:14px;line-height:1.8;color:var(--text-on-ink);}
.footer-direct a{color:var(--text-on-ink);}
.footer-links{display:flex;flex-direction:column;gap:12px;font-size:14px;}
.footer-links a{color:var(--text-on-ink);min-height:24px;}
.footer-links a:hover,.footer-direct a:hover,.footer-bottom a:hover{color:var(--turq);}
.footer-heading{color:#fff;font-weight:600;font-size:14px;margin-bottom:6px;}
.footer-signup{display:flex;flex-direction:column;gap:12px;}
.footer-signup label{font-size:14px;color:var(--fog);}
.footer-signup-row{display:flex;flex-wrap:wrap;gap:8px;}
.footer-signup input[type=email]{flex:1;min-width:180px;height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(195,247,235,0.55);background:var(--spruce);color:#fff;font:inherit;font-size:14px;}
.footer-signup input[type=email]::placeholder{color:#DCE9ED;opacity:1;}
.footer-signup input[type=email]:focus{outline:2px solid var(--turq);outline-offset:2px;}
.footer-signup .btn{padding:0 22px;font-size:14px;}
.footer-signup-status{margin:0;font-size:14px;color:var(--mint);min-height:1em;}
.footer-signup-status.is-error{color:#FFB4AC;}
.footer-bottom{border-top:1px solid var(--ink-line);padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:#A9B3B9;}
.footer-bottom a{color:#A9B3B9;}
@media (max-width: 960px){ .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width: 640px){ .footer-cols{grid-template-columns:minmax(0,1fr);gap:36px;} .footer-cta-title,.footer-cta-email{font-size:36px;} .footer-inner{padding-top:72px;gap:48px;} }

/* Contact modal */
.modal-overlay{position:fixed;inset:0;z-index:70;background:rgba(50,56,70,0.62);display:flex;align-items:flex-start;justify-content:center;padding:72px 24px 48px;overflow-y:auto;overscroll-behavior:contain;}
.modal-card{position:relative;width:100%;max-width:1000px;display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(20,24,32,0.35);}
.modal-close{position:absolute;top:18px;right:18px;z-index:3;width:44px;height:44px;}
.modal-side{position:relative;overflow:hidden;background:var(--ink);padding:48px 40px;display:flex;flex-direction:column;gap:22px;}
.modal-side-texture{position:absolute;width:980px;height:639px;max-width:none;left:-300px;top:200px;opacity:0.42;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%);mask-image:linear-gradient(to bottom,transparent 0%,#000 30%);pointer-events:none;}
.modal-side-text{position:relative;display:flex;flex-direction:column;gap:14px;}
.modal-eyebrow{color:var(--turq);}
.modal-side h2{font-size:38px;line-height:1.1;color:#fff;}
.modal-side p{margin:0;font-size:16px;line-height:1.6;color:var(--text-on-ink);}
.modal-side-direct{position:relative;display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.modal-direct-label{font-size:14px;font-weight:600;color:#fff;}
.modal-form{padding:48px 44px 40px;}
.modal-form form{display:flex;flex-direction:column;gap:20px;}
.form-summary{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--error-surface);border:1.5px solid var(--error);border-radius:14px;font-size:15px;line-height:1.5;color:var(--error-ink);}
.topic-set{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.topic-set legend{padding:0;margin-bottom:10px;font-size:15px;font-weight:600;}
.optional{font-weight:400;color:var(--muted);}
.topic-row{display:flex;flex-wrap:wrap;gap:8px;}
.topic-chip{min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--control-border);background:#fff;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;}
.topic-chip:hover{border-color:var(--spruce);}
.topic-chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink);}
.req{color:var(--error);}
.field input,.field textarea{border:1.5px solid var(--control-border);}
.field [aria-invalid="true"]{border:2px solid var(--error);}
.form-note{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--sky-wash);border:1px solid #D6EDF3;border-radius:12px;font-size:13.5px;color:var(--muted);}
.form-send-error{margin:0;font-size:14.5px;font-weight:600;color:var(--error);}
.form-send-error a{text-decoration:underline;}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;}
.form-privacy{margin:0;max-width:340px;font-size:13.5px;line-height:1.5;color:var(--muted);}
.form-privacy a{color:var(--spruce);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.modal-form button[type=submit][aria-busy="true"]{opacity:0.7;cursor:progress;}
.form-thanks{min-height:520px;display:flex;flex-direction:column;justify-content:center;gap:18px;}
.form-thanks:focus{outline:none;}
.thanks-mark{width:72px;height:72px;border-radius:50%;background:var(--mint);border:3px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;}
.form-thanks h2{font-size:34px;line-height:1.15;}
.form-thanks p{margin:0;font-size:17px;line-height:1.65;color:var(--muted);}
.form-thanks strong{color:var(--ink);}
.thanks-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
.turnstile-slot:empty{display:none;}
.ts-interactive .form-note{display:none;}
@media (max-width: 640px){ .modal-form{padding:28px 20px 32px;} .form-thanks{min-height:0;padding:24px 0;} .modal-side h2{font-size:30px;} }
/* Laptop-height screens (e.g. MacBook Air): tighten the modal so it fits without scrolling */
@media (min-width: 861px) and (max-height: 920px){
  .modal-overlay{padding:24px;}
  .modal-card{margin:auto 0;}
  .modal-side{padding:40px 36px;gap:18px;}
  .modal-side h2{font-size:34px;}
  .modal-form{padding:40px 40px 28px;}
  .modal-form form{gap:14px;}
  .modal-form .field{gap:6px;}
  .topic-set legend{margin-bottom:6px;}
  .topic-row{gap:6px;}
  .topic-chip{padding:8px 12px;font-size:14px;}
  .field input{padding:10px 14px;}
  .field textarea{height:96px;padding:10px 14px;}
  .form-thanks{min-height:440px;}
}
/* Shorter laptop windows (dock, bookmarks bar): tighten a little more and drop the spam-check note */
@media (min-width: 861px) and (max-height: 760px){
  .modal-overlay{padding:16px 24px;}
  .field textarea{height:80px;}
  .form-note{display:none;}
}

/* Carousel (story cards and homepage quotes). Without JavaScript every card shows in a grid. */
.carousel-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.carousel.is-ready .carousel-track > *{grid-row:1;}
.carousel.is-ready .carousel-track > .is-off{grid-column:1;visibility:hidden;}
.carousel-controls{display:flex;justify-content:center;align-items:center;gap:8px;}
.carousel:not(.is-ready) .carousel-controls,.carousel:not(.is-ready) ~ * .desk-arrows{display:none;}
.carousel-dots{display:flex;justify-content:center;gap:2px;}
.dot{background:var(--control-border);}
[aria-current="true"] > .dot{background:var(--ink);}
.carousel-track{touch-action:pan-y;}
.q-text{display:block;}
@media (max-width: 640px){
  .carousel-track{grid-template-columns:minmax(0,1fr);}
  .carousel.is-ready .carousel-track > .story-card{padding:24px 22px !important;gap:12px !important;}
  .carousel .story-card h3{font-size:21px !important;}
  .carousel .story-card .story-stat{padding:12px 0 !important;}
  .carousel .story-card .story-stat > span:first-child{font-size:36px !important;}
  .carousel .story-card blockquote{font-size:15px !important;line-height:1.55 !important;}
  .carousel .story-card .q-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}
}

/* Tap-to-zoom images (case study screenshots) */
.zoomable{cursor:zoom-in;display:block;padding:0;border:0;background:none;width:100%;text-align:left;position:relative;}
.zoom-hint{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(50,56,70,0.85);color:#fff;font-size:13px;font-weight:600;}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(20,24,32,0.9);display:flex;align-items:center;justify-content:center;padding:24px;}
.lightbox-inner{position:relative;max-width:min(1400px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px;}
.lightbox-inner img{max-width:100%;max-height:calc(100vh - 120px);object-fit:contain;border-radius:12px;background:#fff;touch-action:pinch-zoom;}
.lightbox-caption{margin:0;color:var(--text-on-ink);font-size:14px;text-align:center;max-width:70ch;}
.lightbox-close{position:fixed;top:16px;right:16px;}

/* Article prose: blog posts and Markdown pages */
.prose{font-size:18px;line-height:1.75;color:var(--ink);}
.prose h2{font-size:32px;line-height:1.2;margin-top:1.8em;}
.prose h3{font-size:24px;line-height:1.25;margin-top:1.6em;}
.prose h4{font-size:19px;margin-top:1.4em;font-family:var(--font-sans);}
.prose ol,.prose blockquote,.prose figure,.prose table,.prose .video{margin:0 0 22px;}
.prose h3,.prose h4{margin-bottom:12px;}
.prose a{color:var(--spruce);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.prose a:hover{color:var(--ink);}
.prose ul,.prose ol{padding-left:1.4em;}
.prose li + li{margin-top:0.4em;}
.prose img{height:auto;border-radius:16px;border:1px solid var(--line);}
.prose figure{margin-left:0;margin-right:0;}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:8px;}
.prose blockquote{margin-left:0;padding:4px 0 4px 22px;border-left:3px solid var(--turq);font-style:italic;}
.prose table{width:100%;border-collapse:collapse;font-size:16px;display:block;overflow-x:auto;}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
.prose iframe{max-width:100%;border:0;border-radius:16px;}
.prose .video{position:relative;aspect-ratio:16/9;}
.prose .video iframe{position:absolute;inset:0;width:100%;height:100%;}
@media (max-width: 640px){ .prose{font-size:17px;} .prose h2{font-size:26px;} .prose h3{font-size:21px;} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001s !important;animation-iteration-count:1 !important;transition-duration:0.001s !important;scroll-behavior:auto !important;}
}

/* Homepage quote cards */
.quote-carousel .carousel-track{gap:24px;align-items:stretch;}
.qcard{margin:0;border-radius:22px;padding:36px;display:flex;flex-direction:column;gap:20px;background:#fff;border:1px solid var(--line);}
/* Side cards were 85% opacity in the comp; full opacity keeps their small text above WCAG AA contrast. */
.qcard .qmark{color:var(--fog);display:block;line-height:0;}
.qcard blockquote{margin:0;font-size:15.5px;line-height:1.6;flex-grow:1;color:var(--ink);}
.qcard .q-name{font-weight:700;font-size:14.5px;color:var(--ink);}
.qcard .q-role{font-size:13.5px;color:var(--muted);}
.qcard.is-active{background:var(--ink);border-color:var(--ink);box-shadow:0 18px 40px rgba(50,56,70,0.18);opacity:1;}
.qcard.is-active .qmark{color:var(--turq);}
.qcard.is-active blockquote{font-size:17px;color:#fff;}
.qcard.is-active .q-name{color:#fff;}
.qcard.is-active .q-role{color:var(--mint);}
@media (max-width: 640px){ .qcard{padding:26px 24px;gap:16px;} .qcard.is-active blockquote{font-size:16px;} }

/* Homepage "I want to..." menu */
.hero-menu{position:absolute;top:58px;left:0;z-index:5;width:320px;max-width:calc(100vw - 40px);padding:8px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px rgba(50,56,70,0.14);display:flex;flex-direction:column;}
[data-popover-btn][aria-expanded="true"] svg{transform:rotate(180deg);}

/* Our Work filters */
.chk[aria-checked="true"] .chk-box{background:var(--turq);border-color:var(--turq);}
.chk[aria-checked="true"] .chk-box::after{content:"\2713";color:var(--ink);}
.filter-toggle[aria-expanded="true"] .filter-chev{transform:rotate(180deg);}
.story-soon{font-size:14px;font-weight:600;color:var(--muted);}
[data-work-card][hidden]{display:none !important;}
.prose pre{margin:0 0 22px;padding:16px 18px;background:var(--ink);color:#F1F5F7;border-radius:12px;font-size:14px;line-height:1.6;overflow-x:auto;white-space:pre;}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.9em;}
.prose :not(pre) > code{background:var(--sky-wash);border:1px solid var(--line);border-radius:6px;padding:1px 6px;}
.prose h5,.prose h6{font-family:var(--font-sans);font-size:16px;font-weight:700;margin:0 0 10px;}
.icon-btn.is-copied{border-color:var(--turq);background:var(--mint);}
/* Small phones: long partner names wrap instead of pushing the page sideways */
@media (max-width: 400px){
  .partner-wall .logo-cell{font-size:17px !important;padding:14px 10px !important;overflow-wrap:anywhere;}
}
/* Partner logo lockup (CXperts + partner): names scale with the box so long ones like "Optimizely" fit;
   on phones the row stacks so neither box gets squeezed */
.lockup{container-type:inline-size;}
.lockup > div{font-size:min(26px, 6cqi) !important;}
@media (max-width: 520px){
  .lockup{flex-direction:column;gap:12px !important;}
  .lockup > div{flex:none !important;width:100%;min-height:72px !important;font-size:22px !important;}
}

/* Buttons inside article text keep button styling, not link styling */
.prose a.btn{color:var(--ink);text-decoration:none;}
.prose a.btn-ghost-light{color:#fff;}
@media (max-width: 640px){ .glossary-group{grid-template-columns:minmax(0,1fr) !important;gap:4px !important;} .glossary-group > div[aria-hidden]{position:static !important;font-size:32px !important;} }
.benefit-grid{grid-template-columns:repeat(5, minmax(0, 1fr));}
@media (max-width: 960px){ .benefit-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width: 640px){ .benefit-grid{grid-template-columns:minmax(0, 1fr);} }

/* ---------- UX Maturity assessment (/ux-maturity/assessment) ---------- */
.uxa-card{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:28px;padding:48px;box-shadow:0 18px 40px rgba(50,56,70,0.08);}
.uxa-step{display:flex;flex-direction:column;gap:20px;}
.uxa-step[hidden]{display:none;}
.uxa-focus:focus{outline:none;}
.uxa-focus:focus-visible{outline:3px solid var(--turq);outline-offset:4px;border-radius:6px;}
.uxa-lead{margin:0;font-size:18px;line-height:1.65;}
.uxa-meta{margin:0;display:flex;flex-wrap:wrap;gap:8px 10px;font-size:15px;font-weight:600;color:var(--muted);}
.uxa-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.uxa-share-status{font-size:14px;font-weight:600;color:var(--spruce);}
.uxa-note{margin:0 0 16px;font-size:16px;}
/* progress */
.uxa-progress{display:flex;flex-direction:column;gap:10px;}
.uxa-progress-text{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;color:var(--muted);}
.uxa-bar{height:8px;border-radius:999px;background:#E3EEF1;overflow:hidden;}
.uxa-bar span{display:block;height:100%;border-radius:999px;background:var(--spruce);transition:width .3s ease;}
@media (prefers-reduced-motion: reduce){ .uxa-bar span{transition:none;} }
/* question */
.uxa-q{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:18px;}
.uxa-q legend{padding:0;margin-bottom:22px;display:flex;flex-direction:column;gap:10px;}
.uxa-question{font-family:var(--font-display);font-weight:600;font-size:30px;line-height:1.2;color:var(--ink);}
.uxa-options{display:flex;flex-direction:column;gap:12px;}
.uxa-option{position:relative;display:flex;align-items:flex-start;gap:16px;min-height:44px;padding:18px 20px;border:1.5px solid var(--control-border);border-radius:16px;background:#fff;cursor:pointer;transition:border-color .15s, background-color .15s, box-shadow .15s;}
.uxa-option:hover{border-color:var(--spruce);background:var(--sky-wash);}
.uxa-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.uxa-option:focus-within{outline:3px solid var(--turq);outline-offset:2px;}
.uxa-option.is-selected{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink);background:var(--mint);}
.uxa-check{flex-shrink:0;width:24px;height:24px;margin-top:1px;border-radius:50%;border:2px solid var(--control-border);background:#fff;display:inline-flex;align-items:center;justify-content:center;}
.uxa-option.is-selected .uxa-check{border-color:var(--ink);background:var(--ink);}
.uxa-option.is-selected .uxa-check::after{content:"";width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(-45deg);}
.uxa-option-body{display:flex;flex-direction:column;gap:4px;}
.uxa-option-body strong{font-size:17px;line-height:1.35;color:var(--ink);}
.uxa-option-body span{font-size:15px;line-height:1.55;color:#47525A;}
.uxa-error{margin:0;font-size:14px;font-weight:600;color:var(--error);}
.uxa-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:6px;}
/* results */
.uxa-level[hidden]{display:none;}
.uxa-level{display:flex;flex-direction:column;gap:16px;}
.uxa-score{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;}
.uxa-score-steps{display:flex;align-items:flex-end;gap:8px;width:260px;height:96px;}
.uxa-score-steps span{flex:1;border-radius:10px 10px 3px 3px;background:var(--c);opacity:.3;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;}
.uxa-score-steps span em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink);}
.uxa-score-steps span:nth-child(n+4) em{color:#fff;}
.uxa-score-steps span.is-you{opacity:1;box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink);}
.uxa-score-text{margin:0;font-size:16px;color:var(--muted);}
.uxa-score-text strong{font-family:var(--font-display);font-size:28px;color:var(--ink);}
.uxa-h2{margin:12px 0 0;font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.25;color:var(--ink);}
.uxa-dims{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line);}
.uxa-dims li{display:grid;grid-template-columns:minmax(0, 1.1fr) 120px minmax(0, 1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);}
.uxa-dim-name{font-size:15px;font-weight:700;color:var(--ink);}
.uxa-dim-bar{display:flex;gap:4px;}
.uxa-dim-bar i{flex:1;height:10px;border-radius:3px;background:#E3EEF1;}
.uxa-dim-bar i.on{background:var(--spruce);}
.uxa-dim-label{font-size:15px;color:#47525A;}
.uxa-report{margin-top:28px;padding:28px;background:var(--sky-wash);border:1px solid var(--sky-line);border-radius:20px;}
.uxa-form{display:flex;flex-direction:column;gap:16px;}
.uxa-fields{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;}
.uxa-fields .field:last-child{grid-column:1 / -1;}
.uxa-fine{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted);}
.uxa-form .btn{align-self:flex-start;}
.uxa-sent:focus{outline:none;}
/* Desktop and laptop: keep a whole question, its five answers and Previous/Next on one screen */
@media (min-width: 961px){
  .uxa-card{max-width:960px;padding:24px 40px 26px;}
  .uxa-step[data-step="q"]{gap:14px;}
  .uxa-q legend{margin-bottom:14px;}
  .uxa-q legend .eyebrow{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* already shown above the progress bar */
  .uxa-question{font-size:25px;line-height:1.22;}
  .uxa-options{gap:8px;}
  .uxa-option{padding:9px 18px;gap:14px;border-radius:14px;}
  .uxa-option-body{gap:1px;}
  .uxa-option-body strong{font-size:16px;}
  .uxa-option-body span{font-size:14.5px;line-height:1.45;}
  .uxa-nav{margin-top:2px;}
}
@media (max-width: 640px){
  .uxa-card{padding:26px 18px;border-radius:22px;}
  .uxa .hero-title{font-size:32px !important;}
  .uxa-question{font-size:23px;}
  .uxa-lead{font-size:17px;}
  .uxa-option{padding:16px 14px;gap:12px;}
  .uxa-nav .btn{flex:1;justify-content:center;}
  .uxa-dims li{grid-template-columns:minmax(0, 1fr) 100px;gap:8px 12px;}
  .uxa-dim-label{grid-column:1 / -1;}
  .uxa-fields{grid-template-columns:minmax(0, 1fr);}
  .uxa-report{padding:20px 16px;}
}
/* Model page hero staircase: level names shrink to fit their bar. On phones the staircase
   sits faintly behind the hero copy (decorative; the model table below carries the content). */
.ux-stair-bar{container-type:inline-size;overflow:hidden;}
.ux-stair-name{font-size:clamp(10px, 18.5cqi, 16px);}
@media (max-width: 640px){
  .ux-hero .ux-stair{position:absolute;left:16px;right:16px;top:48px;bottom:96px;height:auto !important;opacity:0.1;pointer-events:none;}
  .ux-hero-copy{position:relative;z-index:1;}
}