/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-white:#fff;--spacing:.25rem;--container-xl:36rem;--container-3xl:48rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--tracking-wide:.025em;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.relative{position:relative}.static{position:static}.-top-10{top:calc(var(--spacing) * -10)}.-right-10{right:calc(var(--spacing) * -10)}.-bottom-12{bottom:calc(var(--spacing) * -12)}.-left-12{left:calc(var(--spacing) * -12)}.z-10{z-index:10}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-44{height:calc(var(--spacing) * 44)}.h-48{height:calc(var(--spacing) * 48)}.w-44{width:calc(var(--spacing) * 44)}.w-48{width:calc(var(--spacing) * 48)}.max-w-3xl{max-width:var(--container-3xl)}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.p-6{padding:calc(var(--spacing) * 6)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.pt-4{padding-top:calc(var(--spacing) * 4)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.14em\]{--tw-tracking:.14em;letter-spacing:.14em}.uppercase{text-transform:uppercase}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}@media (min-width:48rem){.md\:flex{display:flex}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[minmax\(0\,1\.15fr\)_minmax\(260px\,0\.85fr\)\]{grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr)}.md\:items-start{align-items:flex-start}.md\:gap-16{gap:calc(var(--spacing) * 16)}.md\:py-16{padding-block:calc(var(--spacing) * 16)}.md\:py-20{padding-block:calc(var(--spacing) * 20)}.md\:py-24{padding-block:calc(var(--spacing) * 24)}}@media (min-width:64rem){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:py-28{padding-block:calc(var(--spacing) * 28)}}}:root{--font-brand:"Boston", "Avenir Next", "Segoe UI", sans-serif;--font-body:"Plus Jakarta Sans", "Avenir Next", "Segoe UI", sans-serif;--font-heading:"Sora", "Avenir Next", "Segoe UI", sans-serif;--bg:#f4f8fb;--surface:#fff;--surface-2:#edf4f8;--text:#102033;--muted:#3f556d;--primary:#0f766e;--primary-strong:#0b5f59;--success:#1f9d76;--border:#bfd0dd;--focus-ring:#0f766e}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation:none!important}}body{background:var(--bg);color:var(--text);font-family:var(--font-body);background-image:linear-gradient(#f8fbfd 0%,#f4f8fb 42%,#eef4f8 100%)}h1,h2,h3{font-family:var(--font-heading);letter-spacing:-.015em}.shell{max-width:var(--container-6xl);padding-inline:calc(var(--spacing) * 6);margin-inline:auto}@property --nav-p{syntax:"<number>";inherits:true;initial-value:0}@property --nav-g{syntax:"<number>";inherits:true;initial-value:0}
:root{--site-header-h:6.5rem}
.site-header{--nav-p:0;--nav-g:0;--nav-t-paint:300ms;--nav-t-geom:220ms;z-index:60;position:fixed;top:0;left:0;right:0;border:0}
/* The glass lives on a pseudo-element so it can fade in with opacity, which the compositor
   handles for free, at a blur radius that never changes and so is rasterised once. Animating
   the radius itself, as this used to, re-rasterised the whole fixed band every frame over a
   live canvas, which is what made the header stutter on phones. */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--nav-p);background:linear-gradient(180deg,rgb(4 33 29/55%) 0%,rgb(10 53 46/46%) 100%);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgb(219 233 229/14%);box-shadow:0 8px 24px rgb(4 9 19/15%)}
.site-header .shell{padding-block:calc(1.25rem - .625rem * var(--nav-g))}
.site-header .cta-secondary{padding-block:calc(.75rem - .25rem * var(--nav-g))}
.site-header .mobile-nav-toggle{padding:calc(.75rem - .25rem * var(--nav-g))}
.brand-mark{display:block;position:relative;overflow:visible;width:6.07rem;height:calc(4rem - 2.7rem * var(--nav-g))}
.brand-logo-svg{display:block;position:absolute;left:0;bottom:0;height:4rem;width:auto}
/* The mascot leaves by travelling, not by fading. At the compact height the lockup is already
   anchored far enough up that the mascot's bbox (user units 0 to 93.2 of the 108 unit viewBox)
   clears the top of the viewport under this translate with a few px to spare, so there is nothing
   to fade out; the fade only ever hid the movement. Nothing clips it on the way up: .brand-mark
   keeps overflow visible, and the header cannot clip or it would cut off the open mobile menu. */
.brand-logo-svg #creature{transform:translateY(calc(-72px * var(--nav-p)))}
.brand-logo-svg #creature-eyes{transform-origin:121.5px 57.2px;animation:nmible-blink 4s infinite}
@keyframes nmible-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
/* The compaction is two states with a transition between them, not a value tracking scroll.
   The header's visible height changes, so the glass filling it has to re-render its blur at new
   bounds whenever that height moves; doing that on every frame of the first 220px is what made
   iOS stutter, while the same blur over the same scrolling content is smooth once the height
   holds still. Two states means one geometry change per direction instead of sixty. Registered
   as a @property above, which is what lets one transition carry every rule that reads it. */
/* --nav-g drives everything that reflows, --nav-p everything that only paints. Listing both
   animates the compaction as one smooth move; dropping --nav-g from the transition makes the
   geometry step in a single frame instead, so the blurred glass re-renders at new bounds once
   rather than for the length of the transition. */
.site-header.nav-js{transition:--nav-p var(--nav-t-paint) cubic-bezier(.4,0,.2,1),--nav-g var(--nav-t-geom) cubic-bezier(.4,0,.2,1)}
.site-header.nav-js.is-compact{--nav-p:1;--nav-g:1}
/* .nav-js only arrives once main.js is wired up, so with scripts disabled the glass is simply
   always on rather than never on. */
.site-header::before{opacity:1}
.site-header.nav-js::before{opacity:var(--nav-p)}
/* The global reduced-motion reset cuts transition-duration to near zero, which leaves the two
   states intact and simply snaps between them. Nothing to add here. */
