/* ============================================================================
   Spectre — light theme
   Design language ported 1:1 from the TMP Website (Next.js / Tailwind v4):
   seven tokens, Inter (400/500) + Akkurat Mono, -0.025em tracking, zero radius,
   1px #e5e5e5 rules, 45deg hatch dividers, stepped "8-bit" button clip.

   Loaded AFTER styles.min.css and after every inline <style id="ibc-*"> block,
   so it wins on document order. Remove the one <link> to revert.
   ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────────── */
/* Inter v4 variable. The range is pinned to 400-500 on purpose: anything the
   page asks for outside it clamps to a real instance, so the design stays on
   Regular and Medium and no weight is ever synthesised. */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Akkurat Mono";src:url(/assets/fonts/akkurat-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root{
  /* the seven, straight from the reference */
  --sp-bg:#fff;
  --sp-fg:#0a0a0a;
  --sp-muted:#f5f5f5;
  --sp-muted-fg:#737373;
  --sp-border:#e5e5e5;
  --sp-ring:#06f;
  --sp-accent:#ea580c;
  --sp-error:#e11d48;
  --sp-track:1px solid var(--sp-border);

  /* Webflow primitives — a role inversion, not a rename:
     --base--navy is "ground" everywhere, --base--white is "ink". */
  --base--navy:#fff;
  --base--white:#0a0a0a;
  --base--bright-blue:#ea580c;
  --base--bright-red:#e11d48;
  --neutral--navy-50:#262626;   /* primary-button hover ground */
  --neutral--navy-100:#737373;  /* tertiary text, placeholders */
  --neutral--navy-800:#e5e5e5;  /* input borders, rails */
  --neutral--navy-900:#fafafa;

  /* semantic tokens the inversion alone gets wrong */
  --_color-themes---border-color--border-main:#e5e5e5;
  --_color-themes---border-color--border-tertiary:#e5e5e5;
  --_color-themes---cards--gradient-border-color-1:#e5e5e5;
  --_color-themes---cards--gradient-border-color-2:#e5e5e5;
  --_color-themes---cards--gradient-bg-color-1:#fff;
  --_color-themes---cards--gradient-bg-color-2:#fff;
  --styleguide-colors--secondary-tag-text:#fff;
  --styleguide-colors--primary-tag-background:#ea580c;

  /* type */
  --font-family--headings:"Inter";
  --font-family--paragraphs:"Inter";
  --font-family--decoration:"Akkurat Mono";

  /* scale — the reference tops out at 48px for a section h2 */
  --_typography---heading-size-h1--text-size:clamp(3rem,5.6vw,5rem);
  --_typography---heading-size-h1--line-height:1.02;
  --_typography---heading-size-h4--text-size:clamp(1.75rem,2.6vw,2.25rem);
  --_typography---heading-size-h4--line-height:1.12;
  --_typography---heading-size-h7--text-size:1.125rem;
  --_typography---heading-size-h7--line-height:1.5;

  /* rhythm — the reference is far tighter than the navy build */
  --_sizes---container-size--large:76rem;      /* 1216px content, rails land at 112px */
  --_sizes---global-padding:2rem;              /* lg:px-8 */
  --_sizes---vertical-spacer--xlarge:4rem;
  --_sizes---vertical-spacer--large:3.5rem;
  --_sizes---vertical-spacer--medium:2.5rem;
  --_sizes---border-radius--xsmall:0;
  --_sizes---border-radius--small:0;
  --_sizes---border-radius--medium:0;
}

html,body{background:var(--sp-bg);color:var(--sp-fg)}
body{font-family:"Inter",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--sp-accent);color:#fff}
*[tabindex]:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--sp-ring)!important;outline-offset:2px!important}

