/* super.css — glue between the four donor systems. Loaded last. Cohesion rules live at the bottom. */

/* ---- chrome: B's nav replaces A's header + announcement */
:root{--announcement-banner-height:0px;--announcement-banner-shift:0px;--announcement-h:0px;--header-h:64px}
.sx-b{width:auto}
#siteNav{position:fixed;top:0;left:0;right:0;z-index:1000}

/* ---- hero run: Solutions + Why Choose scroll over the pinned dashboard (desktop) */

/* ---- hero copy (Evan's) */
#heroSub .hero-sub-sentence{white-space:normal;max-width:760px}
#heroSub .hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}
#heroSub .hero-badges li{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);border-radius:999px;padding:7px 12px}
#heroSub .hero-badges li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}
#heroSub .hero-ctas{display:flex;align-items:center;gap:22px;margin-top:28px}
#heroSub .hero-ctas .surface-form-button{margin-top:0}
#heroSub .hero-secondary{font-size:.875rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color .3s}
#heroSub .hero-secondary:hover{border-color:var(--accent)}

/* ---- spotlight: two CTAs */
#spotlight .sp-ctas{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}

/* ---- process list under "Our proven process" */
.sx-c .process-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;max-width:520px}
.sx-c .process-steps li{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:baseline;font-size:1.0625rem;line-height:1.45}
.sx-c .process-steps b{font-weight:600}

/* anchors land under the fixed nav */
#why,#process,#contact,#testimonials,#cta,#solutions{scroll-margin-top:84px}
.anchor{display:block;position:relative;height:0}

/* B's document-level rules (body background, min-height, 100vw) land on the wrapper after scoping */
.sx-b,.sx-c,.sx-e{background:transparent;min-height:0}
#siteNav.sx-b{height:auto}
/* E's page-level black (html,body{background:#000!important}) must not paint over the pinned dashboard */
.sx-e,.sx-e .tnx,.sx-e .page-shell{background:transparent!important}
/* E's card titles were one word; Evan's are two, so they step down a size to clear the sculpture */
.sx-e .approach-c h3{font-size:clamp(1.75rem,2.7vw,2.6rem);line-height:1.02;max-width:11ch}