@media (prefers-reduced-motion:reduce){.brand-logo-svg #creature-eyes{animation:none}}.top-gradient-band{padding-top:var(--site-header-h)}.nav-link{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));color:#f8fcfaf5}.nav-link:hover{color:#fff}.mobile-nav-toggle{border-radius:var(--radius-lg);border-style:var(--tw-border-style);padding:calc(var(--spacing) * 3);border-width:1px;justify-content:center;align-items:center;display:inline-flex}@media (min-width:48rem){.mobile-nav-toggle{display:none}}.mobile-nav-toggle{color:#f4f8fb;background:#ffffff0f;border-color:#cbd9e842}@media (min-width:48rem){}.skip-link{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link:focus{clip-path:none;white-space:normal;width:auto;height:auto;top:calc(var(--spacing) * 4);left:calc(var(--spacing) * 4);z-index:50;border-radius:var(--radius-md);background-color:var(--color-white);padding:0;padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);margin:0;position:absolute;overflow:visible}.skip-link{color:var(--text);box-shadow:0 0 0 3px #0f766e2e}a:focus-visible,button:focus-visible,[role=button]:focus-visible{outline-offset:3px;outline:3px solid #0b7a66e6}.nav-link:focus-visible,.cta-primary:focus-visible,.cta-secondary:focus-visible,.mobile-nav-toggle:focus-visible,.mobile-nav-sheet a:focus-visible,.case-studies-nav:focus-visible,.contact-email:focus-visible{border-radius:.9rem;box-shadow:0 0 0 4px #d4f7ebeb}.pill{border-style:var(--tw-border-style);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide);border-width:1px;border-color:var(--border);color:var(--muted);border-radius:3.40282e38px;align-items:center;display:inline-flex}.section-title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}@media (min-width:48rem){.section-title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}.section-intro{max-width:var(--container-3xl)}.section-intro p{margin-top:calc(var(--spacing) * 3);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:calc(var(--spacing) * 7);line-height:calc(var(--spacing) * 7)}@media (min-width:48rem){.section-intro p{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.section-intro p{color:var(--muted)}.section-kicker{margin-bottom:calc(var(--spacing) * 3);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);text-transform:uppercase;font-family:var(--font-body);letter-spacing:.2em;color:#0f766e;font-size:.6875rem}h2.section-kicker{--tw-leading:var(--leading-normal);font-size:.6875rem;line-height:var(--leading-normal);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);text-transform:uppercase;font-family:var(--font-body);letter-spacing:.2em;color:#0f766e}.section-chapter{border-top:1px solid #bfd0dd9e}.section-panel{border-top:1px solid #abdfcc75;position:relative}.section-panel:before{content:"";pointer-events:none;background:linear-gradient(#e2f8ef5e 0%,#e2f8ef00 100%);width:100%;height:96px;position:absolute;top:-1px;left:0}.section-panel-light{color:#163048;background:linear-gradient(#fafefcfc 0%,#f7fdfa 100%)}.top-gradient-band{background-color:#EDF8F2;background-image:linear-gradient(180deg,#04322B 0%,#053930 4%,#064036 8%,#07473B 12%,#084E41 16%,#0A5748 20%,#0C6150 24%,#0C6E59 28%,#0E7B63 32%,#12896D 36%,#199676 40%,#23A27F 44%,#2DAD88 48%,#37B890 52%,#40C399 56%,#4ACDA1 60%,#55D5A9 64%,#67DCB2 68%,#7BE1BB 72%,#8FE5C4 76%,#A1E9CD 80%,#B1EDD5 84%,#C0F0DC 88%,#D0F3E4 92%,#DEF5EB 96%,#EDF8F2 100%);background-repeat:no-repeat;background-size:100% 100%;margin-top:-1px;position:relative}.top-gradient-band:before{content:"";pointer-events:none;background:radial-gradient(circle at 18% -4%,#65e8bc38 0%,#65e8bc00 28%),radial-gradient(circle at 84% 10%,#85f1cd2e 0%,#85f1cd00 26%),linear-gradient(#04211d 0%,#0a352e 100%);height:8rem;position:absolute;top:-8rem;left:0;right:0}.top-gradient-band>section{background:0 0}.top-gradient-band .section-panel{border-top-color:#0000}.top-gradient-band .section-panel:before,.top-gradient-band .section-panel:after,.top-gradient-band .section-divider-shell:before{display:none}.top-gradient-band .hero-title,.top-gradient-band .hero-copy .signal-value{color:#f8fffc}.top-gradient-band .hero-lead{color:#fff;text-shadow:0 2px 14px #05181333}.top-gradient-band .cta-secondary{color:#f8fffc;background:#ffffff24;border-color:#f4fbf857}.top-gradient-band .cta-secondary:hover{background:#ffffff1f}.top-gradient-band .signal-card{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:linear-gradient(#051e1952 0%,#ffffff1a 100%);border-color:#e3f4ed33;box-shadow:0 18px 38px #04091333}.top-gradient-band .signal-label{color:#c6f8e5f5}.top-gradient-band .signal-note{color:#e9f3efd6}.top-gradient-band .section-kicker{color:#0d5f4c}.top-gradient-band .section-panel-light{color:#163048;background:0 0}.top-gradient-band .section-panel-light .trust-proof{background:#ffffff94;border-color:#d6e0eabd;box-shadow:0 14px 26px #4a5c7914}.site-header .cta-secondary{color:#f8fffc;background:#ffffff1f;border-color:#f4fbf852}.site-header .cta-secondary:hover{background:#ffffff1f}.section-panel-light-soft{background:radial-gradient(circle at top,#65e8bc0c 0%,#65e8bc00 44%),linear-gradient(#f5fcf9fc 0%,#f2fbf7fc 52%,#f7fdfa 100%)}.section-panel-light-soft:before{background:linear-gradient(#aae2cb12 0%,#f5fcf900 100%)}.section-panel-light-soft:after{background:linear-gradient(#fafefc00 0%,#f5fcf96a 100%)}.section-panel-dark-soft{background:radial-gradient(circle at top,#65e8bc0e 0%,#65e8bc00 38%),linear-gradient(#eef9f4fa 0%,#ecf8f2fc 52%,#f0faf5 100%)}.section-panel-dark-soft:before{background:linear-gradient(#aae2cb15 0%,#eef9f400 100%)}.section-panel-light:before{background:linear-gradient(#aae2cb15 0%,#fcfffe00 100%)}.section-panel-light:after{content:"";pointer-events:none;background:linear-gradient(#f5fcf900 0%,#f5fcf96c 100%);width:100%;height:88px;position:absolute;bottom:-1px;left:0}.section-panel-light .section-title,.section-panel-light .split-lead,.section-panel-light h3,.section-panel-light strong,.section-panel-light .nav-link,.section-panel-light .signal-value,.section-panel-light .split-list strong{color:#163048}.section-panel-light .section-kicker,.section-panel-light .signal-label{color:#0f766e}.section-panel-light p,.section-panel-light li,.section-panel-light .section-intro p,.section-panel-light .signal-note,.section-panel-light .split-list li{color:#516579}.section-panel-light .card{background:#fffffffa;border-color:#abdfcc9e;box-shadow:0 16px 32px #53786914}.section-panel-light .card-accent{background:linear-gradient(#fffffffc 0%,#f4fbf8 100%);border-color:#abdfcc9e;box-shadow:0 18px 34px #53786914}.section-panel-light .split-list li{border-top-color:#abdfcc57}.section-panel-light .trust-proof{color:#25415d;background:#fcfffee6;border-color:#abdfcc8a}.section-panel-dark-soft .card-accent{background:linear-gradient(#fffffffc 0%,#f3fbf7 100%);border-color:#abdfcc94;box-shadow:0 18px 34px #53786914}.section-divider-shell{position:relative}.section-divider-shell:before{content:"";background:linear-gradient(90deg,#bfd0dd00,#bfd0ddcc,#bfd0dd00);width:100%;height:1px;position:absolute;inset:0 auto auto 0}.split-lead{max-width:var(--container-xl);font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-leading:var(--leading-snug);line-height:var(--leading-snug);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}@media (min-width:48rem){.split-lead{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}.split-lead{font-family:var(--font-heading);letter-spacing:-.02em}.split-list{margin:0;padding:0;list-style:none}.split-list li{gap:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 3);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);color:#516579;border-top:1px solid #bfd0ddb3;display:flex}.split-list li:first-child{border-top:none;padding-top:0}.split-list strong{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--text);flex-shrink:0;min-width:10.5rem}@media (max-width:767px){.split-list strong{min-width:0;margin-bottom:.25rem;display:block}}.card{border-radius:var(--radius-2xl);border-style:var(--tw-border-style);padding:calc(var(--spacing) * 6);background:var(--surface);border-width:1px;border-color:var(--border)}.card-accent{background:linear-gradient(170deg,#fffffffc 0%,#f3f8fb 100%);border-color:#bfd0ddb8;box-shadow:0 16px 32px #5c789214}.hero-grid{align-items:center;gap:calc(var(--spacing) * 10);display:grid}@media (min-width:64rem){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.hero-copy{max-width:var(--container-3xl)}.hero-title{margin-top:calc(var(--spacing) * 3);font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}@media (min-width:48rem){.hero-title{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}}.hero-lead{margin-top:calc(var(--spacing) * 6);max-width:var(--container-3xl);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-leading:calc(var(--spacing) * 8);line-height:calc(var(--spacing) * 8)}@media (min-width:48rem){.hero-lead{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.hero-lead{color:#f5fbf8f2}.hero-actions{margin-top:calc(var(--spacing) * 10);align-items:center;gap:calc(var(--spacing) * 4);flex-wrap:wrap;display:flex}.hero-highlights{margin-top:calc(var(--spacing) * 10);gap:calc(var(--spacing) * 3);display:grid}@media (min-width:40rem){.hero-highlights{grid-template-columns:repeat(3,minmax(0,1fr))}}.signal-card{border-radius:var(--radius-2xl);border-style:var(--tw-border-style);padding:calc(var(--spacing) * 4);background:linear-gradient(#fffffffa 0%,#f4f9fc 100%);border-width:1px;border-color:#bfd0ddb8;box-shadow:0 16px 32px #5c789214}.signal-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-tracking:.16em;letter-spacing:.16em;text-transform:uppercase;color:#0f766e}.signal-value{margin-top:calc(var(--spacing) * 3);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-leading:var(--leading-snug);line-height:var(--leading-snug);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.signal-note{margin-top:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6);color:var(--muted)}.hero-panel{padding:calc(var(--spacing) * 0);position:relative;overflow:visible}@media (min-width:48rem){.hero-panel{padding:calc(var(--spacing) * 0)}}.hero-panel{box-shadow:none;background:0 0;border:0}.globe-canvas{aspect-ratio:1/1}.globe-canvas.is-draggable{cursor:grab;touch-action:none}.globe-canvas.is-draggable:active{cursor:grabbing}.globe-scene{min-height:560px;margin-inline:auto;position:relative}.globe-canvas,.globe-poster{width:min(100%,621px);height:auto;margin-inline:auto;display:block}.globe-halo{border-radius:9999px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.globe-halo-outer{background:radial-gradient(circle,#92c5ff29 0%,#92c5ff08 48%,#92c5ff00 72%);width:min(72vw,300px);height:min(72vw,300px)}.globe-halo-inner{width:min(72vw,212px);height:min(72vw,212px);box-shadow:0 0 48px #7de3ff29}.globe-caption{z-index:2;background:#1c2a3dc7;border:1px solid #7d9dc047;border-radius:1rem;gap:.25rem;max-width:180px;padding:.8rem .95rem;display:grid;position:absolute;box-shadow:0 18px 38px #0a131f38}.globe-caption-top{top:1rem;left:0}.globe-caption-bottom{max-width:200px;bottom:-.25rem;right:-.25rem}.globe-caption-label{letter-spacing:.14em;text-transform:uppercase;color:#a8cae8;font-size:.72rem;font-weight:600}.globe-caption-copy{color:#d7e4f0;font-size:.85rem;line-height:1.45}.hero-panel-copy{margin-top:calc(var(--spacing) * 6);gap:calc(var(--spacing) * 4);display:grid}.hero-panel-card{border-radius:var(--radius-2xl);border-style:var(--tw-border-style);padding:calc(var(--spacing) * 4);background:#202f42b8;border-width:1px;border-color:#7c9abb57}.hero-panel-card p:last-child{margin-top:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6);color:#cad8e5}.cta-primary{border-radius:var(--radius-xl);padding-inline:calc(var(--spacing) * 7);padding-block:calc(var(--spacing) * 4);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);background:var(--primary);color:#fff;justify-content:center;align-items:center;display:inline-flex;box-shadow:0 16px 30px #0a4f432e}.cta-primary:hover{background:var(--primary-strong)}.cta-secondary{border-radius:var(--radius-lg);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);border-width:1px;border-color:var(--border);color:var(--text);justify-content:center;align-items:center;display:inline-flex}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.payout-marquee-strip{transform:none!important}}.cta-secondary:hover{background:#0f766e14}.brand-wordmark{font-family:var(--font-brand);letter-spacing:.01em;color:var(--text);text-transform:lowercase;font-size:clamp(1.7rem,2vw,2.15rem);font-weight:600;line-height:1;display:inline-block}.brand-logo-image{object-fit:contain;width:auto;height:4rem;display:block}.contact-inline{border-top:1px solid #bfd0dd9e}.contact-card{background:radial-gradient(circle at 100% 0,#0f766e14 0%,#0f766e00 34%),linear-gradient(#fffffffa 0%,#f4f9fcfa 100%);border:1px solid #bfd0ddb8;border-radius:1.75rem;gap:2rem;padding:clamp(1.6rem,3vw,2.4rem);display:grid;position:relative;overflow:hidden;box-shadow:0 24px 40px #5c789214}.contact-card:before{content:"";background:linear-gradient(90deg,#0f766e00,#0f766e80,#0f766e00);width:100%;height:1px;position:absolute;inset:0 auto auto 0}.contact-copy{z-index:1;gap:1.25rem;display:grid;position:relative}.contact-spotlight{z-index:1;background:#fcfefffa;border:1px solid #bfd0ddb8;border-radius:1.35rem;align-content:start;gap:1rem;padding:1.5rem 1.55rem;display:grid;position:relative;box-shadow:0 12px 24px #5c789214}.contact-label{letter-spacing:.16em;text-transform:uppercase;color:#0f766e;font-size:.78rem;font-weight:600;line-height:1.2}.contact-email{font-family:var(--font-brand);color:#102033;white-space:nowrap;font-size:clamp(1.35rem,1.65vw,1.8rem);line-height:1;text-decoration:none}.contact-note{color:#425970;max-width:38rem;margin:0;line-height:1.7}.contact-supporting{color:#425970;max-width:24rem;margin:0;line-height:1.6}.case-studies-nav{color:#163048;background:#fffffffa;border:1px solid #bfd0ddb8;border-radius:9999px;justify-content:center;align-items:center;width:3rem;height:3rem;transition:transform .18s,background-color .18s;display:inline-flex;box-shadow:0 10px 24px #5c789214}.case-studies-nav:hover{background:#fffffff0}.case-studies-nav[data-case-studies-prev]:hover{transform:translate(-2px)}.case-studies-nav[data-case-studies-next]:hover{transform:translate(2px)}.case-studies-nav span{font-size:1.25rem;line-height:1}.contact-copy .section-intro{gap:.8rem;display:grid}.contact-copy .section-intro p{margin:0}.footer-meta{gap:.75rem;margin-bottom:1.5rem;display:grid}.footer-meta .nav-link{color:inherit}.footer-meta .nav-link:hover{color:inherit;text-decoration:underline}.footer-locations{max-width:56rem}.footer-locations-title{color:var(--text);font-size:1rem;font-weight:600;line-height:1.4}.footer-locations-grid{gap:2rem 3rem;margin-top:.75rem;display:grid}.footer-location-card{max-width:22rem}.footer-location-name{color:var(--text);font-size:1rem;font-weight:500;line-height:1.4}.footer-location-flag{vertical-align:-.12rem;border-radius:2px;width:1.35rem;height:auto;margin-right:.45rem;display:inline-block}.footer-location-address{color:#425970;margin-top:.35rem;font-size:1rem;line-height:1.6}.footer-disclosure{color:#425970;border-top:1px solid #bfd0ddb8;max-width:58rem;margin-top:1.75rem;padding-top:1.25rem;font-size:.875rem;line-height:1.7}.footer-disclosure a{color:#0f766e;text-underline-offset:.18em;font-weight:600;text-decoration:underline}.footer-disclosure a:hover{color:#0a4f43}.footer-trademarks{color:#7a8fa3;margin-top:.85rem;font-size:.75rem;line-height:1.6}.terminal-layout{position:relative}
/* Nudge the terminal render within its column: translate x moves it right, y moves it up. Only from
   1024px up — a transform still counts towards scrollable overflow, so at tablet widths the 50px
   pushed past the viewport and scrolled the whole page sideways. */
.terminal-visual{justify-self:center;width:min(100%,320px);margin-top:-1.25rem;padding:.5rem;position:relative}
@media (min-width:64rem){.terminal-visual{transform:translate(50px,-30px)}}
.terminal-image{object-fit:contain;width:100%;height:auto;display:block}.workflow-shell{z-index:1;position:relative}.trust-proof{align-items:center;gap:calc(var(--spacing) * 2);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);background:#ffffffeb;border-width:1px;border-color:#bfd0ddb8;border-radius:3.40282e38px;display:inline-flex}.trust-proof-image{box-shadow:none;background:0 0;border:none;border-radius:1rem;padding:.35rem .65rem}.trust-proof-image:first-child{padding-left:0}.trust-proof-logo{object-fit:contain;mix-blend-mode:multiply;width:auto;max-width:190px;height:32px;display:block}.trust-proof-logo-iso{filter:contrast(1.08);max-width:260px;height:54px}.trust-proof-logo-visa{filter:saturate(.92)opacity(.96);max-width:140px;height:36px}.trust-proof-logo-soc2{filter:contrast(1.04);max-width:148px;height:52px}.payout-logos{background:radial-gradient(circle,#fffffffa 0%,#f7fbfdf5 36%,#e1eaf1b3 62%,#eff5f9f5 100%);border-color:#bfd0ddb8;overflow:hidden}.payout-marquee{width:100%;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 7%,#000 93%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 7%,#000 93%,#0000 100%)}.payout-marquee-strip{will-change:transform;align-items:center;gap:0;width:max-content;min-width:max-content;display:flex}.payout-track{flex:none;align-items:center;gap:2.5rem;min-width:max-content;padding-right:2.5rem;display:flex}.payout-logo{object-fit:contain;flex:none;width:auto;max-width:none;height:28px;display:block}.payout-logo-faster-payments{height:34px}.payout-logo-bank-transfer{height:34px}.payout-logo-wallet{height:42px}@media (min-width:48rem){}@media (max-width:767px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}.hero-copy{max-width:none}.hero-title{font-size:clamp(2.5rem,10vw,3.75rem);line-height:.98}.hero-lead{font-size:1.0625rem;line-height:1.75}.hero-actions{margin-top:2rem}.hero-panel{justify-self:center;width:100%}.contact-card{padding:1.35rem}.payout-track{gap:2.25rem;padding-right:2.25rem}.payout-marquee-strip{will-change:transform}.payout-logo-sepa,.payout-logo-discover,.payout-logo-ach,.payout-logo-bacs{height:26px}.payout-logo-stablecoin{height:28px}.payout-logo-apple-pay,.payout-logo-google-pay{height:30px}.payout-logo-visa-direct,.payout-logo-faster-payments,.payout-logo-bank-transfer{height:36px}.terminal-visual{justify-self:center;width:min(100%,260px);margin-top:0;padding:0;transform:none}.globe-scene{min-height:clamp(280px,88vw,390px)}.globe-canvas,.globe-poster{width:min(92vw,360px)}}@media (min-width:768px) and (max-width:1023px){.hero-grid{grid-template-columns:1fr;gap:3rem}.hero-copy{max-width:44rem}.hero-panel{justify-self:center;width:100%}.globe-scene{min-height:clamp(420px,62vw,560px)}.globe-canvas,.globe-poster{width:min(100%,470px)}}@media (min-width:768px){.contact-card{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:start}.footer-meta{grid-template-columns:1fr auto 1fr;align-items:center}.footer-meta .nav-link{justify-self:end}.footer-locations-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}@media (max-width:767px){.hero-highlights{grid-template-columns:1fr}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}/* hero type scale */@media (min-width:64rem){.hero-title{font-size:clamp(2.625rem,3.5vw,3rem);line-height:1.06}}@media (min-width:48rem) and (max-width:1023.98px){.hero-title{font-size:3rem;line-height:1.06}}@media (max-width:1023.98px){.hero-trust{margin-top:2.5rem}}@media (max-width:767.98px){.hero-title{font-size:clamp(2.5rem,10vw,3rem)}}/* hero top padding */.hero-section{padding-top:2rem}@media (min-width:48rem){.hero-section{padding-top:2.875rem}}@media (min-width:64rem){.hero-section{padding-top:3.875rem}}/* hero seam + cta */.hero-section{padding-bottom:2rem}@media (min-width:48rem){.hero-section{padding-bottom:2.5rem}}@media (min-width:64rem){.hero-section{padding-bottom:2.5rem}}.top-gradient-band .hero-title{color:#fff}.top-gradient-band .hero-lead{color:#DCF2E7;font-weight:500;text-shadow:0 0 1px rgba(3,45,38,.40),0 0 8px rgba(3,45,38,.24)}.cta-primary{gap:.625rem;border-radius:.75rem;background:#04322B;color:#EDF8F2;box-shadow:inset 0 1px 0 #ffffff1f;transition:background .18s ease,color .18s ease}.cta-primary:hover{background:#0A5748}.cta-primary .cta-arrow{flex:none;transition:transform .18s ease}.cta-primary:hover .cta-arrow{transform:translateX(3px)}.cta-primary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}@media (prefers-reduced-motion:reduce){.cta-primary,.cta-primary .cta-arrow{transition:none}.cta-primary:hover .cta-arrow{transform:none}}/* hero breathing room */.shell{max-width:clamp(72rem,100% - 8rem,80rem)}@media (min-width:64rem){.hero-grid{column-gap:clamp(2.5rem,3.6vw,5rem)}.hero-title{font-size:clamp(2.625rem,3.5vw,3.125rem)}.hero-section{padding-top:4.5rem;padding-bottom:3.5rem}}/* talk-to-us pill */.cta-pill{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-family:var(--font-body);font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1;padding:15px 34px;border:0;border-radius:999px;background:#5EE5AE;color:#04322B;box-shadow:0 10px 26px rgba(4,50,43,.35);transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .22s ease,background .22s ease}.cta-pill:hover{background:#7FF0C2;color:#04322B;transform:translateY(-2px);box-shadow:0 16px 34px rgba(4,50,43,.45)}.cta-pill:active{transform:translateY(0);box-shadow:0 10px 26px rgba(4,50,43,.35)}.cta-pill:focus-visible{outline:2px solid #7FE3BA;outline-offset:2px}.mobile-nav-sheet .cta-pill,.cta-pill-block{display:flex;justify-content:center;width:100%}.mobile-nav-sheet .cta-pill{background:#5EE5AE;color:#04322B;border-radius:999px;padding:16px 26px;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1}.mobile-nav-sheet .cta-pill:hover{background:#7FF0C2;color:#04322B}@media (max-width:600px){.cta-pill{padding:14px 26px;font-size:16px}}@media (prefers-reduced-motion:reduce){.cta-pill{transition:box-shadow .22s ease,background .22s ease}.cta-pill:hover,.cta-pill:active{transform:none}}.cta-pill-outline{background:#04322B;color:#5EE5AE;border:1px solid #5EE5AE;box-shadow:none;transition:background .2s ease,color .2s ease}.cta-pill-outline:hover{background:#5EE5AE;color:#04322B;transform:none;box-shadow:none}.cta-pill-outline:active{transform:none;box-shadow:none}
/* loading poster and the no-script notice */.globe-poster{aspect-ratio:1/1;transition:opacity .25s ease;pointer-events:none}.globe-poster.is-spent{opacity:0}.globe-canvas{opacity:0;pointer-events:none;transition:opacity .25s ease}.globe-canvas.is-live{opacity:1;pointer-events:auto}.globe-canvas{position:absolute;top:0;left:50%;transform:translateX(-50%)}.globe-noscript{position:absolute;right:0;bottom:0;margin:0;display:inline-flex;align-items:center;gap:.4rem;padding:.375rem .75rem;border:1px solid rgba(94,229,174,.35);border-radius:999px;background:rgba(4,50,43,.55);color:#DCF2E7;font-size:.75rem;font-weight:600;letter-spacing:.02em;line-height:1;white-space:nowrap;backdrop-filter:blur(6px)}@media (prefers-reduced-motion:reduce){.globe-poster,.globe-canvas{transition:none}}
/* The right-hand box keeps the header row a two-child justify-between, so the nav links stay flush
   right on desktop exactly as they did when the CTA lived inside the nav. 1.5rem is the old
   gap-6 between the last link and the pill. */
.header-right{display:flex;align-items:center;gap:1.5rem}
.header-actions{display:flex;align-items:center;gap:.625rem}
/* A square icon button, so it overrides the padding compaction a few rules up: a text label could
   shrink with the header, an icon changing size mid-scroll reads as a glitch. 2.625rem keeps the
   tap target above the 44px guidance once the 1px border is counted. */
.site-header .mobile-nav-toggle{width:2.625rem;height:2.625rem;padding:0;flex:none}
.mobile-nav-toggle-icon{display:block;position:relative;width:1.125rem;height:.875rem}
.mobile-nav-toggle-icon span{position:absolute;left:0;width:100%;height:1.5px;border-radius:1px;background:#5EE5AE;transition:transform 220ms cubic-bezier(.4,0,.2,1),opacity 140ms linear}
.mobile-nav-toggle-icon span:nth-child(1){top:0}
.mobile-nav-toggle-icon span:nth-child(2){top:calc(50% - .75px)}
.mobile-nav-toggle-icon span:nth-child(3){bottom:0}
/* Morph to a cross off the same attribute main.js already flips, so the open state needs no class.
   Only transform and opacity move, which the compositor handles without repainting the glass. */
.mobile-nav-toggle[aria-expanded=true]{background:#5ee5ae1f;border-color:#5ee5ae73}
.mobile-nav-toggle[aria-expanded=true] .mobile-nav-toggle-icon span:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
.mobile-nav-toggle[aria-expanded=true] .mobile-nav-toggle-icon span:nth-child(2){opacity:0}
.mobile-nav-toggle[aria-expanded=true] .mobile-nav-toggle-icon span:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}
/* The pill now shares the row with the logo and the toggle, so it gives up some padding below the
   md breakpoint and a little more again on 320px-class phones. */
@media (max-width:47.99rem){.site-header .cta-pill{padding:11px 18px;font-size:15px}}
@media (max-width:22.5rem){.site-header .shell{padding-inline:1rem}.site-header .cta-pill{padding:11px 14px}.header-actions{gap:.5rem}}

/* In-page navigation. One knob for where an anchor lands, on the scroller itself, so it applies to
   every target without each one needing its own scroll-margin (there was a 4rem scroll-padding-top
   in the build output above; this replaces it). It is deliberately less than the fixed header's own
   height: every section carries 3rem or more of top padding, so tucking its top edge just under the
   bar still lands the eyebrow and heading clear of it, and none of the previous section shows.
   scroll-behavior is the smooth-scroll story with scripting off only: with main.js running, it
   animates the distance itself (engines disagree wildly on what "smooth" means) and suspends this
   while it does. The prefers-reduced-motion block further down already forces it back to auto. */
html{scroll-behavior:smooth;scroll-padding-top:3rem}

/* Scoped to the header so the footer's own .nav-link (Privacy Policy, on a light panel) keeps the
   colour the build output gives it. The gap is set here rather than with a utility class: the build
   output only carries the utilities the markup used when it was generated, and gap-7 was not one of
   them. */
.site-nav{position:relative;gap:1.75rem}
.site-header .nav-link{position:relative;padding-block:.35rem;font-size:.9375rem;font-weight:500;letter-spacing:-.005em;color:#e8f4efd9;text-decoration:none;transition:color .18s ease}
/* The section you are in reads as the brightest link in the row, which is the same white hover and
   focus resolve to. Nothing is drawn under it. */
.site-header .nav-link:hover,.site-header .nav-link:focus-visible,.site-header .nav-link[aria-current=page]{color:#fff;text-decoration:none}

/* The mobile sheet. Closed is the default state and lives in visibility/opacity rather than
   display, so it can animate; main.js only flips .is-open. */
.mobile-nav-sheet{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;padding:calc(var(--site-header-h) + .5rem) 1.5rem 2rem;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(180deg,rgba(4,33,29,.97) 0%,rgba(6,47,42,.98) 55%,rgba(4,50,43,.99) 100%);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .28s ease,transform .28s cubic-bezier(.4,0,.2,1),visibility 0s linear .28s}
.mobile-nav-sheet.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .28s ease,transform .28s cubic-bezier(.4,0,.2,1),visibility 0s}
.mobile-nav-links{display:flex;flex-direction:column;border-top:1px solid #5ee5ae1f}
.mobile-nav-links a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem .25rem;border-bottom:1px solid #5ee5ae1f;font-family:var(--font-heading);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:#f2fbf7;text-decoration:none;transition:color .18s ease,background .18s ease}
.mobile-nav-links a:active{background:#5ee5ae14;color:#fff}
.mobile-nav-links svg{flex:none;width:20px;height:20px;color:#5EE5AE;transition:transform .18s ease}
.mobile-nav-links a:active svg{transform:translateX(3px)}
/* The links that lost their place in the desktop bar. Small, so they read as secondary rather than
   as a second navigation of equal weight. */
.mobile-nav-secondary{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding:1.35rem .25rem 0}
.mobile-nav-secondary a{font-size:.9375rem;font-weight:500;color:#a9d8c6;text-decoration:none}
.mobile-nav-secondary a:active{color:#5EE5AE}
.mobile-nav-footer{margin-top:auto;padding-top:2rem;display:grid;justify-items:center;gap:.9rem}
.mobile-nav-email{font-family:var(--font-brand);font-size:1.0625rem;color:#a9d8c6;text-decoration:none}
/* The sheet's children fade up in sequence once it opens; --i is the row's place in that sequence. */
.mobile-nav-sheet>*{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s cubic-bezier(.4,0,.2,1)}
.mobile-nav-sheet.is-open>*{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 55ms + 60ms)}
.mobile-nav-sheet>:nth-child(2){--i:1}
.mobile-nav-sheet>:nth-child(3){--i:2}
/* The sheet is a child of the header, so it needs the header's own row lifted above it or it
   covers the logo and the button that closes it. */
.site-header .shell{position:relative;z-index:2}
/* The sheet carries its own call to action, so the header's copy of it steps aside rather than
   sitting two taps above the same link. */
body.nav-open .header-actions .cta-pill{opacity:0;pointer-events:none;transition:opacity .18s ease}
/* Scroll lock for the page behind the sheet. */
body.nav-open{overflow:hidden}
/* Above the breakpoint the desktop nav is the navigation, so neither the sheet nor its button has
   any business being reachable, however the viewport got there. */
@media (min-width:48rem){.mobile-nav-sheet{display:none}}
@media (prefers-reduced-motion:reduce){.mobile-nav-sheet,.mobile-nav-sheet>*{transition-duration:.01ms!important;transition-delay:0ms!important}}

/* These read as boxes now rather than a rule over each column, so they borrow .card and .card-accent
   from the product suite above and only add their own inner rhythm. The gutter is tighter than the
   ruled version needed, because each card carries its own padding. */
.capability-grid{grid-template-columns:1fr;gap:1.5rem;align-items:stretch}
.capability-card{display:flex;flex-direction:column;gap:.625rem}
.capability-card h3{--tw-leading:1.3;line-height:1.3;color:#163048}
.capability-card p{margin-top:0;font-size:1rem;line-height:1.6}
/* Three across only once each column can hold its copy without going ragged. Below that they stack. */
@media (min-width:64rem){.capability-grid{grid-template-columns:repeat(3,1fr);gap:1.75rem}}

/* Roles reuses the capability card, and only adds the eyebrow above the heading. The eyebrow sits
   tighter to its heading than the card's own rhythm, so it reads as a label on it rather than a line
   of its own. */
.role-card .role-eyebrow{margin:0 0 -.25rem;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0f766e}

/* Case studies. The cards carry CSS-drawn mockups of the product's own UI rather than stock
   photography, so the section stays on-brand without any image weight. Palette is the site's own
   (teal #0f766e, navy #163048) rather than the reference's PASS tokens. */
.case-studies{--cs-gap:1.5rem;--cs-peek:4.125rem;display:grid;gap:1.25rem}
.case-studies-controls{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.case-studies-dots{display:flex;align-items:center;gap:.375rem}
/* The active dot stretches rather than swapping colour alone, so the position reads at a glance. */
.case-studies-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#bfd0dd;cursor:pointer;transition:width .3s ease-in-out,background .18s ease}
.case-studies-dot[aria-current=true]{width:28px;background:#0f766e}
.case-studies-dot:focus-visible{outline:2px solid #0f766e;outline-offset:3px}
.case-studies-arrows{display:flex;align-items:center;gap:.75rem}
.case-studies-nav[disabled]{opacity:.4;cursor:default;box-shadow:none}
.case-studies-nav[disabled]:hover{transform:none;background:#fffffffa}
/* A real scroll container, so trackpad and touch swiping work with no JS involved; main.js only
   drives the buttons and keeps the dots in step. */
.case-studies-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.case-studies-viewport::-webkit-scrollbar{display:none}
/* The track stays viewport-width so the card basis below can be a percentage of what is visible;
   the cards refuse to shrink, so they overflow to the right and the viewport scrolls. */
.case-studies-track{display:flex;gap:var(--cs-gap)}
/* Three across with the fourth peeking past the right edge. That peek is the affordance that says
   "there is more here", so it is reserved off the row width rather than left to chance. */
.case-study-card{flex:0 0 calc((100% - 2 * var(--cs-gap) - var(--cs-peek)) / 3);display:flex;flex-direction:column;background:#fff;border:1px solid #bfd0ddb8;border-radius:1rem;overflow:hidden;transition:border-color .15s ease}
.case-study-card:hover{border-color:#0f766e}
.case-study-media{height:210px;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;gap:.625rem;background:#edf4f8;border-bottom:1px solid #bfd0ddb8}
.case-study-body{padding:1.5rem;display:flex;flex-direction:column;gap:.75rem}
.case-study-heading{display:flex;align-items:center;gap:.5rem}
.case-study-number{font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;color:#0f766e}
.case-study-card h3{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:#163048}
.case-study-card p{margin:0;font-size:.9375rem;line-height:1.6;text-wrap:pretty}

/* Mockup parts. Every one is boxes and borders, no assets. */
.cs-row{display:flex;align-items:center;gap:.625rem;padding:.625rem .75rem;background:#fff;border:1px solid #bfd0ddb8;border-radius:.5rem}
.cs-tick{width:14px;height:14px;border-radius:3px;background:#1f9d76}
.cs-bar{flex:1;height:6px;border-radius:3px;background:#dbe6ee}
.cs-status{font-size:11px;font-weight:600;color:#1f9d76}
.cs-connector{display:flex;justify-content:center;padding:2px 0}
.cs-connector span{width:1px;height:14px;background:#bfd0dd}
.cs-payment{display:flex;align-items:center;justify-content:space-between;padding:.75rem .875rem;background:#0f766e;border-radius:.5rem}
.cs-payment span:first-child{font-size:12px;font-weight:500;color:#e6fbf4bf}
.cs-payment span:last-child{font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.cs-window{background:#fff;border:1px solid #bfd0ddb8;border-radius:.5rem;overflow:hidden}
.cs-window-bar{height:34px;display:flex;align-items:center;gap:.5rem;padding:0 .75rem;background:#0f766e}
.cs-window-bar i{display:block;width:16px;height:16px;border-radius:4px;background:#ffffffe6}
.cs-window-bar b{display:block;width:64px;height:6px;border-radius:3px;background:#ffffff80}
.cs-window-body{display:flex;flex-direction:column;gap:.5rem;padding:.75rem}
.cs-line{display:block;height:6px;border-radius:3px;background:#dbe6ee}
.cs-themes{display:flex;align-items:center;gap:.5rem}
.cs-themes>span:first-child{font-size:11px;font-weight:500;color:#516579}
/* The real tenant theme primaries, so the swatch row is not decorative filler. */
.cs-swatches{display:flex;gap:.375rem;margin-left:auto}
.cs-swatches i{display:block;width:20px;height:20px;border-radius:999px;border:2px solid #fff;box-shadow:0 1px 2px #0000000d}
.case-study-media-phone{flex-direction:row;align-items:flex-end;justify-content:center;padding:1.5rem 1.5rem 0}
/* The phone bleeds off the bottom edge rather than sitting fully inside the panel, which reads as a
   device rather than a picture of one. */
.cs-phone{width:170px;display:flex;flex-direction:column;gap:.625rem;padding:.875rem;background:#fff;border:1px solid #bfd0ddb8;border-radius:16px 16px 0 0;box-shadow:0 8px 20px #5c789224}
.cs-phone-head{display:flex;align-items:center;justify-content:space-between}
.cs-phone-head>span:first-child{font-size:11px;font-weight:600;color:#163048}
.cs-balance{display:flex;flex-direction:column;gap:.25rem;padding:.75rem;background:#0f766e;border-radius:.5rem}
.cs-balance small{font-size:9px;color:#e6fbf4a6}
.cs-balance strong{font-size:20px;font-weight:700;letter-spacing:-.02em;color:#fff}
.cs-txn{display:flex;align-items:center;justify-content:space-between}
.cs-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.cs-tile{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem .5rem;background:#fff;border:1px solid #bfd0ddb8;border-radius:.5rem;color:#0f766e}
.cs-tile span{font-size:10px;font-weight:500;color:#516579}
.cs-statuses{display:flex;flex-direction:column;gap:.5rem;padding:.625rem .75rem;background:#fff;border:1px solid #bfd0ddb8;border-radius:.5rem}
.cs-statuses>div{display:flex;align-items:center;justify-content:space-between}
.cs-statuses span:first-child{font-size:11px;color:#516579}
.cs-badge{display:inline-flex;align-items:center;height:18px;padding:0 .5rem;border-radius:999px;font-size:9px;font-weight:600;white-space:nowrap}
.cs-badge-pending{border:1px solid #c2620f;color:#c2620f}
.cs-badge-approved,.cs-badge-paid{background:#1f9d76;color:#fff}

.case-studies-cta{margin-top:2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.75rem 2rem;background:#fffffff0;border:1px solid #bfd0ddb8;border-radius:1.35rem;box-shadow:0 12px 24px #5c789214}
.case-studies-cta p{margin:0;font-size:1.0625rem;font-weight:500;text-wrap:pretty}
.section-panel-light .case-studies-cta p{color:#163048}
.case-studies-cta .cta-pill{flex:none}

/* One card per view below md. The peek is dropped there because a partial card on a phone reads as
   a layout fault rather than an invitation, and the dots carry the affordance instead. */
@media (max-width:47.99rem){
  .case-studies{--cs-gap:1rem;--cs-peek:0px}
  .case-study-card{flex-basis:100%}
  .case-studies-viewport{scroll-snap-type:x mandatory}
  .case-study-card{scroll-snap-align:start}
  .case-studies-cta{flex-direction:column;align-items:flex-start;gap:1.25rem;padding:1.5rem}
  .case-studies-cta .cta-pill{width:100%}
}

/* Flat rectangular CTA rather than the green pill: the pill is the site's primary action and it
   outshouted the four cards above it. */
.case-studies-cta-link{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;padding:.75rem 1.5rem;border-radius:.375rem;background:#0f766e;color:#fff;font-size:.875rem;font-weight:600;line-height:1.35;text-align:center;text-decoration:none;transition:background .15s ease}
.case-studies-cta-link:hover{background:#0b5f59}
.case-studies-cta-link:focus-visible{outline:2px solid #0f766e;outline-offset:2px}

/* The section washes and edge fades above are tuned down from where they started: every fade band
   alpha is at roughly 45% of its old value and each wash's vertical travel is pulled 60% of the way
   back to its own midpoint, so the effect still separates one section from the next without
   announcing itself. */

/* Testimonials. Two readings of the same four quotes: one featured at full weight with a rail of
   customers beside it, and below the rail's breakpoint the same scroll carousel the case studies
   use, so a phone meets one pattern rather than two. Only main.js hides figures, never CSS, so the
   three that are not showing are out of the accessibility tree too. */
.testimonials{display:grid;gap:1.5rem}
.testimonials-stage{display:grid;gap:1.25rem}
.testimonials-controls{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.testimonials-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;padding-bottom:1.5rem}
.testimonials-viewport::-webkit-scrollbar{display:none}
.testimonials-track{display:flex;gap:1rem;align-items:stretch}
.testimonial-featured{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;gap:1.5rem;margin:0;padding:2rem;background:linear-gradient(#fffffffc 0%,#f4faf7fa 100%);border:1px solid #bfd0ddb8;border-radius:1.35rem;box-shadow:0 12px 24px #5c789214}
.testimonial-featured[hidden]{display:none}
.testimonial-mark{display:block;height:1.75rem;font-family:var(--font-heading);font-size:4rem;line-height:1;color:#0f766e;opacity:.9;user-select:none}
/* Two paragraphs, never one concatenated string: each carries its own quotation marks because they
   are two separate passages of what the customer said. */
.testimonial-quote{display:flex;flex-direction:column;gap:1rem;margin:0;color:#163048;font-size:1.1875rem;line-height:1.65;letter-spacing:-.01em;text-wrap:pretty}
.testimonial-quote p{margin:0;font-size:inherit;line-height:inherit}
/* Pinned to the bottom so the attribution sits on the same line whichever quote is showing. */
.testimonial-caption{display:flex;align-items:center;gap:1rem;margin-top:auto;padding-top:1.5rem;border-top:1px solid #bfd0ddb8}
.testimonial-who{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.testimonial-name{font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:#163048}
.testimonial-role{font-size:.8125rem;color:#516579}
.testimonial-avatar{flex:none;display:block;width:40px;height:40px;border-radius:9999px;overflow:hidden;background:#dbe6ee;border:1px solid #bfd0ddb8}
.testimonial-avatar-lg{width:56px;height:56px}
/* The crop rides on the wrapper as custom properties, so the rail's 40px copy and the featured
   56px one frame the same face identically from one declaration in the markup. */
.testimonial-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--avatar-pos,center);transform:scale(var(--avatar-zoom,1))}
.testimonial-avatar img[hidden]{display:none}

.testimonials-rail{display:none;flex-direction:column;gap:.5rem}
.testimonials-rail button{display:flex;align-items:center;gap:.875rem;width:100%;min-height:4.5rem;padding:.875rem 1rem;text-align:left;font-family:var(--font-body);color:#163048;background:#fffffff0;border:1px solid #bfd0ddb8;border-radius:1rem;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.testimonials-rail button:hover{border-color:#0f766e}
/* Teal, the same accent the case study mockups above are built from, so the one filled element
   in the section belongs to the pattern it sits under. */
.testimonials-rail button[aria-pressed=true]{background:#0f766e;border-color:#0f766e;color:#fff;box-shadow:0 10px 22px #0f766e2e}
.testimonials-rail button[aria-pressed=true] .testimonial-name{color:#fff}
.testimonials-rail button[aria-pressed=true] .testimonial-role{color:#e6fbf4b8}
.testimonials-rail button[aria-pressed=true] .testimonial-avatar{border-color:#ffffff5c}
.testimonials-rail button:focus-visible{outline:2px solid #0f766e;outline-offset:2px}
.testimonials-rail .testimonial-name{font-size:.9375rem;text-wrap:pretty}

/* Rail mode. main.js keeps one figure in flow, so the track is a plain block here and the carousel
   controls have nothing to drive. min-height stops the panel resizing under the rail as quotes of
   different lengths come and go. */
@media (min-width:64rem){
  .testimonials{grid-template-columns:minmax(0,1fr) 20rem;gap:2rem;align-items:start}
  .testimonials-controls{display:none}
  .testimonials-rail{display:flex}
  .testimonials-viewport{overflow:visible;scroll-snap-type:none;padding-bottom:0}
  .testimonials-track{display:block}
  .testimonial-featured{min-height:26rem;padding:2.5rem;gap:1.75rem}
  .testimonial-quote{font-size:1.1875rem;line-height:1.65}
}
@media (min-width:80rem){
  .testimonials{grid-template-columns:minmax(0,1fr) 21.25rem}
}

/* Product suite. Same move as the case studies above: the four AI illustrations are gone and each
   card's panel is now a schematic of the product's own UI, drawn in CSS. Border-only cards, no
   shadow, so nothing gets clipped and the grid reads as one flat plane. */
.product-suite{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:stretch}
.ps-card{display:flex;flex-direction:column;background:#fff;border:1px solid #bfd0ddb8;border-radius:1rem;overflow:hidden;transition:border-color .15s ease}
.ps-card:hover{border-color:#0f766e}
/* Fixed height so all four panels line up across the grid however tall their contents are. */
.ps-media{height:230px;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;background:#edf4f8;border-bottom:1px solid #bfd0ddb8}
.ps-media-stack{gap:.625rem}
.ps-body{flex:1;padding:1.75rem;display:flex;flex-direction:column;gap:1rem}
.ps-heading{display:flex;flex-direction:column;gap:.375rem}
.ps-card h3{margin:0;font-size:1.375rem;font-weight:600;letter-spacing:-.02em;color:#163048}
.ps-sublabel{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0f766e}
.ps-body>p{margin:0;font-size:.9375rem;line-height:1.65;text-wrap:pretty}
.ps-love{margin-top:auto;display:flex;flex-direction:column;gap:.625rem;padding:1.25rem;background:#f5faf8;border:1px solid #bfd0ddb8;border-radius:.75rem}
.ps-love-label{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#163048}
.ps-love p{margin:0;font-size:.875rem;line-height:1.6;text-wrap:pretty}
.ps-love strong{font-weight:600;color:#163048}

/* Mockup parts. Every one is boxes and text, no assets. The shells never shrink, or a long row
   squeezes them out of the fixed-height panel. */
.ps-panel{flex-shrink:0;background:#fff;border:1px solid #bfd0ddb8;border-radius:.5rem;overflow:hidden}
.ps-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem .875rem;border-bottom:1px solid #bfd0ddb8}
.ps-panel-head>span:first-child{font-size:11px;font-weight:600;color:#163048}
.ps-panel-head strong{font-size:12px;font-weight:600;color:#163048;font-variant-numeric:tabular-nums}
.ps-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6875rem .875rem;background:#f5faf8}
.ps-panel-foot>span:not(.ps-badge){font-size:10px;color:#516579}
.ps-panel-foot strong{font-size:12px;font-weight:600;color:#163048}
.ps-run{display:flex;align-items:center;gap:.75rem;padding:.5625rem .875rem;border-bottom:1px solid #bfd0ddb8}
.ps-id{font-size:10px;color:#516579;font-variant-numeric:tabular-nums}
.ps-bar{flex:1;height:5px;border-radius:3px;background:#dbe6ee}
.ps-ok{font-size:10px;font-weight:600;color:#1f9d76}
.ps-pending{font-size:10px;font-weight:600;color:#c2620f}
.ps-badge{display:inline-flex;align-items:center;height:18px;padding:0 .5rem;border-radius:9999px;font-size:9px;font-weight:600;white-space:nowrap}
.ps-badge-solid{background:#0f766e;color:#fff}
.ps-badge-ok{background:#1f9d76;color:#fff}
.ps-badge-line{border:1px solid #bfd0dd;color:#163048}
.ps-badge-warn{border:1px solid #c2620f;color:#c2620f}

.ps-chrome{display:flex;align-items:center;gap:.5rem;padding:.5625rem .75rem;background:#f5faf8;border-bottom:1px solid #bfd0ddb8}
.ps-chrome i{display:block;width:8px;height:8px;border-radius:9999px;background:#dbe6ee}
.ps-url{flex:1;margin-left:.25rem;padding:.1875rem .625rem;border-radius:9999px;background:#fff;border:1px solid #bfd0ddb8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:#516579;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-app{display:flex;min-height:104px}
.ps-sidebar{width:72px;flex:none;padding:.75rem .625rem;display:flex;flex-direction:column;gap:.5rem;background:#0f766e}
.ps-sidebar-mark{display:block;height:12px;width:42px;border-radius:3px;background:#ffffffd9}
.ps-sidebar-line{display:block;height:5px;width:100%;border-radius:3px;background:#ffffff66}
.ps-sidebar-line-dim{background:#ffffff40}
.ps-app-body{flex:1;min-width:0;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.ps-app-title{font-size:10px;font-weight:600;color:#163048}
.ps-app-row{display:flex;align-items:center;gap:.625rem}
.ps-app-row .ps-ok,.ps-app-row .ps-pending{font-size:9px}
.ps-brands{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ps-brands>span:first-child{font-size:10px;color:#516579}
.ps-swatches{display:flex;gap:.375rem}
.ps-swatches i{display:block;width:16px;height:16px;border-radius:9999px;border:2px solid #fff}

.ps-code{flex-shrink:0;display:flex;flex-direction:column;gap:.375rem;padding:.875rem 1rem;background:#0f766e;border-radius:.5rem}
.ps-code-comment{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:#e6fbf48c}
.ps-code-event{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#fff}
.ps-connector{display:flex;align-items:center;gap:.625rem;padding:0 1rem}
.ps-connector span{width:1px;height:18px;background:#bfd0dd}
.ps-connector small{font-size:10px;color:#516579}

.ps-tabs{display:flex;border-bottom:1px solid #bfd0ddb8}
.ps-tabs span{flex:1;text-align:center;padding:.625rem 0;font-size:11px;font-weight:500;color:#516579}
.ps-tabs .is-active{font-weight:600;color:#163048;box-shadow:inset 0 -2px 0 #0f766e}
.ps-claims{padding:.75rem .875rem;display:flex;flex-direction:column;gap:.5625rem}
.ps-claims>div{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ps-claims span:first-child{font-size:10px;color:#516579}
.ps-strip{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem .875rem;background:#0f766e;border-radius:.5rem}
.ps-strip strong{font-size:11px;font-weight:600;color:#fff}
.ps-strip>span{font-size:10px;color:#e6fbf4b3}

/* Two across only once each card can hold its copy without going ragged; the panels grow with it. */
@media (min-width:64rem){
  .product-suite{grid-template-columns:repeat(2,1fr)}
  .ps-media{height:260px;padding:2rem}
  .ps-body{padding:2rem}
}

/* How it works. Each step is drawn as the screen it actually happens in, so the three clip-art
   icons are gone. Still an <ol> because the order is the point; the chevrons between the cards are
   pseudo-elements rather than list items, so nothing meaningless lands in the list. */
.workflow-flow{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-block-end:0;margin-inline:0;padding:0;list-style:none}
.workflow-step{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #bfd0ddb8;border-radius:1rem}
/* The real lucide chevron-right, masked so it takes its colour from the border palette. Below the
   two-column breakpoint the cards stack, so it turns to point down the page instead. */
.workflow-step:not(:last-child):after{content:"";position:absolute;top:100%;left:50%;width:2.5rem;height:2.5rem;translate:-50% 0;rotate:90deg;background-color:#bfd0dd;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/16px no-repeat}
.hiw-media{height:190px;flex-shrink:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;gap:.625rem;border-bottom:1px solid #bfd0ddb8}
.hiw-body{padding:1.75rem;display:flex;flex-direction:column;gap:.75rem}
.hiw-heading{display:flex;align-items:center;gap:.625rem}
.hiw-number{font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;color:#0f766e}
.workflow-step h3{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:#163048}
.workflow-step p{margin:0;font-size:.9375rem;line-height:1.6;text-wrap:pretty}

/* Mockup parts. Depictions, not controls, so the panels are aria-hidden in the markup. */
.hiw-rule{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6875rem .875rem;border:1px solid #bfd0ddb8;border-radius:.5rem}
.hiw-rule>span:first-child{font-size:11px;color:#516579}
.hiw-toggle{position:relative;flex:none;width:32px;height:18px;border-radius:9999px;background:#dbe6ee;transition:background-color .2s ease}
.hiw-toggle.is-on{background:#0f766e}
.hiw-toggle i{position:absolute;top:2px;left:2px;display:block;width:14px;height:14px;border-radius:9999px;background:#fff;transition:translate .2s cubic-bezier(.4,0,.2,1)}
.hiw-toggle.is-on i{translate:14px 0}
.hiw-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.hiw-channels span{padding:.625rem .375rem;text-align:center;font-size:10px;font-weight:500;color:#516579;border:1px solid #bfd0ddb8;border-radius:.5rem}
.hiw-channels .is-active{font-weight:600;color:#0f766e;border-color:#0f766e}
.hiw-payment{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.875rem;background:#0f766e;border-radius:.5rem}
.hiw-payment-amount{display:flex;flex-direction:column;gap:.1875rem}
.hiw-payment-amount small{font-size:9px;color:#e6fbf4a6}
.hiw-payment-amount strong{font-size:18px;font-weight:700;letter-spacing:-.02em;color:#fff}
.hiw-badge{display:inline-flex;align-items:center;flex:none;height:18px;padding:0 .5rem;border-radius:9999px;font-size:9px;font-weight:600;white-space:nowrap}
.hiw-badge-ok{background:#1f9d76;color:#fff}
.hiw-badge-line{border:1px solid #bfd0dd;color:#163048}
/* Rows carry the rhythm here rather than a gap, so the rules read as one table. */
.hiw-media-table{gap:0}
.hiw-table-head,.hiw-table-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5625rem 0;border-bottom:1px solid #bfd0ddb8}
.hiw-table-head span{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#516579}
.hiw-table-row span{font-size:11px;color:#516579}
.hiw-table-row strong{font-size:11px;font-weight:600;color:#163048;font-variant-numeric:tabular-nums}
.hiw-table-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:.6875rem}
.hiw-table-foot>span:first-child{font-size:11px;font-weight:600;color:#163048}

/* Three across with the chevrons back in their own 24px gutters, pointing along the row. */
@media (min-width:64rem){
  .workflow-flow{grid-template-columns:1fr 24px 1fr 24px 1fr;gap:0}
  .workflow-step:nth-child(1){grid-column:1}
  .workflow-step:nth-child(2){grid-column:3}
  .workflow-step:nth-child(3){grid-column:5}
  .workflow-step:not(:last-child):after{top:50%;left:100%;width:24px;height:24px;translate:0 -50%;rotate:none}
}

/* The footer used to be the .shell itself, so its border-top stopped at the content width and left
   a floating rule with a gap either side. The rule belongs to the full-bleed element; the shell now
   sits inside it and only handles the gutter. */
.site-footer{border-top:1px solid var(--border)}

/* --- Mockup interactivity -------------------------------------------------------------------
   The mockups are depictions, not controls: their panels stay aria-hidden and nothing in here is
   focusable, so assistive tech is never handed a button that leads nowhere. They answer to a
   pointer because a picture of a toggle invites a click and looking dead is worse than looking
   static. Nothing here changes any real state. */
.hiw-rule,.hiw-channels span,.ps-tabs span,.ps-swatches i,.cs-swatches i,.cs-tile{cursor:pointer}
.hiw-rule{transition:border-color .15s ease}
.hiw-rule:hover{border-color:#0f766e}
.hiw-channels span{transition:color .15s ease,border-color .15s ease,font-weight .15s ease}
.hiw-channels span:hover{border-color:#0f766e}
.ps-tabs span{transition:color .15s ease,box-shadow .15s ease}
.ps-tabs span:hover{color:#163048}
.ps-claims[hidden]{display:none}
.ps-value{font-size:11px;font-weight:600;color:#163048;font-variant-numeric:tabular-nums}
/* "Themed per client" and "Same rails, any brand" are the claim; picking a swatch is the proof. */
.ps-sidebar,.cs-window-bar{transition:background-color .25s ease}
.ps-swatches i,.cs-swatches i{transition:scale .15s ease,box-shadow .15s ease}
.ps-swatches i:hover,.cs-swatches i:hover{scale:1.12}
.ps-swatches i.is-picked,.cs-swatches i.is-picked{scale:1.12;box-shadow:0 0 0 2px #0f766e}
.cs-tile{transition:border-color .15s ease,color .15s ease}
.cs-tile:hover{border-color:#0f766e}
.cs-tile.is-picked{border-color:#0f766e;background:#f5faf8}
.cs-tile.is-picked span{color:#0f766e}
@media (prefers-reduced-motion:reduce){
  .hiw-toggle,.hiw-toggle i,.ps-sidebar,.cs-window-bar,.ps-swatches i,.cs-swatches i{transition:none}
}
/* The balance is a total rather than another line item, so it carries the label weight. */
.ps-claims .is-total span:first-child{font-weight:600;color:#163048}

/* 404. The mascot stands in for the zero in the code, so the page carries the brand rather than a
   generic error state. Everything here is scoped to the not-found hero. */
.notfound-hero{text-align:center}
.notfound-eyebrow{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#5EE5AE}
.notfound-lockup{margin:clamp(1.25rem,4vw,2.25rem) 0 0;line-height:1}
/* The band's gradient runs to near-white here, and the mascot is mint on mint against it. Its own
   deep ground gives it the contrast it has in the header, and reads as a plate the code sits on. */
.notfound-lockup-inner{display:inline-flex;align-items:center;justify-content:center;gap:clamp(.375rem,2vw,1rem);padding:clamp(1.25rem,4vw,2.25rem) clamp(1.75rem,5vw,3.25rem);border:1px solid #5ee5ae2e;border-radius:2rem;background:radial-gradient(120% 90% at 50% 0%,#0E2C25 0%,#071A16 62%);box-shadow:0 26px 54px #04141199}
.notfound-digit{font-family:var(--font-heading);font-size:clamp(5.25rem,22vw,10.5rem);font-weight:600;letter-spacing:-.02em;color:#5EE5AE}
/* Sized off the digits so the three characters read as one word at any width. */
.nm-mascot{flex:none;width:auto;height:clamp(6rem,25vw,11.875rem);overflow:visible}
.nm-mascot-body{fill:#5EE5AE}
.nm-mascot-detail{fill:#40D991}
.nm-mascot-eye-white{fill:#FAFBFB}
.nm-mascot-pupil{fill:#1F383F}
/* transform-box keeps both transforms working off the shape's own box rather than the whole canvas,
   so the drift stays small and the blink closes on the eye's centre line. */
.nm-mascot-float{transform-box:fill-box;transform-origin:50% 80%;animation:nmMascotFloat 4.2s ease-in-out infinite}
.nm-mascot-eye{transform-box:fill-box;transform-origin:center;animation:nmMascotBlink 6s ease-in-out infinite}
@keyframes nmMascotFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.4px) rotate(-1.4deg)}}
@keyframes nmMascotBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.notfound-copy{margin-inline:auto;max-width:34rem}
/* The band's gradient is near its lightest by the time it reaches this copy, and the band's own
   rules paint hero text white for the dark top of the home page. Deep teal is what reads here. */
.top-gradient-band .notfound-copy .hero-title{color:#04322B}
.top-gradient-band .notfound-copy .hero-lead{color:#0c4238;text-shadow:none}
.notfound-hero .hero-title{margin-top:clamp(1.5rem,5vw,2.75rem)}
.notfound-actions{justify-content:center}
/* The two buttons carry equal weight here, so the outlined one takes the primary's proportions
   instead of the smaller secondary size it has elsewhere. It also drops the band's translucent white
   treatment, which was built for the dark top of the home hero and washes out down here. */
.notfound-actions .cta-secondary,.top-gradient-band .notfound-actions .cta-secondary{border-radius:.75rem;padding:1rem 1.75rem;font-size:1rem;color:#04322B;background:#ffffffb8;border-color:#04322b40}
.top-gradient-band .notfound-actions .cta-secondary:hover{background:#fff;border-color:#04322b73}
@media (prefers-reduced-motion:reduce){.nm-mascot-float,.nm-mascot-eye{animation:none}}