/* ── The continuous 1px frame ─────────────────────────────────────────────── */
/* Every section draws the same pair of rails, so the page reads as one column. */
.main-wrapper .section_slot > .padding-global > .container-large,
.section_logo-marquee > .padding-global > .container-large,
.section_page-cta > .padding-global > .container-large,
.section_home-hero > .padding-global > .container-large,
.section_footer > .padding-global > .container-large,
.section_contact > .padding-global > .container-large,
.header-component > .padding-global > .container-large{
  border-left:var(--sp-track);border-right:var(--sp-track);
  padding-left:clamp(1rem,3vw,2.5rem);padding-right:clamp(1rem,3vw,2.5rem);
}

/* ── Hatch divider ────────────────────────────────────────────────────────── */
/* the rails must land on exactly the same x as .padding-global > .container-large */
.pixel-divider{padding-inline:var(--_sizes---global-padding)}
.pixel-divider > i{
  display:block;width:100%;max-width:var(--_sizes---container-size--large);margin-inline:auto;
  height:4rem;border-left:var(--sp-track);border-right:var(--sp-track);
  background-image:repeating-linear-gradient(45deg,transparent 0,transparent 2px,rgba(229,229,229,.4) 2px,rgba(229,229,229,.4) 4px);
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav{background:var(--sp-bg);border-bottom:var(--sp-track)}
.nav_bg,.nav_bg.is-scrolled{display:none!important}
.nav_inner{min-height:4.5rem;padding-block:0}
.nav_logo{width:auto!important;align-items:flex-start!important}
.nav > .padding-global{padding-block:0}
.brand-wordmark{visibility:visible!important;font-family:"Inter",sans-serif;font-weight:500;letter-spacing:-.025em;text-transform:none;font-size:1.1875rem;color:var(--sp-fg)}
.nav-links a{font-family:"Inter",sans-serif;font-size:.875rem;font-weight:500;color:rgba(10,10,10,.7);letter-spacing:0}
.nav-links a:hover{color:var(--sp-fg)}
.nav-badge{font-family:"Akkurat Mono",ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sp-accent);border:1px solid rgba(234,88,12,.5);border-radius:0;font-size:.6rem;letter-spacing:.06em}
.nav_menu{background:var(--sp-bg)}
.nav_mobile-link{font-family:"Inter",sans-serif;color:var(--sp-fg);font-weight:500;letter-spacing:-.025em}
.nav_mobile-link:hover{color:var(--sp-accent)}
@media screen and (max-width:991px){.nav_menu-ul{border:var(--sp-track);border-radius:0}}
.nav_overlay{background-color:rgba(10,10,10,.4)!important}
@media screen and (max-width:991px){.nav_button{color:var(--sp-fg)!important}}