/* ---- testimonials (ask 5): C's section, mechanics and card style, on A's dark ground instead of the grid */
.sx-c-hear .styles__Section-sc-6c34453a-0{background:var(--bg)!important;background-image:none!important;color:#f4f4f5}
.sx-c-hear .styles__Card-sc-6c34453a-7{border-color:rgba(255,255,255,.14)!important}
.sx-c-hear .styles__AuthorSocial-sc-6c34453a-18,.sx-c-hear .gnar-company{color:rgba(255,255,255,.62)}
.sx-c-hear .styles__Title-sc-6c34453a-2,.sx-c-hear .styles__AuthorName-sc-6c34453a-17{color:#fff}
.sx-c-hear .styles__Quote-sc-6c34453a-13,.sx-c-hear .styles__Quote-sc-6c34453a-13 p{color:rgba(255,255,255,.82)}

/* ---- process list on C's dark band */
.sx-c .process-steps li{color:rgba(255,255,255,.74)}
.sx-c .process-steps b{color:#fff}

/* ---- menu (ask 8): B simplified, no heavy gray rules between every item */
.sx-b .g-nav-drop-list .g-n-d-sub-service-item{border-bottom:0}
.sx-b .g-nav-drop-list .g-n-d-sub-service-link{padding-top:.42em;padding-bottom:.42em}

/* ---- compact hero (<810): the hero grows to hold its run instead of a fixed 100lvh + 640 */
html[data-hero-layout=compact] #hero{height:auto!important}

/* ---- nav under B's main breakpoint: "Our Work" moves into the menu sheet, the bar keeps Talk to Us + burger */
@media (max-width:991px){#siteNav .g-nav-right > .grouped-cta-w > .super-secondary{display:none}}

/* ======================================================================================
   COHESION PASS (ask 15; council r1 items 1, 9, 10, 14, 16) — one type system (A's), one eyebrow,
   one primary button, one ground, one content edge. Layouts and motion of every picked section stay.
   ====================================================================================== */
:root{--sec-pad:128px;--edge:44px;--h2:clamp(2.25rem,1.2rem + 2.4vw,3.25rem)}
@media (max-width:809px){:root{--sec-pad:80px;--edge:20px}}

/* ---- one section-heading face and size: A's pixel headline, white */
.sx-e .approach-title,
.sx-c-hear .styles__Title-sc-6c34453a-2,
.sx-c-process .styles__Title-sc-c1ad07ad-5,
#industriesBento .ib-title,
#howItWorks.why-choose .rail-copy h3{
  font-family:"Geist",ui-sans-serif,system-ui,sans-serif!important;font-weight:600!important;font-style:normal!important;
  font-size:var(--h2)!important;line-height:1.06!important;letter-spacing:-.035em!important;
  color:#fff!important;text-transform:none!important;text-wrap:balance}
.sx-c-process .styles__Title-sc-c1ad07ad-5 p{font:inherit!important;letter-spacing:inherit!important;color:inherit!important;font-style:normal!important}
.sx-e .approach-title .u-font-bold{font-weight:400}
.sx-c .gnar-accent,.sx-e .u-text-accent{color:var(--accent)!important}
#spotlight .sp-h2,#languages .lg-title,#cta .cta-h2{font-family:"Geist",ui-sans-serif,system-ui,sans-serif!important;font-weight:600!important;font-size:var(--h2)!important;line-height:1.06!important;letter-spacing:-.035em!important;color:#fff!important;text-wrap:balance}
#languages .lg-title .lg-l2{margin-top:0}

/* ---- card titles + body: Geist */
.sx-e .approach-c h3{font-family:var(--font-sans)!important;font-weight:600!important;font-size:clamp(1.5rem,2.1vw,2rem)!important;line-height:1.1!important;letter-spacing:-.02em;max-width:12ch}
.sx-e .approach-p{font-family:var(--font-sans)!important;font-weight:400!important;font-size:1.0625rem!important;line-height:1.5!important;color:rgba(255,255,255,.74)!important}
.sx-e .approach-learn{font-family:var(--font-sans)!important;font-size:.9375rem!important}
.sx-c-hear .styles__AuthorName-sc-6c34453a-17{font-family:var(--font-sans)!important;font-weight:600}
.sx-c-hear .styles__Quote-sc-6c34453a-13,.sx-c-hear .styles__Quote-sc-6c34453a-13 p{font-family:var(--font-sans)!important;font-size:1.0625rem!important;line-height:1.55!important}
.sx-c-hear .styles__AuthorSocial-sc-6c34453a-18,.sx-c-hear .gnar-company,.sx-c-hear [class*="AuthorContent"] span{font-family:var(--font-sans)!important}
.sx-c-hear .gnar-company{font-family:var(--font-mono)!important;font-size:11px!important;letter-spacing:.02em;text-transform:uppercase}
.sx-c .process-steps li{font-family:var(--font-sans)}
.sx-c-process [class*="LabelText"]{font-family:var(--font-mono)!important}

/* ---- one eyebrow: A's orange mono caps with the square */
.sx-e .u-eyebrow,
.sx-c-process .styles__Eyebrow-sc-c1ad07ad-4,.sx-c-process .styles__Eyebrow-sc-c1ad07ad-4 p,
#cta .cta-eyebrow.is-dim{
  font-family:var(--font-mono)!important;font-size:11px!important;line-height:16.5px!important;font-weight:400!important;
  letter-spacing:.1px!important;text-transform:uppercase!important;color:var(--accent)!important}
.sx-e .u-eyebrow{display:flex!important;align-items:center;gap:8px}
.sx-e .u-eyebrow::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);flex:none}
#cta .cta-eyebrow.is-dim::before{background:var(--accent)!important;border-color:transparent!important}

/* ---- one primary button: Gnar orange with ink text (5.25:1, the nav's own pairing) */
#heroSub .surface-form-button,#cta .cta-submit{background:var(--accent)!important;color:var(--accent-ink,#181b22)!important}
#heroSub .surface-form-button:hover{background:#fff!important;color:#000!important}
.sx-b-contact .hsr button[type=submit],.sx-b-contact .hsr input[type=submit]{background:var(--accent)!important;color:var(--accent-ink,#181b22)!important;border:0!important;border-radius:999px!important;padding:12px 26px!important;font-family:var(--font-sans)!important;font-weight:500!important}
#heroSub .hero-badges li{text-transform:none;font-size:.8125rem;letter-spacing:0}

/* ---- one ground: A's near-black; process band joins it; contact gets the hero's orange glow */
.sx-c-process section,.sx-c-process [class*="styles__Section-sc-c1ad07ad-0"]{background:var(--bg)!important}

/* ---- contact form: dark card in the page's surface colours */

/* ---- one content edge + section rhythm for the lifted sections */
.sx-e .container{max-width:none!important;width:100%!important;padding-left:var(--edge)!important;padding-right:var(--edge)!important}
.sx-c [class*="styles__Wrapper-sc"]{max-width:none!important;padding-left:var(--edge)!important;padding-right:var(--edge)!important}
.sx-c-hear section[class*="styles__Section-sc-6c34453a-0"],.sx-c-process section[class*="styles__Section-sc-c1ad07ad-0"]{padding-top:var(--sec-pad)!important;padding-bottom:var(--sec-pad)!important}
#industriesBento{padding-top:var(--sec-pad);padding-bottom:calc(var(--sec-pad) * .6)}

/* ---- Solutions over the dashboard: no black strips, text never sits on legible console text */
.sx-e .top-fade,.sx-e .bottom-fade{display:none!important}

/* ---- Why Choose: heading at section size, rows right under the intro */
html[data-home-layout=desktop] #howItWorks.why-choose .rail{justify-content:flex-start;gap:56px}
#howItWorks.why-choose .rail-copy .intro{margin-top:18px}

/* ---- menus: B's structure and gradient cards, set in the page's Geist */
.sx-b .g-nav-w,.sx-b .g-nav-w .label-button,.sx-b .g-nav-drop-list,.sx-b .g-nav-drop-list .type-body-lg,.sx-b .g-nav-drop-list .text-b{font-family:var(--font-sans)!important}
.sx-b .g-nav-drop-list .u-font-accent,.sx-b .g-nav-drop-list .u-font-accent *{font-family:var(--font-sans)!important;font-style:normal!important;letter-spacing:-.02em}
.sx-b .g-nav-drop-list .mega-menu-header .d4{font-weight:500;color:var(--accent)}
.sx-b .g-nav-drop-list .d5{font-weight:500}
.sx-b .g-nav-drop-list em{font-style:normal}
.sx-b .g-nav-drop-list .u-accent-blue{color:#fff!important;opacity:.78}

/* ---- stats map: a taller flat band so about one US reads at a time */
#languages .languages-globe.us-map{height:clamp(240px,36vw,520px)}

/* ---- phone: the Risk register board scrolls by column instead of cutting words */
@media (max-width:600px){
  #howItWorks .oi-kanban{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #howItWorks .oi-kanban::-webkit-scrollbar{display:none}
  #howItWorks .oi-kcol{min-width:74%;scroll-snap-align:start}
}

/* E defines --font-pixel (Mondwest) and --font-mono (JetBrains/PP Neue Bit) on its root; inside the
   Solutions section they must mean A's faces, or the one-type-system rule silently loses there */
.sx-e{--font-pixel:"Geist Pixel Line",ui-monospace,monospace;--font-mono:"Geist Mono",ui-monospace,monospace}
.sx-e .tnx{--font-pixel:"Geist Pixel Line",ui-monospace,monospace;--font-mono:"Geist Mono",ui-monospace,monospace}
.sx-e .u-eyebrow{font-family:"Geist Mono",ui-monospace,monospace!important}
#howItWorks.why-choose .rail-copy h3{text-wrap:balance}

/* contact: the form's white outer column becomes the dark card; the inner slot goes transparent */
.sx-b-contact .hsr button[type=submit],.sx-b-contact .hsr .hsr-submit{width:auto!important;min-width:0!important;align-self:flex-start}

/* footer: the header lockup, light on dark */
#siteFooter .ft-lockup{display:block;color:#fff}
#siteFooter .ft-lockup .g-nav-brand-logo{width:170px;height:auto;color:#fff}
#siteFooter .ft-lockup .mk-dark{opacity:0!important}#siteFooter .ft-lockup .mk-light{opacity:1!important}
.sx-e .approach-title{text-wrap:balance}
#languages .lg-word.is-out{opacity:.22!important}  /* the swap dims instead of blanking the line (council r1: 3 seats) */
/* chart labels inside the overruns visual lifted to AA (they sit in the Why Choose section) */
#ncObs3 .oi-kw-eyebrow{color:rgba(255,255,255,.6)!important}
#ncObs3 .oi-kw-axis span{color:rgba(255,255,255,.55)!important}

/* ======================= council round 2 ======================= */
/* one left edge: C's wrappers carried their own side margin; B's section its own padding */
.sx-c [class*="styles__Wrapper-sc"]{margin-left:0!important;margin-right:0!important;width:100%!important;box-sizing:border-box}
.sx-c-hear .super-eyebrow{margin-bottom:16px}
/* one intro-paragraph style under every section heading */
#industriesBento .ib-sub,#howItWorks.why-choose .rail-copy .intro,#cta .cta-lede,#languages .lg-body{
  font-family:var(--font-sans)!important;font-size:1.0625rem!important;line-height:1.55!important;color:rgba(255,255,255,.72)!important;font-weight:400!important}
/* Solutions: the page's card style (dim border, rounded) and a heading that wraps in three lines */
.sx-e .approach-c{border:1px solid rgba(255,255,255,.12)!important;border-radius:14px!important;overflow:hidden;background:#101010!important}
.sx-e .approach-title{max-width:17ch!important;width:auto!important}
/* contact: country picker wide enough for "United States" */
.sx-b-contact .hsr-phone select{min-width:176px!important;padding-right:34px!important}
/* stats map: a whole US always on screen, grey dots quieter so the orange cities lead */
#languages .languages-globe.us-map{height:clamp(200px,24vw,360px)}
.sx-b-contact .hsr button{width:auto!important;min-width:0!important;display:inline-flex!important;justify-content:center;align-items:center;align-self:flex-start;padding:12px 30px!important}
.sx-b-contact .hsr .hsr-submit{background:none!important;padding:0!important;border:0!important;box-shadow:none!important}

/* ======================= round 2: Context Driven Development (Evan note 6) ======================= */
.sx-c-process .cdd-sub{font:400 1.0625rem/1.55 "Geist",ui-sans-serif,system-ui,sans-serif;color:rgba(255,255,255,.72);max-width:40rem;margin-top:20px;text-wrap:pretty}
.sx-c-process .cdd-guarantee{margin:48px 0 0;font:400 1rem/1.5 "Geist",sans-serif;color:rgba(255,255,255,.7)}
.sx-c-process .cdd-guarantee b{color:#fff;font-weight:600}

.sx-e .approach-title *{font-family:inherit!important;font-weight:inherit!important;letter-spacing:inherit}

/* ---- contact (Evan note 7): direction B's look back (photo card, white form, pale pill fields, serif
   "Contact Us"); only the real fixes stay: orange Submit, wider country picker, pin icon, no "9-5 ET",
   no duplicate logo scroller */
.sx-b-contact .hsr input[type=file]::file-selector-button{font:500 .8125rem "Inter Variable",sans-serif;color:#181b22;background:#fff;border:1px solid rgba(24,27,34,.22);border-radius:999px;padding:8px 16px;margin-right:12px;cursor:pointer;transition:border-color .2s,color .2s}
.sx-b-contact .hsr input[type=file]::file-selector-button:hover{border-color:#fa5539;color:#fa5539}
.sx-b-contact .hsr button:hover{background:#181b22!important;color:#fff!important}
/* process: the plate stack gets the right half of the band */
.sx-c-process [class*="styles__Content-sc-c1ad07ad-2"]{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px}

/* ======================= round 2: elite pass ======================= */
/* hero → Solutions seam: A's light leak was built to sit on a pinned fold; the hero now ends, so the
   leak fades into the page ground before the edge instead of being cut by it */
#hero #heroGlowMesh,#hero .hero-leak-shader{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 58%,rgba(0,0,0,.4) 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 58%,rgba(0,0,0,.4) 84%,transparent 100%)}
/* one section rhythm: the space from the last thing in a section to the first thing in the next is
   one number everywhere (was 80 / 250 / 157 / 96 / 128 / 256 / 213 / 128 measured at 1588×705) */
:root{--gap:160px}
@media (max-width:809px){:root{--gap:96px}}
#howItWorks{margin-top:calc(var(--gap) - 80px)}
#spotlight{margin-top:calc(var(--gap) - 131px)!important}
/* the mid CTA's digit field is a backdrop, not a surface, so the gap is measured to its words: A's
   96 + 80 + 80 + 96 of stacked padding (336px of air each side at 1588) becomes the page gap */
#cta{margin-top:var(--gap)!important}
#cta .cta-inner{padding-top:0!important;min-height:0!important}
#cta .cta-body{padding-bottom:0!important;min-height:0!important}
#cta .cta-copy{padding-top:0!important;padding-bottom:0!important;min-height:0!important}
.sx-c-hear section[class*="styles__Section-sc-6c34453a-0"]{padding-top:var(--gap)!important}
.sx-c-hear section[class*="styles__Section-sc-6c34453a-0"]{padding-bottom:0!important}
#industriesBento{padding-top:var(--gap)!important;padding-bottom:0!important}
.sx-c-process section[class*="styles__Section-sc-c1ad07ad-0"]{padding-top:var(--gap)!important;padding-bottom:var(--gap)!important}
/* phone hero: A centred the subhead in the space its console used to fill; the console is gone, so the
   subhead follows the headline and the line gets the open space below */
html[data-hero-layout=compact] #heroSub{margin-top:28px!important;margin-bottom:auto!important}
/* phone: the process plate labels read at 12px+, and the contact column sits on the page's 20px edge */
@media (max-width:809px){.sx-b-contact .s-wrap,.sx-b-contact .contact-cta-left{padding-left:calc(var(--edge) - 15px)!important;padding-right:calc(var(--edge) - 15px)!important}}
/* phone hero hierarchy: the thin pixel headline (40px) lost to a 24px/500 subhead; the subhead steps
   down to a lead paragraph so the headline reads first */
html[data-hero-layout=compact] #heroSub h2{font-size:1.1875rem!important;line-height:1.42!important;font-weight:400!important;color:rgba(255,255,255,.88)!important}
html[data-hero-layout=compact] #heroSub .hero-ctas .surface-form-button{margin-top:0}  /* A's compact rule stacked 24px on the row's 28 */
/* phone Solutions cards: the drawing took a third of the card and squeezed the copy to 204px; on a
   phone it becomes a small mark above the title and the copy gets the full card width */
@media (max-width:600px){
  .sx-e .approach-c{flex-direction:column!important;align-items:flex-start!important}
  .sx-e .approach-c-content{flex:1 1 auto!important;width:100%!important;max-width:none!important}
  .sx-e .approach-img-wrapper{order:-1;position:relative!important;inset:auto!important;transform:none!important;width:56px!important;height:64px!important;margin:0 0 18px!important;flex:none!important}
  .sx-e .approach-img-wrapper img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important}
  .sx-e .approach-c h3{max-width:none!important}
}
/* AA on the two small-text spots the contrast gate still flagged: the 12px "User Growth" label sits
   on the spotlight's orange wash (white = 3.27:1), so it takes the page's own ink-on-orange pairing
   (the nav button's, 5.25:1); the form's required stars go one step deeper orange on white (5.4:1) */
#spotlight .sp-stat-lbl{color:#181b22!important}
.sx-b-contact .hsr-f i,.sx-b-contact .hsr label i{color:#c2371d!important}
/* body copy floor: paragraphs a reader is meant to read are 15–17px at the page's 70% white, not 14px
   at 55% (readability census: 70% of text nodes were under 16px; these four are real reading text) */
#howItWorks .step .body{font-size:1rem!important;line-height:1.55!important;color:rgba(255,255,255,.7)!important}
#industriesBento .ib-copy{font-size:.9375rem!important;line-height:1.5!important;color:rgba(255,255,255,.7)!important}
.sx-b-contact .contact-cta-left [class*=section-header] p{font-size:1.0625rem!important;line-height:1.55!important}
#siteNav .g-nav-menu-list .label-button{font-size:.875rem!important}
/* one authored focus ring, Gnar orange, on every focusable control (keyboard gate: B's four menu
   toggles had none; A's step buttons used a 50% white ring) */
#siteNav .g-nav-drop-toggle:focus-visible,#howItWorks .step-btn:focus-visible{outline:2px solid #fa5539!important;outline-offset:3px;border-radius:6px}
/* mock-dashboard labels a reader is invited to read (Why Choose): the secondary KPI row sat at 60%
   opacity (3.16:1) and the milestone panel caption at #7a7a7a on 10px (4.29:1) */
#ncObs3 .oi-kw-sec{opacity:1!important}
#ncObs3 .oi-kw-sec-k{color:rgba(255,255,255,.62)!important}
#ncObs2 .oi-views-h{color:#9a9a9a!important}
/* phone sheet "Our Work" row: the menu rows' own toggle class, not a dropdown; desktop never shows it */
@media (min-width:992px){#siteNav .super-mnav-item{display:none!important}}
#siteNav .super-mnav-link{display:flex;align-items:center;text-decoration:none;color:inherit}
#siteNav .super-mnav-item{border-bottom:1px solid rgba(0,0,0,.12)}  /* the rule .g-nav-drop draws under each menu row */
/* short laptop windows (Evan's is 1588×705): the hero copy sat low enough that the line ran through the
   bottom of "Talk to Us"; the headline rises 28px and hero.js (layoutHeroText) hangs the subhead under it */
@media (min-width:1024px) and (max-height:760px){
  html:not([data-hero-layout=compact]) #heroCopy{top:calc(var(--chrome-offset) + 28px)!important}
}

/* ======================= round 2: visual audit (impeccable + refactoring-ui) ======================= */
/* one left/right edge: B's nav and contact sat at 47.3px (45.37 padding + a 1.9px wrapper margin) */
.sx-b .s-wrapper{margin-left:0!important;margin-right:0!important}
#siteNav nav{padding-left:var(--edge)!important;padding-right:var(--edge)!important}
@media (min-width:810px){.sx-b-contact section.s-contact-cta{padding-left:var(--edge)!important;padding-right:var(--edge)!important}}

/* one card surface: E's cards #101010, the spotlight 2% white, A's industry cells a cool #1b1c20 */
:root{--surface-1:#151313;--line:rgba(255,255,255,.1);--radius:14px}
.sx-e .approach-c{background:var(--surface-1)!important;border-color:var(--line)!important;border-radius:var(--radius)!important}
#spotlight .sp-card{background:var(--surface-1)!important;border-color:var(--line)!important;border-radius:var(--radius)!important}
#industriesBento .ib-cell{background:var(--surface-1)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important}
.sx-c-hear [class*="styles__Card-sc-6c34453a-7"]{border-color:rgba(255,255,255,.12)!important}
#siteFooter{background:var(--bg)!important}   /* the #000 footer met the #0f0d0d page in a visible seam */

/* one primary button on the page's ground: Geist 15/500, 44px, orange + ink; hover inverts to white.
   On a light ground (contact card, the nav's white hover state) the hover goes ink instead. */
#heroSub .surface-form-button,.sx-b-contact .hsr button[type=submit]{height:44px!important;padding:0 22px!important;font:500 .9375rem/1 "Geist",ui-sans-serif,system-ui,sans-serif!important;border-radius:999px!important}
#siteNav .grouped-cta-w a.button-link:not(.super-secondary):hover .button-w{background:#181b22!important;color:#fff!important}
/* secondary actions: one outline style (white text, 20% line), orange on hover, like the nav's "Our Work" */
#spotlight .sp-cta{color:#fff!important;border-color:rgba(255,255,255,.22)!important;background:transparent!important;transition:color .2s,border-color .2s}
#spotlight .sp-cta:hover,#spotlight .sp-cta:focus-visible{color:#fa5539!important;border-color:#fa5539!important}
#spotlight .sp-cta svg{transition:transform .2s}
#spotlight .sp-cta:hover svg{transform:translateX(4px)}

/* contact: B's photo card, white form and serif "Contact Us" stay (Evan note 7); its eyebrows, body and
   form text move onto the page's type system (19 nodes were Inter; eyebrows were Inter 14px white) */
.sx-b-contact .label-overline{font:400 11px/16.5px "Geist Mono",ui-monospace,monospace!important;letter-spacing:.1px!important;text-transform:uppercase!important;color:#fff!important}  /* white, as in B: orange on the warm photo read 2.63:1 (qa/photo-contrast.mjs) */
.sx-b-contact .contact-cta-left p,.sx-b-contact .contact-cta-option-link,.sx-b-contact .hsr,.sx-b-contact .hsr input,.sx-b-contact .hsr select,.sx-b-contact .hsr textarea,.sx-b-contact .hsr label,.sx-b-contact .hsr span,.sx-b-contact .hsr small{font-family:"Geist",ui-sans-serif,system-ui,sans-serif!important}
.sx-b-contact .hsr select,.sx-b-contact .hsr input::placeholder,.sx-b-contact .hsr textarea::placeholder{color:#5b6b7b!important}   /* #7c98b6 on #f5f8fa was 2.8:1 */
.sx-b-contact .hsr small{font-weight:400!important;font-size:13px!important;color:#5b6b7b!important}
.sx-b-contact .hsr-f > span{color:#181b22!important}

/* card titles in two sizes: small cards 20/600, large 32/600 */
#industriesBento .ib-label{font-size:1.25rem!important;font-weight:600!important;line-height:1.2!important}
.sx-c-hear .styles__AuthorName-sc-6c34453a-17{font-size:1.25rem!important;line-height:1.2!important}

/* the spotlight's big number joins the page's numerals (100+) in the pixel face */
#spotlight .sp-stat-val{font-family:"Geist Pixel Line",ui-monospace,monospace!important;font-size:64px!important;line-height:.95!important;font-weight:400!important}
#spotlight .sp-quote blockquote{font-size:1rem!important;line-height:1.6!important}

/* hero on a short window: the 6px MILESTONE / ACCEPTED captions ran into the logo strip; the crosshair
   marks and the line's own animation stay */
@media (min-width:1024px) and (max-height:760px){#heroChartExperiments .hero-exp-label,#heroChartExperiments [class*=hero-exp-adopted]{display:none}}

/* process: the heading block was centred against the 526px plate figure, leaving 341px of empty page
   above "Our proven process"; it now starts at the top beside the plates */
.sx-c-process [class*="styles__Content-sc-c1ad07ad-2"]{align-items:start!important}

/* footer: the guarantee names only lived in 6px disc labels and hover tooltips (dead on touch) */
#siteFooter .ft-badge-cap{margin:12px 0 0;font:400 12px/1.5 "Geist Mono",ui-monospace,monospace;color:rgba(255,255,255,.62);letter-spacing:.02em}

/* phone */
@media (max-width:991px){
  #siteNav .g-nav-menu-button,#siteNav .g-nav-close-button{min-width:44px!important;min-height:44px!important}
  #siteNav .grouped-cta-w a.button-link .button-w{min-height:40px}
}
@media (max-width:809px){
  #siteFooter .ft-social-link{padding:13px;margin:-13px}
  #howItWorks .step-btn{min-height:44px}
  .sx-b-contact .contact-cta-option-link{min-height:24px;display:inline-flex;align-items:center}
}
@media (max-width:600px){#howItWorks .oi-kanban,#howItWorks .oi-kcol{height:auto!important;min-height:0!important}}
@media (max-width:640px){#siteFooter .ft-col-wide{grid-column:1/-1}#siteFooter .ft-col-wide .ft-col-split{display:grid!important;grid-template-columns:1fr 1fr;column-gap:16px}}  /* 12 industries ran 1142px down one column */
#siteNav .s-wrapper{max-width:none!important}   /* B's 1493px cap left the nav's right edge 50.5px in at 1588 */
@media (max-width:809px){#siteFooter .ft-inner{padding-left:calc(var(--edge) - 8px)!important;padding-right:calc(var(--edge) - 8px)!important}}  /* footer sat at 16px on a phone */
/* phone: the CTA email was 14px, so iOS Safari zooms the page on focus; the mock dashboard's chip and
   Replay control were 36px and 28px tall */
@media (max-width:809px){
  #cta .cta-input{font-size:16px!important}
  #howItWorks .oi-chip,#howItWorks [class*=replay],#howItWorks button[class*=Replay]{min-height:40px!important}
}
@media (max-width:809px){#howItWorks button.reset{min-height:40px!important;display:inline-flex;align-items:center}#siteNav .g-nav-brand-link{min-height:40px;display:inline-flex!important;align-items:center}}
/* Solutions card copy: E capped the text at 314px (30–34 characters a line at 17px) with 64px of dead
   card between it and the drawing; the copy takes that space (about 40–45 a line) */
@media (min-width:601px){.sx-e .approach-c-content{max-width:none!important;flex:1 1 auto!important;padding-right:24px}}
/* tablet: E's 200px drawing left the card copy ~160px wide at 1024 */
@media (min-width:601px) and (max-width:1100px){.sx-e .approach-img-wrapper{width:120px!important;flex:0 0 120px!important}.sx-e .approach-img-wrapper img{width:100%!important;height:auto!important}.sx-e .approach-c-content{padding-right:0}}

/* ======================= round 2: accessibility pass (a11y-audit, color-expert, axe) ======================= */
/* form fields had no focus indicator at all (0 changed pixels on Tab) */
#cta .cta-input:focus-visible,.sx-b-contact .hsr input:focus-visible,.sx-b-contact .hsr select:focus-visible,.sx-b-contact .hsr textarea:focus-visible{outline:2px solid #fa5539!important;outline-offset:2px}
#cta .cta-pill:focus-within{box-shadow:0 0 0 2px #fa5539}
/* "User Growth": ink on the pink-orange wash measured 2.7–3.8:1 on the painted pixels; white on a soft
   dark scrim in that corner reads 7:1+ and keeps the photo */
#spotlight .sp-stat-lbl{color:#fff!important}
#spotlight .sp-visual{position:relative}
#spotlight .sp-visual::after{content:"";position:absolute;right:0;bottom:0;width:62%;height:62%;background:radial-gradient(ellipse at 100% 100%,rgba(15,13,13,.62),rgba(15,13,13,0) 72%);pointer-events:none;z-index:1}
#spotlight .sp-stat{z-index:2}
/* hero: the "accepted" chip is 6px type on a 22% teal fill (3.9:1) and collides with the logo strip */
#heroChartExperiments [class*=hero-exp-adopted]{display:none}
/* mock-dashboard milestone labels: 9.5px #7f7f7f read 4.1–4.3:1 */
#ncObs2 .oi-bub-ch{color:#c4c7cc!important}
/* reading text at 80% white (APCA Lc ~77) instead of 70–74% (Lc 63–69): intros, card copy, steps */
#industriesBento .ib-sub,#howItWorks.why-choose .rail-copy .intro,#cta .cta-lede,#languages .lg-body,.sx-c-process .cdd-sub,
/* WCAG 2.2.2: the logo marquee pauses while a pointer or keyboard is on it */
#logoBar:hover .track,#logoBar:focus-within .track{animation-play-state:paused!important}
/* B's contact section ground was navy #0a172c at its edges; the page ground instead */
.sx-b-contact section.s-contact-cta{background-color:var(--bg)!important}

/* ======================= round 2: interaction pass (web-design-guidelines + emil-design-eng) =======================
   One hover language, the one Evan named: the thing under the pointer shifts to orange, arrows nudge 4px,
   200ms, ease-out, pointer devices only. A's sibling-dim (footer, industries) stays; the hovered item now
   also goes orange. */
:root{color-scheme:dark}
.sx-b-contact .hsr{color-scheme:light}
a,button,[role=button],summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html.is-mnav-open{overflow:hidden}   /* the page no longer scrolls under the phone menu */

/* skip link: it focused at 1×1px, clipped; it now shows */
a.sr-only[href="#main"]:focus-visible{position:fixed!important;left:16px;top:12px;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;margin:0!important;padding:10px 16px!important;z-index:100001;background:#181b22;color:#fff;border-radius:999px;font:500 .9375rem "Geist",sans-serif;outline:2px solid #fa5539;outline-offset:2px}  /* the page ring (orange) on an ink pill */

/* nav: B's bar went white on any hover (735ms); it now goes white only while a panel is open, which is
   the state B designed it for; the toggles themselves take the orange */
#siteNav:not(.is-menu-open) .section.s-g-nav:hover{background-color:#000!important;color:#fff!important}
#siteNav:not(.is-menu-open) .section.s-g-nav:hover .g-nav-brand-logo .mk-dark{opacity:0!important}
#siteNav:not(.is-menu-open) .section.s-g-nav:hover .g-nav-brand-logo .mk-light{opacity:1!important}
#siteNav .g-nav-drop-toggle,#siteNav .g-n-d-sub-service-link,#siteNav .g-n-d-sub-service-link .icon{transition:color .2s ease-out,transform .2s ease-out!important}
/* mega panels: a 705px-tall window clipped the bottom contact row; the panel scrolls inside itself */
.sx-b .g-nav-drop.w--open .g-nav-drop-content-w{max-height:calc(100vh - 76px);overflow-y:auto!important;overscroll-behavior:contain}

/* one primary hover: a lighter orange with ink text, 200ms, a 3% press. Works on the dark page, the white
   nav state and the white contact card alike (was: navy 735ms · white 300ms · navy 0ms · nothing) */
#siteNav .grouped-cta-w a.button-link:not(.super-secondary) .button-w,#heroSub .surface-form-button,.sx-b-contact .hsr button[type=submit],#cta .cta-submit{transition:background-color .2s ease-out,color .2s ease-out,transform .16s ease-out!important;cursor:pointer}
#siteNav .grouped-cta-w a.button-link:not(.super-secondary):active .button-w,#heroSub .surface-form-button:active,.sx-b-contact .hsr button[type=submit]:active,#cta .cta-submit:active{transform:scale(.97)}
#cta .cta-submit svg{transition:transform .2s ease-out}

@media (hover:hover) and (pointer:fine){
  #siteNav .grouped-cta-w a.button-link:not(.super-secondary):hover .button-w,#heroSub .surface-form-button:hover,.sx-b-contact .hsr button:hover,#cta .cta-submit:hover{background:#ff6e55!important;color:#181b22!important}
  #cta .cta-submit:hover svg{transform:translateX(4px)}
  #siteNav:not(.is-menu-open) .g-nav-drop-toggle:hover{color:#fa5539}
  #siteNav .g-n-d-sub-service-link:hover{color:#fa5539!important}
  #siteNav .g-n-d-sub-service-link:hover .icon{transform:translate(4px,-4px)}
  /* Solutions cards: orange title and "Learn more", orange edge, arrow nudges up-right */
  .sx-e .tnx .approach-c:hover{border-color:rgba(250,85,57,.55)!important}
  .sx-e .tnx .approach-c:hover :is(h3,.approach-learn){color:#fa5539!important}
  .sx-e .tnx .approach-c .approach-learn img{transition:transform .2s ease-out,filter .2s ease-out}
  .sx-e .tnx .approach-c:hover .approach-learn img{transform:translate(4px,-4px);filter:invert(46%) sepia(83%) saturate(2270%) hue-rotate(340deg) brightness(101%) contrast(97%)}
  /* Why Choose guarantee rows */
  #howItWorks .step-btn{transition:color .2s ease-out}
  #howItWorks .step:not(.active) .step-btn:hover,#howItWorks .step:not(.active) .step-btn:hover *{color:#fa5539!important}
  /* testimonials */
  .sx-c-hear [class*="styles__Card-sc-6c34453a-7"]{transition:border-color .2s ease-out}
  .sx-c-hear [class*="styles__Card-sc-6c34453a-7"]:hover{border-color:rgba(250,85,57,.5)!important}
  .sx-c-hear [class*="styles__Card-sc-6c34453a-7"]:hover .styles__AuthorName-sc-6c34453a-17{color:#fa5539!important}
  /* industries: A's neighbour-dim stays; the lifted card's title goes orange; its caret moves 4px, not 14 */
  #industriesBento .ib-label{transition:color .2s ease-out}
  #industriesBento .ib-cell:hover .ib-label{color:#fa5539!important}
  #industriesBento .ib-arrow svg,#industriesBento .ib-nav svg{transition:transform .2s ease-out}
  #industriesBento .ib-arrow[class*=next]:hover svg,#industriesBento [aria-label*=Next]:hover svg{transform:translateX(4px)}
  #industriesBento .ib-arrow[class*=prev]:hover svg,#industriesBento [aria-label*=Prev]:hover svg{transform:translateX(-4px)}
  /* footer and contact links: A's sibling dim stays; the one under the pointer goes orange */
  #siteFooter .ft-menu :is(a,button){transition:color .2s ease-out,opacity .2s ease-out}
  #siteFooter .ft-menu :is(a,button):hover{color:#fa5539!important}
  .sx-b-contact .contact-cta-option-link{transition:color .2s ease-out}
  .sx-b-contact .contact-cta-option-link:hover{color:#fa5539!important}
}
/* process: step 1 stayed orange while another step was lit; the plate lift is 200ms, ease-out */
/* cursors that promised something they did not do */
#howItWorks .oi-kcard{cursor:default!important}
.sx-b-contact .hsr select,.sx-b-contact .hsr input[type=file]{cursor:pointer}
/* contact validation */
.sx-b-contact .hsr [aria-invalid=true]{border-color:#c2371d!important;box-shadow:0 0 0 1px #c2371d!important}
.sx-b-contact .hsr .hsr-err{display:block;margin-top:6px;font:500 13px/1.4 "Geist",sans-serif;color:#c2371d}
.sx-b-contact .hsr .hsr-status{margin:14px 0 0;font:400 15px/1.5 "Geist",sans-serif;color:#181b22}
.sx-b-contact .hsr .hsr-status:empty{display:none}
/* Why Choose: the visible demo-data line under the dashboards (the sr-only copies still serve screen readers) */
#howItWorks .mock-note{margin:12px 0 0;padding:0 34px;font:400 11px/1.4 "Geist Mono",ui-monospace,monospace;letter-spacing:.02em;color:rgba(255,255,255,.62);text-align:left}  /* sits above the panel, on its left edge (the stage insets the panel 33px) */
@media (max-width:809px){#howItWorks .mock-note{text-align:left}}

/* ======================= round 2: design-gauntlet lenses ======================= */
/* Outsider: one eyebrow mark. A's is a 6px square with a 2s pulse (base.css); E's was static, C's 8px static */
.sx-e .u-eyebrow::before,.sx-c-process [class*="styles__Eyebrow-sc-c1ad07ad-4"] p::before{width:6px!important;height:6px!important;border-radius:2px!important;background:var(--accent)!important;animation:pulse-dot-colored 2s ease-out infinite;--pulse-color:var(--pulse-accent,rgba(250,85,57,.6))}
@media (prefers-reduced-motion:reduce){.sx-e .u-eyebrow::before,.sx-c-process [class*="styles__Eyebrow-sc-c1ad07ad-4"] p::before{animation:none}}
/* Outsider: the reading layer had three stray fluid sizes from B and C (12.6, 13.71, 30.24 at 1440); they
   join the scale (12 · 14 · 30) */
.sx-c-hear .styles__AuthorSocial-sc-6c34453a-18,.sx-c-hear [class*="AuthorContent"] span:not(.gnar-company){font-size:12px!important}
.sx-b-contact .contact-cta-option-link,.sx-b-contact .contact-cta-option-link *{font-size:.875rem!important}
.sx-e .approach-c h3{font-size:clamp(1.5rem,2.1vw,1.875rem)!important}
/* Visual storyteller: nothing on screen said what the orange dots are */
#languages .us-legend{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:0 var(--edge);font:400 11px/1.4 "Geist Mono",ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.7)}
#languages .us-legend i{width:8px;height:8px;border-radius:50%;background:#fa5539;box-shadow:0 0 0 4px rgba(250,85,57,.2);flex:none}
/* contact: the address and phone links were two touching 24px targets (Lighthouse target-size) */
.sx-b-contact .contact-cta-option-links{display:flex!important;flex-direction:column;gap:6px}
.sx-b-contact .contact-cta-option-link{min-height:28px!important;display:inline-flex!important;align-items:center}

/* ======================= round 3: Context Driven Development in four steps (Evan) =======================
   Left: eyebrow, H2, sub, his four steps, the guarantee line. Right: C's own four plates (C's art, draw-in and
   float), each labelled with its step. Hovering a step lifts its plate and turns its label orange. */
.sx-c-process .cdd-figure{width:100%;max-width:560px;justify-self:end;margin:0}
.sx-c-process .cdd-list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.1);max-width:36rem}
.sx-c-process .cdd-item{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.sx-c-process .cdd-n{font:400 13px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.06em;color:#fa5539}
.sx-c-process .cdd-item p{margin:0;font:400 1.125rem/1.5 "Geist",ui-sans-serif,system-ui,sans-serif;color:rgba(255,255,255,.8)}
.sx-c-process .cdd-item b{font-weight:600;color:#fff;transition:color .2s ease-out}
.sx-c-process .cdd-guarantee{margin-top:28px}
.sx-c-process .c-plate{transition:transform .2s cubic-bezier(.23,1,.32,1)}
.sx-c-process [class*="LabelText"]{transition:color .2s ease-out}
@media (hover:hover) and (pointer:fine){
  .sx-c-process .cdd-item{cursor:default}
  .sx-c-process .cdd-item.is-hot b{color:#fa5539}
  .sx-c-process .c-plate.is-hot{transform:translateY(-14px)}
  .sx-c-process [class*="LabelAnchor"].is-hot [class*="LabelText"]{color:#fa5539!important}
}
@media (prefers-reduced-motion:reduce){.sx-c-process .c-plate.is-hot{transform:none}}
/* tablet and phone: heading, then the plates, then the steps (the left column opens so its pieces can order) */
@media (max-width:900px){
  .sx-c-process [class*="styles__Content-sc-c1ad07ad-2"]{display:flex!important;flex-direction:column;align-items:stretch!important;gap:0}
  .sx-c-process [class*="styles__LeftContent-sc-c1ad07ad-3"]{display:contents}
  .sx-c-process [class*="styles__Eyebrow-sc-c1ad07ad-4"]{order:1}
  .sx-c-process h2{order:2}
  .sx-c-process .cdd-sub{order:3}
  .sx-c-process .cdd-figure{order:4;justify-self:auto;align-self:center;max-width:440px;margin:32px auto 0}
  .sx-c-process .cdd-list{order:5}
  .sx-c-process .cdd-guarantee{order:6}
}
@media (max-width:640px){.sx-c-process .cdd-item p{font-size:1.0625rem}.sx-c-process .cdd-item{grid-template-columns:44px minmax(0,1fr)}}

/* ======================= round 3: Solutions "screens that build" (Evan) =======================
   The space props are gone. Each card shows a small screen of what Gnar builds, in A's dashboard dialect
   (measured off the Why Choose panels). At rest: the wireframe (Evan's pick). On hover / keyboard focus /
   E's .cc-active (and on touch, once the card scrolls into view): the built screen staggers in (20ms steps,
   last group settles by ~300ms), the wireframe fades. E's heading scrub, card reveal and sticky column stay.
   Reviewed with impeccable + emil-design-eng + refactoring-ui (qa: scratchpad/review-r3). */
.sx-e .approach-img-wrapper.vg-wrap{width:300px!important;height:auto!important;flex:0 0 300px!important;align-self:center!important;position:relative!important;inset:auto!important;transform:none!important;margin:0!important;order:0}
/* below 1500px a side-by-side screen squeezed the copy to 167–222px: the screen sits above the copy */
@media (min-width:601px) and (max-width:1499px){
  .sx-e .approach-c{flex-direction:column!important;align-items:flex-start!important}
  .sx-e .approach-c-content{flex:1 1 auto!important;width:100%!important;max-width:none!important;padding-right:0!important;margin-top:0!important}
  .sx-e .approach-img-wrapper.vg-wrap{order:-1;width:min(100%,420px)!important;flex:none!important;margin:0 0 24px!important;align-self:flex-start!important}
}
@media (max-width:600px){.sx-e .approach-img-wrapper.vg-wrap{order:-1;width:100%!important;flex:none!important;margin:0 0 22px!important}}
.sx-e .vg{display:block;width:100%;height:auto;overflow:visible}
/* one stroke system: hairlines are 1 device px at any size; accents 2.6 units; inner cards have no border (A's) */
.sx-e .vg :is(.vw-box,.vw-line,.vg-panel,.vg-frame,.vg-phone,.vg-rule,.vg-pill-ghost){vector-effect:non-scaling-stroke;stroke-width:1px}
/* wireframe */
.sx-e .vg .vw-box,.sx-e .vg .vw-line{fill:none;stroke:rgba(255,255,255,.26)}
.sx-e .vg .vw-box.vw-occlude{fill:var(--surface-1,#151313)}   /* the phone wireframe hides the browser lines behind it */
.sx-e .vg .vw-bar{fill:rgba(255,255,255,.12)}
.sx-e .vg .vg-wire{transition:opacity .15s ease-out .06s}
/* built screen, A's tokens */
.sx-e .vg .vg-panel{fill:#131418;stroke:rgba(255,255,255,.14)}
.sx-e .vg .vg-frame{fill:#1c1c1f;stroke:rgba(255,255,255,.14)}
.sx-e .vg .vg-phone{fill:#1c1c1f;stroke:rgba(255,255,255,.22)}
.sx-e .vg .vg-card{fill:rgba(255,255,255,.045);stroke:none}
.sx-e .vg .vg-cell{fill:rgba(255,255,255,.2)}
.sx-e .vg .vg-val{fill:rgba(255,255,255,.66)}
.sx-e .vg :is(.vg-or,.vg-dot-or,.vg-travel,.vg-pill-or){fill:#fa5539}
.sx-e .vg .vg-hotrow{fill:rgba(250,85,57,.14)}
.sx-e .vg .vg-dot{fill:rgba(255,255,255,.18)}
.sx-e .vg :is(.vg-notch,.vg-url){fill:rgba(255,255,255,.1)}
.sx-e .vg .vg-rule{stroke:rgba(255,255,255,.1)}
.sx-e .vg .vg-chip{fill:#fff}
.sx-e .vg .vg-pill-ghost{fill:none;stroke:rgba(255,255,255,.3)}
.sx-e .vg :is(.vg-arrow-or,.vg-arrow,.vg-check,.vg-fork){fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sx-e .vg :is(.vg-arrow-or,.vg-check,.vg-fork){stroke:#fa5539}
.sx-e .vg .vg-arrow{stroke:rgba(255,255,255,.42)}
.sx-e .vg .vg-edge{fill:none;stroke:#fa5539;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:7 7;opacity:.85}
.sx-e .vg .vg-agent{fill:#1c1c1f;stroke:#fa5539;stroke-width:2.6}
.sx-e .vg .vg-area{fill:rgba(250,85,57,.08)}
.sx-e .vg .vg-chartline{fill:none;stroke:#fa5539;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
/* type in SVG units: the screen renders at ~0.63x at 300px, so 17u ≈ 10.7px, A's label size. Labels are
   A's face (Geist 400, uppercase, .06em), not mono */
.sx-e .vg text{font-family:"Geist",ui-sans-serif,system-ui,sans-serif}
.sx-e .vg .vg-lab{font-size:17px;font-weight:400;letter-spacing:.06em;fill:#a4a7ac}
.sx-e .vg .vg-title{font-size:28px;font-weight:600;letter-spacing:-.02em;fill:#fff}
.sx-e .vg .vg-title-s{font-size:23px;font-weight:600;letter-spacing:-.01em;fill:#fff}
.sx-e .vg .vg-pill-t{font-size:17px;font-weight:600;fill:#181b22}
.sx-e .vg .vg-ghost-t{font-size:17px;font-weight:600;fill:#fff}
.sx-e .vg .vg-chip-t{font-size:15px;font-weight:600;letter-spacing:.06em;fill:#181b22}
/* the build (emil-design-eng): in with a strong ease-out, 20ms stagger; out in 120ms on the same curve,
   and the wireframe comes back 60ms later so the two layers never double-expose */
.sx-e .vg .vg-b{opacity:0;transform:translateY(8px);transition:opacity .12s cubic-bezier(.23,1,.32,1),transform .12s cubic-bezier(.23,1,.32,1)}
.sx-e .approach-c:is(.is-built,:focus-visible) .vg .vg-b{opacity:1;transform:none;transition:opacity .18s ease-out calc(var(--i) * 20ms),transform .2s cubic-bezier(.23,1,.32,1) calc(var(--i) * 20ms)}
.sx-e .approach-c:is(.is-built,:focus-visible) .vg .vg-wire{opacity:0;transition-delay:0s}
.sx-e .approach-c:is(.is-built,:focus-visible) .vg .vg-chartline{stroke-dashoffset:0;transition:stroke-dashoffset .36s cubic-bezier(.23,1,.32,1) .08s}
@media (hover:hover) and (pointer:fine){
  .sx-e .approach-c:is(:hover,.cc-active) .vg .vg-b{opacity:1;transform:none;transition:opacity .18s ease-out calc(var(--i) * 20ms),transform .2s cubic-bezier(.23,1,.32,1) calc(var(--i) * 20ms)}
  .sx-e .approach-c:is(:hover,.cc-active) .vg .vg-wire{opacity:0;transition-delay:0s}
  .sx-e .approach-c:is(:hover,.cc-active) .vg .vg-chartline{stroke-dashoffset:0;transition:stroke-dashoffset .36s cubic-bezier(.23,1,.32,1) .08s}
}
/* while a screen is built it keeps working, quietly: the sync dot travels and work flows along the agent's edges */
@keyframes vg-travel{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(24px);opacity:0}}
@keyframes vg-flow{to{stroke-dashoffset:-28}}
.sx-e .vg .vg-travel{opacity:0}
.sx-e .approach-c:is(.is-built,.cc-active,:hover,:focus-visible) .vg .vg-travel{animation:vg-travel 1.4s cubic-bezier(.45,0,.55,1) infinite}
.sx-e .approach-c:is(.is-built,.cc-active,:hover,:focus-visible) .vg .vg-edge{animation:vg-flow 1.1s linear infinite}
@media (hover:none){.sx-e .approach-c.is-built .vg :is(.vg-travel,.vg-edge){animation-iteration-count:3}}   /* on touch the loops play three times and rest */
@media (prefers-reduced-motion:reduce){
  .sx-e .vg :is(.vg-b,.vg-wire,.vg-chartline){transition:none!important}
  .sx-e .vg .vg-b{transform:none}
  .sx-e .vg :is(.vg-travel,.vg-edge){animation:none!important}
}

/* ---- round 3 process, after the design review: the plates fill their column (they overlapped the list at
   1101–1279 and sat 85px short of the edge at 1588), keep their labels inside the page at 901–1100 and on
   phones (labels 12px, stack on the text edge), and the list and guarantee share one measure */
@media (min-width:1101px){
  .sx-c-process .cdd-figure{max-width:none!important;justify-self:stretch!important}
  .sx-c-process .cdd-figure>[class*="FigureWrapper"]{flex-shrink:1;min-width:0;margin-right:3rem!important}
}
@media (min-width:901px) and (max-width:1100px){.sx-c-process .cdd-figure>[class*="FigureWrapper"]{width:min(30rem,calc(100% - 6rem))!important;margin:0 auto 0 0!important}}
@media (max-width:768px){
  .sx-c-process [class*="LabelAnchor"],.sx-c-process [class*="LabelText"]{font-size:.75rem!important}
  .sx-c-process .cdd-figure>[class*="FigureWrapper"]{margin:0 auto 0 0!important}
  .sx-c-process .cdd-figure{align-self:stretch!important;justify-content:flex-start!important;max-width:none!important}
}
.sx-c-process .cdd-list,.sx-c-process .cdd-guarantee{max-width:40rem}
.sx-c-process .cdd-item p{font-size:1.0625rem!important;line-height:1.55}
.sx-c-process .cdd-guarantee{margin-top:40px}
/* hover: lifting a plate tucked it further under the plate above, so it read as sinking; instead every plate
   (and label) ABOVE the hovered step rises, opening a gap that shows the hovered plate. Step 4 (top) lifts. */
.sx-c-process .c-plate,.sx-c-process [class*="LabelAnchor"]{transition:translate .2s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .sx-c-process .c-plate.is-hot{transform:none}
  .sx-c-process .c-plate.is-hot[data-step="4"],.sx-c-process [class*="LabelAnchor"].is-hot[data-step="4"]{translate:0 -14px}
  .sx-c-process :is(.c-plate,[class*="LabelAnchor"]).is-above{translate:0 -18px}
}
@media (prefers-reduced-motion:reduce){.sx-c-process :is(.c-plate,[class*="LabelAnchor"]){translate:none!important}}

/* ---- Why Choose rows (Evan): the whole row is clickable, and the lines between the rows are gone (the grey
   hairline and the orange active line, how.css .step::before/::after). The active step still reads: full-white
   title, others at 55%, its paragraph open. */
#howItWorks .step::before,#howItWorks .step::after{display:none!important}
#howItWorks .step:not(.active){cursor:pointer}
@media (hover:hover) and (pointer:fine){
  #howItWorks .step:not(.active):hover .step-btn,#howItWorks .step:not(.active):hover .step-btn *{color:#fa5539!important}
}
#howItWorks .pstate{transition:opacity .2s ease-out}   /* a clicked step swaps its panel with a short fade, not a hard cut */
@media (prefers-reduced-motion:reduce){#howItWorks .pstate{transition:none}}
/* the open step's paragraph: A capped it at 66px, sized for its 14px body; at the page's 16px body the middle
   step runs three lines (74px) and lost its last 8px. Room for four lines; the open/close ease is A's. */
html:not([data-home-layout=compact]) #howItWorks .step.active .body{max-height:7em!important}

/* ---- section order, round 3 (Evan: who → what → why you → trust → what happens → contact). The gaps were
   tuned to the old neighbours, so each moved section is re-tuned to the one page gap (160 desktop / 96 phone):
   Why Choose → stats (was 127 / 124), stats → Qeepsake (129 / 29), Qeepsake → mid CTA (221 / 155). */
#languages{margin-top:calc(var(--gap) - 127px)!important}
#spotlight{margin-top:calc(var(--gap) - 100px)!important}
#cta{margin-top:calc(var(--gap) - 61px)!important}
@media (max-width:809px){
  #languages{margin-top:calc(var(--gap) - 124px)!important}
  #spotlight{margin-top:calc(var(--gap) - 64px)!important}
  #cta{margin-top:calc(var(--gap) - 59px)!important}
}
@media (max-width:809px){   /* phone: hero → Solutions (153) and Solutions → Why Choose (144) join the 96 rhythm */
  .sx-e section#solutions{padding-top:calc(var(--gap) - 73px)!important}
  #howItWorks{margin-top:calc(var(--gap) - 128px)!important}
}

/* ===== round 5 (2026-10-01, Nick + Mike: "too much unused space"): Solutions = the bucket page's card row.
   Title across the top, three cards side by side, drawing on top of each card (page-set/pages/bucket/src/page.css .pgb-card).
   Was 2,160px at 1440 with a sticky title column beside three stacked cards. ===== */
.sx-e-solutions .approach-grid{display:block!important}
.sx-e-solutions .approach-head{margin:0 0 40px!important}
.sx-e-solutions .approach-head .approach-title{max-width:22ch!important}
.sx-e-solutions .approach-cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;flex-direction:initial!important}
.sx-e-solutions .approach-c{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;padding:0!important;height:100%}
.sx-e-solutions .approach-img-wrapper.vg-wrap{order:-1!important;width:auto!important;height:auto!important;flex:none!important;margin:0!important;padding:28px 28px 0!important;align-self:stretch!important;position:relative!important;inset:auto!important;transform:none!important;left:auto!important}
.sx-e-solutions .approach-img-wrapper.vg-wrap .vg{display:block;width:100%;height:auto;max-height:250px;margin:0 auto;overflow:visible}
.sx-e-solutions .approach-c-content{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;width:auto!important;max-width:none!important;margin:0!important;padding:24px 28px 28px!important}
.sx-e-solutions .approach-c h3{max-width:none!important}
.sx-e-solutions .approach-learn{margin-top:auto!important;padding-top:24px}
@media (min-width:601px) and (max-width:1099px){   /* tablet: one card per row, drawing left, words right (the bucket card's layout below 1100) */
  .sx-e-solutions .approach-img-wrapper.vg-wrap .vg{max-height:240px}
  .sx-e-solutions .approach-cards{grid-template-columns:1fr!important;gap:16px!important}
  .sx-e-solutions .approach-c{display:grid!important;grid-template-columns:minmax(0,46%) 1fr!important;align-items:center!important}
  .sx-e-solutions .approach-img-wrapper.vg-wrap{order:-1!important;padding:28px 0 28px 28px!important}
}
@media (max-width:600px){   /* phone: stacked, drawing capped so each card is about a screen */
  .sx-e-solutions .approach-head{margin-bottom:32px!important}
  .sx-e-solutions .approach-cards{grid-template-columns:1fr!important;gap:16px!important}
  .sx-e-solutions .approach-img-wrapper.vg-wrap{padding:20px 22px 0!important}
  .sx-e-solutions .approach-img-wrapper.vg-wrap .vg{max-height:128px;margin:0 auto;width:auto;max-width:100%}
  .sx-e-solutions .approach-c-content{padding:16px 22px 22px!important}
  .sx-e-solutions .approach-learn{padding-top:14px}
}

/* ===== round 6 (2026-10-01, Evan: bring over the bucket page's Why Choose panels): one panel per guarantee row.
   Ported from page-set/pages/bucket/src/home.css (the three guarantee panels, V17), rescoped to the homepage.
   Show/hide stays the homepage's own .pstate engine (how.js setPstateOpacity), so the bucket's position rules are not ported. ===== */
#howItWorks.why-choose .pgb-pp { display: flex; flex-direction: column; gap: 22px; box-sizing: border-box; height: 100%; padding: 28px 32px 32px; font-family: var(--font-sans); }
#howItWorks.why-choose .pgb-ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
#howItWorks.why-choose .pgb-ph-t { margin: 0; color: #fff; font: 600 28px/42px var(--font-sans); letter-spacing: -.84px; }
#howItWorks.why-choose .pgb-ph-s { margin: 0; color: #a4a7ac; font: 400 12.5px/18.75px var(--font-sans); }
#howItWorks.why-choose .pgb-pill { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: #fff; color: #000; font: 400 14px/21px var(--font-sans); }
#howItWorks.why-choose .pgb-pill--ok { background: rgb(18, 179, 157); color: #04110f; }
#howItWorks.why-choose .pgb-pc { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 12px 13px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
#howItWorks.why-choose .pgb-pc--hot { background: rgba(250, 85, 57, .08); box-shadow: inset 0 0 0 1px rgba(250, 85, 57, .5); }
#howItWorks.why-choose .pgb-pc-t { margin: 0; color: #fff; font: 400 15px/21px var(--font-sans); }
#howItWorks.why-choose .pgb-pc-meta { margin: 0; color: #a4a7ac; font: 400 10.5px/15.75px var(--font-sans); }
#howItWorks.why-choose .pgb-chip { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba(18, 179, 157, .14); color: rgb(18, 179, 157); font: 500 11px/16.5px var(--font-sans); white-space: nowrap; }
#howItWorks.why-choose .pgb-chip--or { background: rgba(250, 85, 57, .14); color: var(--accent); }
#howItWorks.why-choose .pgb-chip--warn { background: rgba(232, 163, 23, .14); color: #e8a317; }
/* row 1: the build plan, four milestone columns */
#howItWorks.why-choose .pgb-cols--4 { flex: 1; display: grid; align-items: start; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 0; }
#howItWorks.why-choose .pgb-col { box-sizing: border-box; padding: 12px 11px; border-radius: 12px; background: rgba(255, 255, 255, .02); }
#howItWorks.why-choose .pgb-col-h { margin: 0 0 12px; padding: 0 2px; color: #a4a7ac; font: 400 10.5px/15.75px var(--font-sans); letter-spacing: .63px; text-transform: uppercase; }
/* row 2: the spec, line by line, and the merge */
#howItWorks.why-choose .pgb-rows { display: flex; flex-direction: column; gap: 10px; }
#howItWorks.why-choose .pgb-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
#howItWorks.why-choose .pgb-row-n { color: #a4a7ac; font: 400 11px/16.5px var(--font-mono); }
#howItWorks.why-choose .pgb-row-t { margin: 0; color: #fff; font: 400 15px/21px var(--font-sans); }
#howItWorks.why-choose .pgb-row-s, #howItWorks.why-choose .pgb-chipslot { display: grid; justify-items: end; }
#howItWorks.why-choose .pgb-row-s > *, #howItWorks.why-choose .pgb-chipslot > * { grid-area: 1 / 1; }
#howItWorks.why-choose .pgb-merge { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; background: rgba(18, 179, 157, .08); }
#howItWorks.why-choose .pgb-merge--sign { background: rgba(255, 255, 255, .04); }
#howItWorks.why-choose .pgb-merge-ic { width: 8px; height: 8px; border-radius: 50%; background: rgb(18, 179, 157); }
#howItWorks.why-choose .pgb-merge-t { flex: 1; margin: 0; color: #fff; font: 400 15px/21px var(--font-sans); }
#howItWorks.why-choose .pgb-merge-b { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #a4a7ac; font: 400 11px/16.5px var(--font-mono); }
/* row 3: twelve months after launch, two repairs */
#howItWorks.why-choose .pgb-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
#howItWorks.why-choose .pgb-launch { grid-column: 1 / -1; color: var(--accent); font: 400 10.5px/15.75px var(--font-sans); letter-spacing: .63px; text-transform: uppercase; }
#howItWorks.why-choose .pgb-m { position: relative; height: 84px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
#howItWorks.why-choose .pgb-m-n { position: absolute; left: 8px; bottom: 6px; color: #a4a7ac; font: 400 11px/16.5px var(--font-mono); }
#howItWorks.why-choose .pgb-months-cap { margin: -12px 0 0; color: #a4a7ac; font: 400 10.5px/15.75px var(--font-sans); }
#howItWorks.why-choose .pgb-bugs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#howItWorks.why-choose .pgb-bugs .pgb-pc { display: grid; justify-items: start; margin: 0; }
#howItWorks.why-choose .pgb-bugs .pgb-chip { grid-area: 3 / 1; }
/* the bottom line of a panel: what the guarantee means in two key/value pairs */
#howItWorks.why-choose .pgb-sum { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 6px 16px; margin-top: auto; padding: 16px 18px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
#howItWorks.why-choose .pgb-sum-k { margin: 0; color: #a4a7ac; font: 400 11px/16.5px var(--font-sans); letter-spacing: .63px; text-transform: uppercase; }
#howItWorks.why-choose .pgb-sum-v { display: flex; align-items: center; gap: 8px; margin: 0; color: #fff; font: 600 15px/21px var(--font-sans); }
#howItWorks.why-choose .pgb-sum-v--or { color: var(--accent); }
#howItWorks.why-choose .pgb-lock { width: 10px; height: 8px; margin-top: 3px; border-radius: 2px; background: rgb(18, 179, 157); box-shadow: 0 -4px 0 -2px rgb(18, 179, 157); }
/* the sequence: hidden until its ms mark, then in; a chip that changes state goes out (super.js plays it when a panel turns on) */
#howItWorks.why-choose .pgb-ps [data-at] { opacity: 0; transform: translateY(6px); transition: opacity .4s ease-out, transform .5s cubic-bezier(.23, 1, .32, 1); }
#howItWorks.why-choose .pgb-ps [data-at].is-in { opacity: 1; transform: none; }
#howItWorks.why-choose .pgb-ps [data-at].is-out { display: none; }
#howItWorks.why-choose .pgb-ps .pgb-m[data-at] { opacity: 1; transform: none; transition: background-color .35s ease-out; }
#howItWorks.why-choose .pgb-ps .pgb-m[data-at].is-in { background: rgba(18, 179, 157, .2); }
@media (prefers-reduced-motion: reduce) { #howItWorks.why-choose .pgb-ps [data-at] { transition: none; transform: none; } }
html.is-failsafe #howItWorks.why-choose .pgb-ps [data-at] { opacity: 1; transform: none; }
@media (max-width: 1099px) { #howItWorks.why-choose .pgb-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) {
  #howItWorks.why-choose .pgb-pp { gap: 18px; padding: 20px 18px 22px; }
  #howItWorks.why-choose .pgb-ph-t { font-size: 20px; line-height: 30px; letter-spacing: -.6px; }
  #howItWorks.why-choose .pgb-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #howItWorks.why-choose .pgb-m { height: 48px; }
  #howItWorks.why-choose .pgb-bugs { grid-template-columns: 1fr; }
  #howItWorks.why-choose .pgb-row { grid-template-columns: 24px minmax(0, 1fr); }
  #howItWorks.why-choose .pgb-row-s { grid-column: 2; justify-items: start; }
  #howItWorks.why-choose :is(.pgb-pc-t, .pgb-row-t, .pgb-merge-t) { font-size: 13px; line-height: 18.2px; }
  #howItWorks.why-choose .pgb-sum { grid-template-columns: 1fr; gap: 2px; }
  #howItWorks.why-choose .pgb-sum-v { margin-bottom: 10px; }
  #howItWorks.why-choose .pgb-sum-v:last-child { margin-bottom: 0; }
}
/* the overage chip sits on the orange-tinted hot card, so its own .14 fill stacked to 4.35:1 at 11px; .08 keeps the
   brand orange text and clears AA at 4.72:1 (measured with every panel forced on; the page's sweep never judged it) */
#howItWorks.why-choose .pgb-pc--hot .pgb-chip--or { background: rgba(250, 85, 57, .08); }

/* ---- FAQ (2026-10-14, LAUNCH-TODO 1.8): live's seven homepage questions, above the contact section. Type and spacing match
   the testimonials section (52/36px Geist 600, mono eyebrow, 160/96px top); answers sit on the raised plate, no hairlines. */
.super-faq{background:var(--bg);padding:160px 44px 160px}
.super-faq-w{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;max-width:1352px;margin:0 auto}
.super-faq-head .eyebrow{margin-bottom:16px}
.super-faq-h{margin:0;font-family:var(--font-sans);font-size:52px;font-weight:600;line-height:1.06;letter-spacing:-.035em;color:var(--fg);text-wrap:balance}
.super-faq-list{display:grid;gap:12px}
.super-faq-item{background:var(--surface-raised);border-radius:14px}
.super-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;cursor:pointer;list-style:none;font-size:19px;font-weight:500;line-height:1.35;color:var(--fg)}
.super-faq-item summary::-webkit-details-marker{display:none}
.super-faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:14px}
.super-faq-item summary i{position:relative;flex:none;width:14px;height:14px}
.super-faq-item summary i::before,.super-faq-item summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:1px;background:var(--accent);transition:transform .2s ease-out}
.super-faq-item summary i::after{transform:rotate(90deg)}
.super-faq-item[open] summary i::after{transform:rotate(0)}
.super-faq-item p{margin:0;padding:0 24px 24px;font-size:17px;line-height:1.55;color:var(--muted-fg);max-width:62ch}
@media (max-width:1099px){.super-faq-w{grid-template-columns:1fr;gap:32px}}
@media (max-width:809px){.super-faq{padding:96px 20px 96px}.super-faq-h{font-size:36px}.super-faq-item summary{font-size:17px;padding:18px 20px}.super-faq-item p{font-size:16px;padding:0 20px 20px}}
/* Tablet menu bar (LAUNCH-TODO 1.13, 2026-10-14): same fix as page-set/kit/chrome/chrome.css. The bar's type is fluid and the
   480-767 band uses the phone ideal (430), so the 5em bar grew to 138px at 744 (95px at 991). Hold the 768px size (74px). */
@media screen and (min-width:480px) and (max-width:991px){#siteNav.sx-b{--size-container-ideal:834;--size-container-min:768px;--size-container-max:768px}}