:root{
--_🎨-color--base---base--light-0: #0a0a0a00;
--_🎨-color--base---base--dark-0: #f2f2f300;
--_🎨-color--base---base--light-4: #0a0a0a0a;
--_🎨-color--base---base--dark-4: #f2f2f30a;
--_🎨-color--base---base--light-8: #0a0a0a14;
--_🎨-color--base---base--dark-8: #f2f2f314;
--_🎨-color--base---base--light-16: #0a0a0a29;
--_🎨-color--base---base--dark-16: #f2f2f329;
--_🎨-color--base---base--light-32: #0a0a0a52;
--_🎨-color--base---base--dark-32: #f2f2f352;
--_🎨-color--base---base--light-48: #0a0a0a7a;
--_🎨-color--base---base--dark-48: #f2f2f37a;
--_🎨-color--base---base--light-64: #0a0a0aa3;
--_🎨-color--base---base--dark-64: #f2f2f3a3;
--_🎨-color--base---base--light-88: #0a0a0ae0;
--_🎨-color--base---base--dark-88: #f2f2f3e0;
--_🎨-color--base---base--light-100: #0a0a0a;
--_🎨-color--base---base--dark-100: #f2f2f3;
--_🎨-color--base---depth--light: #101114;
--_🎨-color--base---lift--light: #1c1c21;
--_🎨-color--base---depth--dark: #0e0f11;
--_🎨-color--base---lift--dark: #26262b;
--_🎨-color--base---accent--primary: #2BB5CB;
--_🎨-color--base---colors--nssyntaxmint: #0F4C44;
--_🎨-color--base---colors--nspacketsky: #14395C;
--_🎨-color--base---colors--nsqubitorchid: #0C4D5C;
--_🎨-color--base---colors--nslatencypeach: #12424B;
--_🎨-color--base---colors--nscachesand: #0B3B44;
--_🎨-color--base---colors--nscorecoral: #d95a56;
--_🎨-color--base---ui--success: #1AE299;
}
.cookies{display:none!important}
[class*="cta_sales"],[class*="sales-"],[class*="ultra-small"]{display:none!important}
.w-webflow-badge{display:none!important}
.section_testimonials .image_cover{display:none!important}
.nav-cta_desktop{background-image:url(/assets/nd/waves-teal-16x9.png)!important;background-size:cover!important;background-position:50% 100%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.right_profile{background-image:url(/assets/nd/glow-teal.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.right_profile.create{background-image:url(/assets/nd/waves-teal-1x1.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.right_profile.reset{background-image:url(/assets/nd/glow-sunset.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.left_book{background-image:url(/assets/nd/waves-teal-16x9.png)!important;background-size:cover!important;background-position:50% 100%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.card-plan_top-tile.pro{background-image:url(/assets/nd/glow-teal.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.card-plan_top-tile.max{background-image:url(/assets/nd/waves-teal-1x1.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.video_about{background-image:url(/assets/nd/glow-sunset.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.right_product-a{background-image:url(/assets/nd/waves-teal-16x9.png)!important;background-size:cover!important;background-position:50% 100%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.right_column.data-stack{background-image:url(/assets/nd/glow-teal.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.card_impact-left{background-image:url(/assets/nd/waves-teal-1x1.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
/* Footer left column: stack the logo above the ServiceNow partner badges (template ships it as a row → badges overlapped the wordmark) */
.footer .left-footer{flex-direction:column!important;align-items:flex-start!important}
/* Footer legal links hovered to a template brown (#381d0f) — use our brand teal */
.link_footer-legal:hover{color:#2bb5cb!important}
/* Contact B form: template input tokens render near-black text on near-black fields — make it all legible */
.section_hero-contact-b .text-field{background:#141418!important;border:1px solid #33333b!important;color:#f2f2f3!important;transition:border-color .15s ease}
.section_hero-contact-b .text-field::placeholder{color:#8a8b91!important;opacity:1}
.section_hero-contact-b .text-field:focus,.section_hero-contact-b .text-field:hover{border-color:#2bb5cb!important;outline:none}
/* field labels (NAME / WORK EMAIL / …) shipped near-black — lighten them */
.section_hero-contact-b form .label-large{color:#c3c4ca!important;opacity:1!important}
/* Footer: template's even 1fr column spread, just with a 4th column. Logo keeps its natural
   width (template's 1fr 1fr split left the right half too narrow for 4 columns → overflow). */
.footer_top-tile{grid-template-columns:auto 1fr!important}
.footer_columns{display:flex!important;flex-direction:row!important;justify-content:flex-end!important;width:100%!important;flex:1 1 auto!important;gap:72px!important}
.footer_columns>*{flex:0 0 auto!important}
.footer_columns .footer-column{white-space:nowrap!important}
@media(max-width:991px){.footer_columns{flex-wrap:wrap!important;justify-content:flex-start!important;gap:32px 48px!important}.footer_columns>*{flex:0 0 44%!important}}
@media(max-width:479px){.footer_columns>*{flex:0 0 100%!important}}
@media(max-width:991px){.footer_columns{grid-template-columns:1fr 1fr!important;justify-content:start!important}}
@media(max-width:479px){.footer_columns{grid-template-columns:1fr!important}}
.footer-partner-badges{margin-top:28px!important}
.master_product-b-marquee{background-image:url(/assets/nd/glow-teal.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
/* Solutions hero: widen the headline column (was 6-col / 42.5rem) and give the lede a comfortable, prominent width */
.section_hero-product-b .headline_product-b{max-width:64rem!important}
.section_hero-product-b .subtext_4-columns{max-width:52rem!important;margin-left:auto!important;margin-right:auto!important}
.section_hero-product-b .subtext_4-columns p{max-width:none!important}
/* Solutions hero marquee: reuse the homepage card_product, sized for the scrolling band */
.master_product-b-marquee .card_product{width:340px!important;min-height:auto!important;padding:26px!important;grid-row-gap:20px!important;grid-column-gap:20px!important}
.master_product-b-marquee .card_product .heading-style-h5{font-size:1.5rem}
/* section_documents is a light band — force accordion titles/text dark (template default is white, for a dark bg) */
.section_documents .accordion-title h3,.section_documents .acordion-text{color:#1c1c21!important}
.image-wrap_product-c-tabs{background-image:url(/assets/nd/waves-teal-16x9.png)!important;background-size:cover!important;background-position:50% 100%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.image-wrap_scroll-card{background-image:url(/assets/nd/glow-teal.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.image-wrap_scroll-card.second{background-image:url(/assets/nd/waves-teal-1x1.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.image-wrap_scroll-card.third{background-image:url(/assets/nd/glow-sunset.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.card_bento-left{background-image:url(/assets/nd/waves-teal-16x9.png)!important;background-size:cover!important;background-position:50% 100%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.card_bento-middle-top{background-image:url(/assets/nd/glow-teal.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.card_bento-right{background-image:url(/assets/nd/waves-teal-1x1.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.right_home-b{background-image:url(/assets/nd/glow-sunset.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.left_tab-home{background-image:url(/assets/nd/waves-teal-16x9.png)!important;background-size:cover!important;background-position:50% 100%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.left_tab-home.second{background-image:url(/assets/nd/glow-teal.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.left_tab-home.third{background-image:url(/assets/nd/waves-teal-1x1.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.left_tab-home.fourth{background-image:url(/assets/nd/glow-teal.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.left_tab-home.fifth{background-image:url(/assets/nd/waves-teal-16x9.png)!important;background-size:cover!important;background-position:50% 100%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.image-wrap_scroll{background-image:url(/assets/nd/glow-teal.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.image-wrap_scroll.second{background-image:url(/assets/nd/waves-teal-1x1.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.image-wrap_scroll.third{background-image:url(/assets/nd/glow-sunset.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.image-wrap_scroll.third.desktop{background-image:url(/assets/nd/waves-teal-16x9.png)!important;background-size:cover!important;background-position:50% 100%!important;background-repeat:no-repeat!important;background-color:#050708!important}
.cta_mobile-menu{background-image:url(/assets/nd/glow-teal.png)!important;background-size:cover!important;background-position:50% 60%!important;background-repeat:no-repeat!important;background-color:#050708!important}
/* contrast fixes — sections that were dark-on-light inversions in the
   template end up dark-text-on-dark after the token flip. Force light type. */
.section_investors :where(h1,h2,h3,h4,h5,h6,.heading-style-h0,.heading-style-h2,.heading-style-h5){color:#f2f2f3!important}
.section_investors .tone-medium,.section_investors p{color:#a3a3a9!important}
.section_investors .label-large{color:#8a8a90!important}
.section_cta :where(h1,h2,h3){color:#f2f2f3!important}
/* hero tabs — inactive labels flipped dark-on-dark; force readable states */
.w-tab-link{color:#a8a8ae!important}
.w-tab-link.w--current{color:#0b0c0e!important}
/* case-slider: hide the template's fictional client wordmarks (claims stay) */
[class*="logo_case"]{display:none!important}
/* team: only the real founder card renders */
.card_team{display:none!important}
.card_team--keep{display:flex!important;flex-direction:column}
/* active tab pill: white pill, dark label (background token flipped dark) */
.w-tab-link.w--current{background:#f2f2f3!important;color:#0b0c0e!important;border-radius:8px}

[class*="ultra-bar"],[class*="ultra_"],[class*="ultra-label"]{display:none!important}
[class*="ultra-pop"]{display:none!important}
[class*="dropdown"] [class*="ultra"] *{color:#f2f2f3!important}
[class*="dropdown"] img[src*="BYQ"],[class*="dropdown"] svg[class*="byq"]{display:none!important}
.w-dropdown-list .heading-style-h5,nav .heading-style-h5{color:#f2f2f3!important}
[class*="section_cta"]{background:var(--_🎨-color--tokens---background--base)!important}
/* product accordion: active card stays light — force dark text inside it */
.accordion_top-tile,.accordion-title,.acordion-text,.accordion-bottom-tile{color:#1c1c21}
.acordion-text,.accordion-bottom-tile .tone-medium{color:#4a4a52!important}
/* case slider card: brand aurora + light text instead of gray template art */

.case_large *,.case-large_quote{color:#f2f2f3!important}
/* footer logo: render the wordmark at proper size regardless of wrapper */
[class*="footer"] img[alt="phyllis"]{height:44px!important;width:auto!important;max-width:none!important}
/* Feature tabs: inactive labels sit on the dark section — make them readable; keep dark text only on the active light card */
.tab_accordion{color:rgba(255,255,255,.92)}
.tab_accordion .accordion-title,.tab_accordion .acordion-text,.tab_accordion .accordion-bottom-tile{color:rgba(255,255,255,.92)}
.tab_accordion .acordion-text,.tab_accordion .accordion-bottom-tile .tone-medium{color:rgba(255,255,255,.58)!important}
.tab_accordion.w--current .accordion-title,.tab_accordion.w--current .acordion-text,.tab_accordion.w--current .accordion-bottom-tile{color:#1c1c21}
.tab_accordion.w--current .acordion-text,.tab_accordion.w--current .accordion-bottom-tile .tone-medium{color:#4a4a52!important}
/* "Works with the stack" — 3 static B&W logo tiles with a soft fade-in */
.phx-stack-tiles{display:flex;justify-content:center;width:100%;gap:18px;animation:phxtilesfade 1.1s ease both}
/* Brand pink -> teal, app-wide. Darker teal into electric on the glows. */
:root{--_🎨-color--base---colors--nscorecoral:#2bb5cb}
.cta_bg{background-image:radial-gradient(ellipse 85% 80% at 50% 55%,#4fdcd6 0%,#0a6270 46%,transparent 78%)!important}
.phx-tile{width:104px;height:104px;box-sizing:border-box;padding:26px;display:flex;align-items:center;justify-content:center;background:#141518;border:1px solid rgba(255,255,255,.06);border-radius:22px}
.phx-tile img{width:100%;height:100%;object-fit:contain;opacity:.92}
@keyframes phxtilesfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.phx-stack-tiles{animation:none}}
/* Rounded, inset hero — black bars run up the sides, corners curve up into the next section */
.uc-hero-rounded{margin:10px 14px 0;border-radius:32px;background:linear-gradient(180deg,#0e1013 0%,#08090b 70%);overflow:hidden;position:relative}
/* "What Phyllis can do" cards — a real Phyllis composer per capability */
.phx-cmd{width:100%;box-sizing:border-box;margin-top:16px;display:flex;flex-direction:column;gap:14px;min-height:150px;background:#0e0f11;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 14px 11px}
.phx-cmd-body{min-height:56px}
.phx-cmd-body{flex:1;color:#8a8a90;font-size:14px;line-height:1.45;min-height:54px}
.phx-cmd-text{white-space:pre-wrap}
.phx-cmd-caret{display:inline-block;width:2px;height:1.05em;background:#5FE6D0;border-radius:1px;margin-left:1px;transform:translateY(2px);animation:phxcmdcaret 1.1s steps(1) infinite}
.phx-cmd-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.phx-cm-left{display:flex;align-items:center;gap:12px;min-width:0}
.phx-cm-model{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#8a8a90}
.phx-cm-opt{display:inline-flex;align-items:center;gap:4px;color:#8a8a90;font-size:13px;white-space:nowrap}
.phx-cm-opt .cmi,.phx-cm-model .cmi{opacity:.6}
.phx-cm-right{display:flex;align-items:center;gap:8px;flex:none}
.phx-cm-clip{color:#8a8a90;display:inline-flex}
.phx-cm-send{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#d6d6da}
@keyframes phxcmdcaret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Seamless marquee of "what Phyllis can do" capability cards */
.phx-marquee{overflow-x:auto;overflow-y:hidden;padding:6px 0;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.phx-marquee::-webkit-scrollbar{display:none}
.phx-marquee.dragging{cursor:grabbing}
.phx-track{display:flex;width:max-content}
.phx-card{flex:0 0 auto;width:360px;margin-right:20px;box-sizing:border-box;background:#0d0e10;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px 20px 18px}
.phx-card-icon{width:44px;height:44px;border:1px solid rgba(255,255,255,.1);border-radius:11px;display:flex;align-items:center;justify-content:center;color:#e6e6ea;margin-bottom:16px}
.phx-card-icon svg{width:23px;height:23px}
.phx-card-title{font-size:18px;font-weight:600;color:#f7f6f5;margin:0}
/* Capability icon draws itself once on load (staggered via --phxd), then holds */
.phx-card-icon svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:phxdraw 1.5s ease forwards;animation-delay:var(--phxd,0s)}
@keyframes phxdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.phx-track{animation:none}.phx-card-icon svg path{animation:none;stroke-dashoffset:0}.phx-cmd-caret{animation:none}}

/* Products mega-menu: Products + 3 use-case columns as a flex row, with a
   featured picture card on the right. Desktop only; mobile stays stacked. */
@media screen and (min-width:992px){
  .nav-menu .dropdown_inner{gap:var(--spacing--40)!important;align-items:stretch}
  .nav-menu .left_nav-menu{display:flex!important;flex-flow:row!important;gap:var(--spacing--32)!important;grid-template-columns:none!important;align-items:flex-start;flex:1 1 auto;min-width:0}
  .nav-menu .left_nav-menu .nav_column{flex:1 1 0;min-width:0;max-width:none}
  .nav-menu .nav_feature{display:flex!important;flex-direction:column;justify-content:flex-end;width:21rem;flex:0 0 21rem;align-self:stretch;min-height:19rem;padding:1.4rem;border-radius:1.1rem;overflow:hidden;position:relative;text-decoration:none;background-size:cover;background-position:center}
  .nav-menu .nav_feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,15,.15) 0%,rgba(8,9,11,.55) 55%,rgba(6,7,9,.9) 100%)}
  .nav-menu .nav_feature>*{position:relative;z-index:1}
  .nav-menu .nav_feature .nf-kicker{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#9fe9df;margin-bottom:.5rem}
  .nav-menu .nav_feature .nf-title{color:#fff;margin:0 0 .35rem;font-weight:600}
  .nav-menu .nav_feature .nf-link{color:#e7e7ea;opacity:.85;font-size:.9rem}
}

/* Roles section (home) — force readable light text + dark cards on the dark section */
.section_home-a-features h2{color:#f2f2f3!important}
.section_home-a-features .card_product{background:#0d0f13!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:16px;padding:24px;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:0!important;height:100%!important;min-height:0!important}
.section_home-a-features .grid_features{grid-auto-rows:1fr!important;align-items:stretch!important}
.section_home-a-features .card_product .label-large{color:#c9ccd3!important}
.section_home-a-features .card_product .heading-style-h5{color:#f2f2f3!important;margin-top:6px!important}
.section_home-a-features .card_product img{margin-top:16px!important}
.section_home-a-features .card_product p,.section_home-a-features .card_product .tone-medium{color:#9a9ea7!important;margin-top:14px!important}
.section_home-a-features .card_product .icon-wrap_tag{color:#5FE6D0}

/* Case-slider — fix washed-out overlay: dark gradient for readable titles */
.card_case{background-color:#101114!important}
.overlay_card-case{background-image:linear-gradient(180deg,rgba(8,9,11,0) 0%,rgba(8,9,11,.55) 55%,rgba(8,9,11,.95) 100%)!important;height:80%!important}
.overlay_card-case-top{background-image:linear-gradient(180deg,rgba(8,9,11,.7) 0%,rgba(8,9,11,0) 100%)!important;height:30%!important}

/* Use-cases carousel (home Products section) */
.uc-carousel-wrap{position:relative}
.uc-carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 97%,transparent)}
.uc-carousel::-webkit-scrollbar{display:none}
.uc-card{flex:0 0 300px;scroll-snap-align:start;background:#0d0f13;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;text-decoration:none;display:flex;flex-direction:column;min-height:210px;transition:border-color .2s,transform .2s}
.uc-card:hover{border-color:rgba(43,181,203,.45);transform:translateY(-2px)}
.uc-card-tag{font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;color:#7fd9cf;margin-bottom:16px}
.uc-card-name{color:#f2f2f3;font-weight:600;font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
.uc-card-dek{color:#9a9ea7;font-size:14px;line-height:1.5;flex:1}
.uc-card-arrow{color:#5FE6D0;margin-top:16px;display:flex}
.uc-arrows{display:flex;gap:8px;justify-content:flex-end;margin-top:22px}
.uc-arrow-btn{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:transparent;color:#e7e7ea;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.uc-arrow-btn:hover{background:rgba(255,255,255,.07)}

/* Use native card_product inside the carousel */
.uc-carousel .card_product{flex:0 0 372px;scroll-snap-align:start;min-height:200px}

/* The-loop section (rebuilt, robust) */
.section_home-a-scroll .loop-head{text-align:center;max-width:44rem;margin:0 auto 3rem}
.section_home-a-scroll .loop-head h2{color:#f2f2f3;margin:.6rem 0 .8rem}
.section_home-a-scroll .loop-head p{color:#9a9ea7}
.section_home-a-scroll .loop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.section_home-a-scroll .card_product{background:#0d0f13!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:16px!important;padding:22px!important;min-height:210px}
.section_home-a-scroll .card_product:hover{border-color:rgba(43,181,203,.45)!important}
.section_home-a-scroll .card_product .label-large{color:#c9ccd3!important}
.section_home-a-scroll .card_product .heading-style-h5{color:#f2f2f3!important}
.section_home-a-scroll .card_product p,.section_home-a-scroll .card_product .tone-medium{color:#9a9ea7!important}
.section_home-a-scroll .loop-num{font:600 12px/1 ui-monospace,Menlo,monospace;color:#5FE6D0;letter-spacing:.05em}
.section_home-a-scroll .loop-arrow{color:#5FE6D0;margin-top:16px;display:flex}
@media(max-width:1100px){.section_home-a-scroll .loop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.section_home-a-scroll .loop-grid{grid-template-columns:1fr}}

/* Scroll-reveal for added loop items (Deploy/Test) */
.phx-reveal{transition:opacity .55s cubic-bezier(.22,.8,.2,1),transform .55s cubic-bezier(.22,.8,.2,1)}
.phx-reveal.in{opacity:1!important;transform:none!important}

/* Robust sticky cross-fade for the loop section's right-side mockups */
.section_home-a-scroll .right_scroll{position:sticky}
.section_home-a-scroll .image-wrap_scroll{position:absolute!important;inset:0;opacity:0!important;transition:opacity .5s ease;display:flex!important;align-items:center;justify-content:center}
.section_home-a-scroll .image-wrap_scroll.sx-active{opacity:1!important}
.sx-mock{width:100%;max-width:26rem;background:#0d0f13;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:22px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);font-family:Geist,ui-sans-serif,system-ui}
.sx-mock .sx-h{display:flex;align-items:center;gap:8px;color:#eef0f4;font-weight:600;font-size:14px;margin-bottom:16px}
.sx-row{display:flex;align-items:center;gap:10px;padding:7px 0;color:#c9ccd3;font-size:13px}
.sx-row .sx-ck{color:#5FE6D0}
.sx-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.08);flex:1;overflow:hidden}
.sx-bar>span{display:block;height:100%;background:#2bb5cb}
.sx-foot{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);color:#8b8f98;font-size:12px}
.sx-chip{font:600 11px ui-monospace,Menlo,monospace;color:#7fd9cf;background:rgba(43,181,203,.12);border:1px solid rgba(43,181,203,.3);border-radius:6px;padding:3px 7px}

/* Product pages — kill the giant vertical gaps in the alternating columns.
   Template forces .right_column{min-height:42.5rem} and card_product{min-height:584px};
   let the media/card side hug its content so sections aren't 840px of mostly-empty. */
.section_column .right_column{min-height:0!important}
.section_column{padding-top:64px!important;padding-bottom:64px!important}
/* Explore-more-products: 4 sibling products in one clean, EVEN row (no lonely 2nd row).
   Cards keep their original template height — only the column count changes. */
.section_more-products .grid_more-products{grid-template-columns:repeat(4,1fr)!important;grid-template-rows:auto!important}
/* Some more-products cards + the "Explore more products" heading have an unwired Webflow ix2 reveal id and stay stuck at opacity:0. Force visible. */
.section_more-products .card_product,.section_more-products .headline_more-products,.section_more-products .headline_more-products *{opacity:1!important;transform:none!important}
.section_more-products{padding-top:72px!important;padding-bottom:72px!important}

/* Book-a-demo: cap the cal.com embed height so the page doesn't grow to the
   full month grid. !important beats cal.com's dynamically-set inline height. */
.demo-cal-embed{min-height:640px;border-radius:14px}

/* Blog section was the only non-black band on the homepage — flatten to black */
.section_home-a-blog,.section_home-a-blog .card_blog,.section_home-a-blog [class*="card"]{background-color:#0a0a0b!important;background-image:none!important}

/* Roles section carried a template bg token — flatten to black to match the page */
.section_home-a-features{background-color:#0a0a0b!important;background-image:none!important}

/* Roles section: template gives the headline a 200px bottom margin — tighten to match other sections */
.section_home-a-features .headline_home-a-features{margin-bottom:56px!important}
/* keep the person images a consistent height so cards read uniform */
.section_home-a-features .card_product img{height:170px!important;object-fit:cover!important;width:100%!important;border-radius:12px!important}

/* Reveal real headshots inside kept team cards (Zach, Regan) and lay the
   two founder cards out as a centered 2-up instead of the 3-col grid. */
.card_team--keep .image_cover{display:block!important;object-position:center 18%}
.secion_team .grid_team{grid-template-columns:1fr 1fr!important;max-width:820px;margin-inline:auto}
@media (max-width:640px){.secion_team .grid_team{grid-template-columns:1fr!important}}

/* ---- phv: card visuals (product pages) — black back card, white front -- */
.right_column:has(.phv) .widget-list_outer,.widget-list_outer:has(.phv){background:#0a0a0a;border:1px solid rgba(247,246,245,.16);border-radius:18px}
.widget-list_outer:has(.phv) .widget-list_bottom-tile,.widget-list_outer:has(.phv) .text_body-bold{color:#f7f6f5}
.phv{width:100%;box-sizing:border-box;background:#f7f6f5;border:none;border-radius:12px;color:#0a0a0a;font-family:'StackSans text Variable',sans-serif;overflow:hidden}
.phv-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid rgba(10,10,10,.14);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,10,10,.55)}
.phv-cap b{color:#0a0a0a;font-weight:600}
.phv-body{padding:20px 22px}
.phv-q{font-size:13.5px;font-weight:500;color:#f7f6f5;background:#0a0a0a;border-radius:6px;padding:10px 14px;margin-bottom:16px;overflow-wrap:anywhere}
.phv-row{display:flex;align-items:baseline;gap:12px;padding:9px 0}
.phv-row+.phv-row{border-top:1px solid rgba(10,10,10,.09)}
.phv-mark{flex:0 0 9px;width:9px;height:9px;background:#0a0a0a;align-self:center}
.phv-mark.off{background:none;border:1px solid rgba(10,10,10,.45)}
.phv-mark.warn{background:none;border:1.5px solid #0a0a0a}
.phv-name{font-size:14.5px;color:#0a0a0a;white-space:nowrap}
.phv-name small{display:block;font-size:12px;font-weight:400;color:rgba(10,10,10,.55);white-space:normal}
.phv-lead{flex:1 1 auto;border-bottom:1px dotted rgba(10,10,10,.3);min-width:24px;transform:translateY(-4px)}
.phv-val{font-size:12px;color:rgba(10,10,10,.6);text-align:right;white-space:nowrap}
.phv-chip,.phv-chip.mint,.phv-chip.sand{font-size:11.5px;font-weight:500;background:#0a0a0a;color:#f7f6f5;border-radius:4px;padding:3px 8px;white-space:nowrap}
.phv-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(10,10,10,.14);font-size:12.5px;color:rgba(10,10,10,.6)}
.phv-stamp{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0a0a0a;border:1.5px solid #0a0a0a;border-radius:3px;padding:5px 9px;transform:rotate(-2deg);white-space:nowrap}
.phv-stamp.hollow{color:rgba(10,10,10,.5);border-color:rgba(10,10,10,.35)}
.phv-group{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(10,10,10,.45);padding:14px 0 4px}
.phv-spine{border-left:1px solid rgba(10,10,10,.25);margin-left:4px;padding-left:16px}
.phv-step{position:relative;padding:10px 0}
.phv-step:before{content:"";position:absolute;left:-20.5px;top:16px;width:9px;height:9px;background:#0a0a0a}
.phv-step.gate:before{background:#f7f6f5;border:1.5px solid #0a0a0a;left:-21.5px}
.phv-step.dim:before{background:none;border:1px solid rgba(10,10,10,.45)}
.phv-step-k{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(10,10,10,.5);margin-bottom:2px}
.phv-step-t{font-size:14.5px}
.phv-step-t small{display:block;font-size:12px;color:rgba(10,10,10,.55)}
.phv-big{font-family:'StackSans headline Variable',sans-serif;font-size:44px;line-height:1;letter-spacing:-.01em;padding:6px 0 2px}
.phv-bar{height:10px;background:#0a0a0a;margin:14px 0 8px}
.phv-num{font-size:10.5px;font-weight:600;color:rgba(10,10,10,.45);flex:0 0 22px;align-self:center}
@media(max-width:479px){.phv-val{white-space:normal}.phv-name{white-space:normal}}

/* footer: single LinkedIn icon, brand hover to match link_footer-legal */
.link-socials:hover{color:#2bb5cb!important;opacity:1!important}

/* ── mobile fixes ─────────────────────────────────────────────────────────
   The desktop rules above (and inline grid styles on the homepage) pinned
   fixed column counts that no media query could beat, so the layout blew
   past the viewport on phones. These restore the stacked/rail behaviour. */

/* Footer: `.footer_top-tile{grid-template-columns:auto 1fr!important}` above has
   no breakpoint, so on phones the `auto` column collapsed to ~24px — squashing the
   partner badges to slivers and spilling the logo over the links column. */
@media(max-width:991px){
  .footer_top-tile{grid-template-columns:1fr!important}
  .footer .left-footer{width:100%!important}
  .footer-partner-badges img{max-width:100%!important}
}
@media(max-width:479px){
  .footer-partner-badges img{height:72px!important}
}

/* Security & trust: was an inline `1fr 300px` grid, which crushed the copy
   column to ~90px and pushed the ISO mark off-screen. */
.trust-grid{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;margin-top:32px}
@media(max-width:991px){
  .trust-grid{grid-template-columns:1fr;gap:28px}
  .trust-grid>:last-child{justify-self:center!important}
}

/* Personas: 3-up grid on desktop (from .grid_features), swipeable rail on phones.
   Mirrors the .uc-carousel pattern used by the use-cases section above. */
.persona-rail{gap:20px}
@media(max-width:767px){
  .section_home-a-features .persona-rail{
    display:flex!important;
    grid-template-columns:none!important;
    gap:18px!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding:4px 2px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 97%,transparent);
  }
  .section_home-a-features .persona-rail::-webkit-scrollbar{display:none}
  .section_home-a-features .persona-rail>.card_product{
    flex:0 0 82vw;max-width:340px;scroll-snap-align:start;
  }
}
@media(min-width:768px){
  .section_home-a-features .uc-arrows{display:none}
}

/* Use-cases rail: 372px cards are wider than a phone viewport. */
@media(max-width:479px){
  .uc-carousel .card_product{flex:0 0 82vw!important;max-width:340px}
}

/* Mobile menu: drop the Nerdstack template's BYQ promo card (heading + BYQ
   wordmark SVG) that sat below the menu links. */
.cta_mobile-menu{display:none!important}

/* Nav dropdown feature card: its styling lives in @media(min-width:992px) only,
   so under 992px it rendered as a raw unstyled screenshot with the text stranded
   above it. It's a desktop mega-menu flourish — hide it on smaller screens. */
@media(max-width:991px){
  .nav_feature{display:none!important}
}