/* ── Buttons — the stepped 8-bit clip ─────────────────────────────────────── */
.button{
  --clip:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px),0 8px,4px 8px,4px 4px,8px 4px);
  border:0!important;border-radius:0!important;background:var(--sp-fg)!important;color:#fff!important;
  clip-path:var(--clip);-webkit-clip-path:var(--clip);
  box-shadow:none!important;font-family:"Inter",sans-serif;font-size:.875rem;font-weight:500;line-height:1.25rem;
  transition:background-color .15s cubic-bezier(.4,0,.2,1),transform .15s
}
.button:hover{background:rgba(10,10,10,.9)!important;color:#fff!important;transform:none!important;box-shadow:none!important}
.button .button_link{padding:.625rem 1.25rem;min-height:2.5rem;align-items:center;color:inherit}
.button_span{text-shadow:none!important}
.button:hover .button_span{transform:none!important}
/* secondary variant → outline */
.button:where(.w-variant-7178d804-f914-71aa-2e69-23f307a53b60){background:var(--sp-bg)!important;color:var(--sp-fg)!important;box-shadow:inset 0 0 0 1px var(--sp-border)!important;font-weight:500}
.button:where(.w-variant-7178d804-f914-71aa-2e69-23f307a53b60):hover{background:var(--sp-muted)!important;color:var(--sp-fg)!important}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.section_home-hero.v2,.home-hero_component.v2{min-height:0;height:auto}
.home-hero_component.v2{min-height:clamp(24rem,44vw,32rem);padding-block:clamp(3rem,6vw,4.5rem)}
.section_home-hero > .padding-global{position:relative;z-index:2}
.home-hero_bg{background:var(--sp-bg)!important}
/* keep the mosaic inside the rails */
.home-hero_background{width:calc(100% - var(--_sizes---global-padding)*2);max-width:var(--_sizes---container-size--large);left:50%;transform:translateX(-50%);right:auto}
.home-hero_background{z-index:0}
.heading-style-h1{font-weight:400;letter-spacing:-.03em;color:var(--sp-fg)}
.hero-tagline{
  background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--sp-muted-fg)!important;
  animation:none!important;font-size:1.125rem!important;line-height:1.625!important;font-weight:400!important;letter-spacing:0!important;margin-top:1.25rem
}
.hero-explore{color:var(--sp-accent)!important;opacity:1!important;font-family:"Akkurat Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6875rem;letter-spacing:.18em}
.hero-explore:hover{color:var(--sp-fg)!important}
/* the mosaic canvas, top-right, behind the wordmark */
.pixel-field{position:absolute;pointer-events:none;z-index:0}
.pixel-field--tr{top:0;right:0;width:min(46%,34rem);height:min(88%,34rem)}
.pixel-field--bl{bottom:0;left:0;width:min(32%,24rem);height:min(58%,22rem)}
@media(max-width:767px){
  .pixel-field--tr{width:62%;height:52%;opacity:.7}
  .pixel-field--bl{width:44%;height:30%;opacity:.6}
}

/* ── Section headings + eyebrow ───────────────────────────────────────────── */
.section-heading,.cmp-head{gap:1.25rem}
.section-heading_dash{display:none!important}
.section-heading_eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;padding:0!important;
  font-family:"Akkurat Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;line-height:1.3333;font-weight:400;
  letter-spacing:-.025em;text-transform:none!important;color:var(--sp-accent)
}
.section-heading_eyebrow::before{content:"";display:block;width:6px;height:6px;flex:none;background:var(--sp-accent);border:0;position:static;border-radius:0}
.section-heading_eyebrow::after{display:none!important}
.heading_component{color:var(--sp-fg)}
.heading-style-h4{font-weight:500;letter-spacing:-.025em;text-wrap:balance}
.paragraph_component,.paragraph_component p{color:var(--sp-muted-fg);line-height:1.625;text-wrap:pretty}
.ibc-highlight{color:var(--sp-accent)!important}
.text-color-secondary{color:var(--sp-fg)!important}

/* ── "Our solution" — three panels sharing rules ──────────────────────────── */
.component-3up_grid{gap:0;border-top:var(--sp-track)}
.icon-card{background-image:none!important;background:var(--sp-bg);padding:0;border-radius:0;border-left:var(--sp-track)}
.icon-card:first-child{border-left:0}
.icon-card:hover{transform:none!important}
.icon-card_inner{background-image:none!important;background:var(--sp-bg);border-radius:0;padding:1.75rem;gap:.75rem}
.icon-card_img{display:none!important}
.icon-card_icon{width:1.5rem;height:1.5rem;filter:brightness(0) saturate(100%) invert(38%) sepia(58%) saturate(3800%) hue-rotate(9deg) brightness(97%) contrast(96%)}
.icon-card_inner .heading_component.heading-style-h7{font-size:1rem!important;line-height:1.5!important;font-weight:500;letter-spacing:-.025em;color:var(--sp-fg)}
.icon-card_inner .paragraph_component p{font-size:.875rem!important;line-height:1.625!important;color:var(--sp-muted-fg)}


/* ── Comparison ───────────────────────────────────────────────────────────── */
.cmp-title{color:var(--sp-fg);font-weight:500;letter-spacing:-.025em;font-size:clamp(1.875rem,4vw,3rem);line-height:1.05}
.cmp-hl{color:var(--sp-muted-fg)}
.cmp-stats{margin-top:2.75rem;border:var(--sp-track)}
.cmp-stat{padding:1.75rem 2rem}
.cmp-stat:first-child{padding-left:2rem}
.cmp-stat:last-child{padding-right:2rem;border-left:var(--sp-track)}
.cmp-stat__num::before{display:none!important}
.cmp-x{color:var(--sp-accent);font-weight:500;font-size:clamp(1.5rem,2.4vw,2rem);margin-top:.28em}
.cmp-count{
  background:none!important;-webkit-text-fill-color:var(--sp-accent)!important;color:var(--sp-accent)!important;
  font-weight:500;letter-spacing:-.03em;font-size:clamp(3rem,6vw,3.75rem);line-height:1
}
.cmp-stat__cap{color:var(--sp-fg);font-size:1rem;font-weight:500;letter-spacing:-.025em;margin-top:.75rem}
.cmp-stat__detail{margin-top:1.75rem}
.cmp-name{font-family:"Akkurat Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;letter-spacing:-.025em;color:var(--sp-muted-fg)}
.cmp-name--us{color:var(--sp-fg)}
.cmp-val{color:var(--sp-muted-fg);font-size:.8125rem;font-family:"Akkurat Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.cmp-val--us{color:var(--sp-accent);font-weight:500}
.cmp-bar{height:.5rem;background:var(--sp-muted);border-radius:0}
.cmp-fill{border-radius:0;min-width:.5rem}
.cmp-fill--rival{background:#a3a3a3}
.cmp-fill--us{background:var(--sp-accent);box-shadow:none}
.cmp-card+.cmp-card{border-top:var(--sp-track)}
.cmp-list li{color:var(--sp-muted-fg);font-size:.875rem;line-height:1.625}
.cmp-list li::before{background:var(--sp-muted-fg);border-radius:0;width:.375rem;height:.375rem;top:.55em}
.cmp-card--us .cmp-list li{color:var(--sp-fg)}
.cmp-card--us .cmp-list li::before{background:var(--sp-accent)}
@media(max-width:767px){.cmp-stat:last-child{border-top:var(--sp-track)!important;border-left:0!important}}

/* ── Trusted by / marquee ─────────────────────────────────────────────────── */
.adopter-logo{filter:brightness(0)!important;opacity:.9}
.logo-marquee_image{filter:brightness(0)!important;opacity:.72;height:2rem!important}
.logo-marquee_item:hover .logo-marquee_image{opacity:1}
.logo-marquee{-webkit-mask:linear-gradient(90deg,transparent,#000 12% 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12% 88%,transparent)}

/* ── Final CTA — the dot grid, not a glow ─────────────────────────────────── */
.page-cta_component{padding-block:1rem}
.page-cta_background-image{width:calc(100% - var(--_sizes---global-padding)*2);max-width:var(--_sizes---container-size--large);left:50%;transform:translateX(-50%);right:auto;margin-inline:0}
.cta-visual{
  background:none!important;-webkit-mask:none!important;mask:none!important;
  background-image:radial-gradient(var(--sp-border) 1px,transparent 1px)!important;background-size:22px 22px!important
}
.cta-visual::before,.cta-visual::after{display:none!important}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.section_footer{background:var(--sp-bg)}
.section_footer > .padding-global > .container-large{border-top:var(--sp-track)}
.footer_background{display:none!important}
.background-transition,.background-transition.is-alternate,.background-transition.is-bottom{background-image:none!important}
.footer_brand .brand-wordmark.is-footer{font-size:1.1875rem;letter-spacing:-.025em}
.nav-link{font-family:"Akkurat Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;letter-spacing:-.025em;color:var(--sp-muted-fg)}
.nav-link:hover{color:var(--sp-fg)}

/* ── Forms (contact) ──────────────────────────────────────────────────────── */
.form_label{font-family:"Akkurat Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;letter-spacing:-.025em;color:var(--sp-muted-fg);margin-bottom:.5rem}
.form_input{
  border:var(--sp-track);border-radius:0;background:var(--sp-bg);color:var(--sp-fg);
  font-family:"Inter",sans-serif;font-size:.875rem;min-height:2.75rem;padding:.625rem .75rem
}
.form_input:hover{border-color:#d4d4d4;background:var(--sp-bg)}
.form_input:focus{border-color:var(--sp-fg);box-shadow:inset 0 0 0 1px var(--sp-fg);background:var(--sp-bg);outline:0!important}
.form_input::placeholder{color:var(--sp-muted-fg)}
.form_input.is-text-area{min-height:9rem}
.form_message-success{background:var(--sp-bg);border:var(--sp-track);color:var(--sp-fg);border-radius:0}
.form_message-error{background:var(--sp-bg);border:1px solid var(--sp-error);color:var(--sp-error);border-radius:0}
.select-wrapper::after{color:var(--sp-accent)!important}
.form_checkbox-icon,.form_radio-icon{border-color:var(--sp-border)!important}
.form_checkbox-icon.w--redirected-checked,.form_radio-icon.w--redirected-checked{border-color:var(--sp-fg)!important;background-color:var(--sp-fg)!important}

/* ── Leftover dark-theme literals ─────────────────────────────────────────── */
.linear-wipe,.linear-wipe-active{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--sp-muted-fg)!important;animation:none!important;opacity:1!important}
.tooltip,.tooltip_content-inner,.tooltip_number{background-color:var(--sp-bg)!important;border-color:var(--sp-border)!important}
.eyebrow-component_tag{border-color:var(--sp-border)!important}
.scroll-progress_component{background-color:var(--sp-border)!important}
.scroll-progress_bar{background-color:var(--sp-accent)!important}

/* ── Contact page ─────────────────────────────────────────────────────────── */
.header-component{background-image:none!important;background:var(--sp-bg)!important;min-height:0}
.header-component_content{padding-top:4.5rem!important;min-height:0}
.header-component .vertical-spacer{padding-top:0}
.contact_component{display:flex;flex-direction:column}
/* the form column sits ~72px inside the rails in the design */
.section_contact .contact_component{padding-inline:2.5rem}
/* full-bleed block so its rule can reach the rails; children stay centred */
.contact_header{
  display:block;text-align:center;width:auto;max-width:none;
  padding-block:clamp(2.25rem,4vw,3.5rem);
  margin-inline:calc(-1 * (2.5rem + clamp(1rem,3vw,2.5rem)));
  padding-inline:calc(2.5rem + clamp(1rem,3vw,2.5rem));
  border-bottom:var(--sp-track)
}
.contact_header > *{max-width:44rem;margin-inline:auto}
.contact_header .heading_component{margin-top:1.125rem;font-size:clamp(2rem,3.6vw,2.875rem)!important;line-height:1.05!important;font-weight:500;letter-spacing:-.025em}
.contact_header .paragraph_component{max-width:52ch!important;margin:1rem auto 0}
/* the address is mono in the design, matching the eyebrow */
.contact_header .paragraph_component a{
  display:block;width:fit-content;margin:1rem auto 0;font-family:"Akkurat Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875rem;
  letter-spacing:-.025em;color:var(--sp-accent);text-decoration:none;font-weight:400
}
.contact_header .paragraph_component a:hover{text-decoration:underline}
.contact_header .paragraph_component a::after{content:"  ↗";font-size:.9em}
/* a plain rule, bled out to the rails, divides the header from the form */

/* the hatch rule, bled out to the container rails */
.contact-rule{
  height:4rem;margin-inline:calc(-1 * clamp(1rem,3vw,2.5rem));
  border-top:var(--sp-track);border-bottom:var(--sp-track);
  background-image:repeating-linear-gradient(45deg,transparent 0,transparent 2px,rgba(229,229,229,.4) 2px,rgba(229,229,229,.4) 4px)
}
.section-heading_eyebrow.is-left{justify-content:flex-start;margin:3.5rem 0 2rem}
.section_contact .vertical-spacer{padding-top:0}
.form_label .req{color:var(--sp-accent)}
.form_field-wrapper.is-form-submit{align-items:center;justify-content:flex-start;padding-block:1.75rem 3.5rem}
.form-required{display:none}
/* the submit is the primary action in this design — solid, not outline */
.form_field-wrapper.is-form-submit .button{background:var(--sp-fg)!important;color:#fff!important;box-shadow:none!important;font-weight:500}
.form_field-wrapper.is-form-submit .button:hover{background:rgba(10,10,10,.9)!important}
.form_field-wrapper.is-form-submit .button{font-size:1rem}
.form_field-wrapper.is-form-submit .button .button_link{padding:.75rem 2rem;min-height:3rem;min-width:10.5rem;justify-content:center}

/* ── Mobile drawer ────────────────────────────────────────────────────────── */
/* The exported markup lays the menu out as a flex ROW, so the four items were
   squeezed side by side and clipped — broken in the navy build too. Restack it
   as the reference's drawer: full-bleed rows on a dot grid. */
@media screen and (max-width:991px){
  .nav_menu{background:var(--sp-bg);background-image:radial-gradient(var(--sp-border) 1px,transparent 1px);background-size:22px 22px}
  .nav_menu-inner{padding:.5rem clamp(1rem,4vw,2rem) 2rem}
  .nav_menu-ul{flex-direction:column;align-items:stretch;gap:0;margin-left:0!important;padding:0;border:0!important;width:100%}
  .nav_menu-li{width:100%;border-bottom:var(--sp-track)}
  .nav_menu-li.show-tablet{flex:none}
  .nav_mobile-link,.nav_mobile-link.nav-bridge{display:flex;align-items:center;justify-content:flex-start;text-align:left;padding:1.15rem 0;font-size:1.5rem;font-weight:500}
  .nav_menu-button{padding:1.5rem 0;align-items:stretch}
  .nav_menu-button .button{width:100%}
  .nav_menu-button .button .button_link{justify-content:center}
}

/* footer content removed — keep a short capped band so the column closes cleanly */
.section_footer .vertical-spacer{padding-top:0}
.footer_component{min-height:5rem}
.section_footer > .padding-global > .container-large{border-bottom:var(--sp-track)}

/* ── Nav links (the inline block that defined these lived only in index.html;
      the contact page loads this sheet too, so they belong here) ──────────── */
.nav_inner{position:relative}
.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:2.25rem;align-items:center;z-index:4}
.nav-links a{font-family:"Inter",sans-serif;font-size:.9375rem;font-weight:500;color:rgba(10,10,10,.7);text-decoration:none;white-space:nowrap;letter-spacing:0;transition:color .2s}
.nav-links a:hover{color:var(--sp-fg)}
.nav-bridge{display:inline-flex;align-items:center;gap:.45rem}
.nav-badge{
  font-family:"Akkurat Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.5625rem;line-height:1;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sp-accent);border:1px solid rgba(234,88,12,.5);border-radius:0;padding:.22rem .34rem
}
@media(max-width:991px){.nav-links{display:none}}

/* ── Short pages ──────────────────────────────────────────────────────────── */
/* .page-wrapper is a flex column pinned to 100vh and .section_footer carries
   margin-top:auto, so on a page shorter than the viewport the footer was shoved
   to the bottom and the slack between it and the last section had no rails —
   the column looked severed. Let the last section absorb the slack instead, so
   the rails run unbroken all the way down. */
.main-wrapper{flex:1 0 auto;display:flex;flex-direction:column}
.main-wrapper > *:last-child{flex:1 0 auto;display:flex;flex-direction:column}
.main-wrapper > *:last-child > .padding-global{flex:1 0 auto;display:flex;flex-direction:column}
.main-wrapper > *:last-child > .padding-global > .container-large{flex:1 0 auto}
.section_footer{margin-top:0!important}

/* ── Nav vertical alignment ───────────────────────────────────────────────── */
/* .nav_inner is a grid with `grid-template-rows: 8px 48px`. The wordmark and the
   CTA sit in row 2 (centre y=48) while .nav-links is absolutely positioned and
   centres on the whole bar (y=36) — so the two sides sat 12px apart. Collapse
   the bar to a single row on desktop so every item shares one centre line. */
@media screen and (min-width:992px){
  .nav_inner{grid-template-rows:1fr;align-items:center}
  .nav_inner > .nav_menu{grid-area:1 / 2;height:0}
}

/* ── Full-viewport sections ───────────────────────────────────────────────── */
/* Every section fills one screen, its content centred, the way the navy build
   read. A section is sized 100svh minus the hatch band that precedes it, so
   band + section lands on exactly one viewport. min-height (never height), so
   content taller than the screen still grows instead of clipping. */
@media screen and (min-width:992px){
  /* home-page sections only — the contact page's .header-component is just a
     nav spacer and .section_contact is a form, neither wants a full screen */
  .section_slot,.section_logo-marquee,.section_page-cta{
    min-height:calc(100svh - 4rem);display:flex;flex-direction:column
  }
  .section_slot > .padding-global,
  .section_logo-marquee > .padding-global,
  .section_page-cta > .padding-global{flex:1 0 auto;display:flex;flex-direction:column}
  .section_slot > .padding-global > .container-large,
  .section_logo-marquee > .padding-global > .container-large,
  .section_page-cta > .padding-global > .container-large{
    flex:1 0 auto;display:flex;flex-direction:column;justify-content:center
  }
  /* the hero has no band above it — the nav is overlaid, so it takes a full screen */
  .section_home-hero.v2{min-height:100svh;display:flex;flex-direction:column}
  .section_home-hero.v2 > .padding-global{flex:1 0 auto;display:flex;flex-direction:column}
  .section_home-hero.v2 > .padding-global > .container-large{
    flex:1 0 auto;display:flex;flex-direction:column;justify-content:center
  }
  .home-hero_component.v2{min-height:0;flex:1 0 auto;justify-content:center;padding-block:0}
  /* the big fixed spacers fought the centring */
  .section_slot .vertical-spacer,.section_logo-marquee .vertical-spacer,.section_page-cta .vertical-spacer{padding-top:0}
  .section_slot .slot_component{padding-block:2rem}
  .section_logo-marquee .logo-marquee_component,
  .section_page-cta .page-cta_component{padding-block:2rem}
  /* those sections leaned on the spacers I zeroed — give them a real gap */
  .logo-marquee_component{gap:3.5rem}
  .logo-marquee_heading{display:flex;flex-direction:column}
}

/* ── Hero centring ────────────────────────────────────────────────────────── */
/* .home-hero_heading-wrap ships with width:115ch (~1220px), wider than its
   1134px parent. An overflowing box cannot be centred by margin:auto — it
   pinned left and spilled right, so the wordmark and tagline sat (1220-1134)/2
   = 43px right of centre while the nav links and "explore now" (both absolutely
   centred) were correct. Let it take the parent's width instead. */
.home-hero_heading-wrap{width:100%!important;max-width:100%!important;margin-inline:auto}

/* ── "Our solution" + "Comparison": panels that join the rails ────────────── */
/* These two sections are a panel, not centred prose. The panel bleeds out the
   container's inner padding so its top/bottom rules meet the left and right
   rails, and it drops its own side borders — the rails ARE its sides. The
   section stops at the panel's bottom edge, so no dead space underneath, and
   neither needs a full screen. */
@media screen and (min-width:992px){
  #our-solution,#comparison{min-height:0}
  #our-solution > .padding-global > .container-large,
  #comparison > .padding-global > .container-large{justify-content:flex-start}
  #our-solution .slot_component,#comparison .slot_component{padding-top:5rem;padding-bottom:0;gap:2.5rem}
}
#our-solution .component-3up,
#comparison .cmp-stats{
  margin-inline:calc(-1 * clamp(1rem,3vw,2.5rem));
  width:auto;align-self:stretch
}
/* top + bottom rules only; left/right are the rails themselves */
#our-solution .component-3up_grid{border-top:var(--sp-track);border-bottom:var(--sp-track)}
#comparison .cmp-stats{border-left:0;border-right:0;margin-top:0}
/* breathing room now that the outer cards sit against the rails */
#our-solution .icon-card_inner{padding:2rem 2.25rem}
#comparison .cmp-stat{padding:2rem 2.25rem}
#comparison .cmp-stat:first-child{padding-left:2.25rem}
#comparison .cmp-stat:last-child{padding-right:2.25rem}


/* ── "Trusted by" + "Integrate now" + "Contact us now" ───────────────────── */
/* 150px top and bottom, not a full screen. */
@media screen and (min-width:992px){
  #adopters,.section_logo-marquee,.section_page-cta{min-height:0}
  #adopters > .padding-global > .container-large,
  .section_logo-marquee > .padding-global > .container-large,
  .section_page-cta > .padding-global > .container-large{justify-content:flex-start}
  #adopters .slot_component,
  .section_logo-marquee .logo-marquee_component,
  .section_page-cta .page-cta_component{padding-block:150px}
}

/* Webflow hardcodes .padding-global to 1.25rem under 479px, which desynced it
   from --_sizes---global-padding — the hero background (and so the mosaic) was
   computed off the variable and drifted a few px past the rails on phones.
   Drive both from the same value at every breakpoint. */
.padding-global{padding-inline:var(--_sizes---global-padding)!important}
@media screen and (max-width:767px){:root{--_sizes---global-padding:1.25rem}}

/* NYM is a solid wordmark that fills its artboard edge to edge, while the other
   two are marks with built-in padding — matched box heights read unbalanced, so
   scale it to sit on the same optical cap height. */
.adopter-logo.is-nym{height:2.9rem}
@media(max-width:600px){.adopter-logo.is-nym{height:2.1rem}}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media screen and (max-width:991px){
  /* `grid-template-rows:0fr` is really `minmax(auto,0fr)`, so the closed drawer
     was floored at its min-content height — the 40px of padding I put on
     .nav_menu-inner leaked out as a dotted band under the bar. Floor it at 0. */
  .nav_menu{grid-template-rows:minmax(0,0fr)}
  [data-nav-status="open"] .nav_menu,.nav_menu.is-open{grid-template-rows:minmax(0,1fr)}

  /* the panels meet the rails here too */
  #our-solution .component-3up,#comparison .cmp-stats{
    margin-inline:calc(-1 * clamp(1rem,3vw,2.5rem));width:auto;align-self:stretch
  }
  #comparison .cmp-stats{border-left:0;border-right:0;margin-top:0}

  /* tighter rhythm — the fixed spacers were adding 64px at each end */
  .section_slot .vertical-spacer,
  .section_logo-marquee .vertical-spacer,
  .section_page-cta .vertical-spacer{padding-top:0}
  .section_slot .slot_component{padding-block:3.5rem}
  #our-solution .slot_component,#comparison .slot_component{padding-top:3.5rem;padding-bottom:0;gap:2rem}
  #adopters .slot_component,
  .section_logo-marquee .logo-marquee_component,
  .section_page-cta .page-cta_component{padding-block:4.5rem}
  .logo-marquee_component{gap:2.5rem}

  /* stacked cards: one rule between each, the grid closes top and bottom */
  #our-solution .component-3up_grid{border-top:var(--sp-track);border-bottom:var(--sp-track)}
  #our-solution .icon-card{border-left:0}
  #our-solution .icon-card + .icon-card{border-top:var(--sp-track)}
  #our-solution .icon-card_inner{padding:1.75rem clamp(1rem,4vw,1.5rem)}

  /* the comparison panel stacks; give it the same rule treatment and room */
  #comparison .cmp-stats{display:block}
  #comparison .cmp-stat{padding:1.75rem clamp(1rem,4vw,1.5rem)!important;border-left:0!important}
  #comparison .cmp-stat + .cmp-stat{border-top:var(--sp-track)!important}
}