/* Generated by WbamsCms. Do not edit directly. */
:root,
.draisap-dark-mode,
.dark-mode {
    --mtd-illustration-color-0: var(--mtd-illustration-primary-0, var(--brand-primary, #074FA9));
    --mtd-illustration-color-1: var(--mtd-illustration-primary-1, var(--brand-primary, #0367E4));
    --mtd-illustration-color-2: var(--mtd-illustration-primary-2, var(--brand-primary-lighter, #347BE9));
    --mtd-illustration-color-3: var(--mtd-illustration-primary-3, var(--brand-primary-lighter, #428BF0));
    --mtd-illustration-color-4: var(--mtd-illustration-primary-4, var(--brand-primary-lighter, #76A9F1));
    --mtd-illustration-color-5: var(--mtd-illustration-gray-8, var(--gray-lighter-4, #EAEEF3));
    --mtd-illustration-color-6: var(--mtd-illustration-green-3, var(--brand-success, #35B65E));
    --mtd-illustration-color-7: var(--mtd-illustration-gray-w, #ffffff);
    --shape-light-gradient-start: var(--brand-primary, #1062fe);
    --shape-dark-gradient-start: var(--brand-secondary, #083fbf);
    --svg-banner-primary-shape-left: var(--svg-banner-shape-left, var(--brand-primary, #1062fe));
    --svg-banner-primary-shape-right: var(--svg-banner-shape-right, var(--brand-primary-lighter, #009AFF));
    --svg-icon-color-3: var(--brand-secondary, #083fbf);
}

:root {
    --primary: #1A5FD6;
    --primary-lifted: #6298FE;
    --primary-accented: #015ABE;
    --secondary: #083FBF;
    --secondary-lifted: #337AFF;
    --secondary-accented: #0143BE;
    --success: #36C055;
    --success-lifted: #70D786;
    --success-accented: #2D9F46;
    --info: #1062FE;
    --info-lifted: #6298FE;
    --info-accented: #015ABE;
    --notice: #7643C9;
    --notice-lifted: #8F68D5;
    --notice-accented: #690AC2;
    --warning: #FFAA00;
    --warning-lifted: #FFC552;
    --warning-accented: #F08000;
    --error: #D92632;
    --error-lifted: #E56C74;
    --error-accented: #B6202A;
    --neutral: #5E636E;
    --neutral-lifted: #979BA4;
    --neutral-accented: #17191C;
    --grayscale: #5E636E;
    --grayscale-lifted: #ACB0B9;
    --grayscale-accented: #17191C;
    --gray: #5E636E;
    --gray-lighter: #979BA4;
    --gray-lighter-2: #ACB0B9;
    --gray-lighter-3: #DEE0E3;
    --gray-lighter-4: #E9EAEC;
    --gray-lighter-5: #F7F7F8;
    --gray-darker: #17191C;
    --gray-gradient-start: #FFFFFF;
    --gray-gradient-end: #E8F8ED;
    --text: #17191C;
    --text-muted: #979BA4;
    --text-lifted: #5E636E;
    --text-accented: #17191C;
    --text-inverted: #FFFFFF;
    --border: #DEE0E3;
    --border-muted: #E9EAEC;
    --border-lifted: #ACB0B9;
    --border-accented: #979BA4;
    --bg: #FFFFFF;
    --bg-muted: #F7F7F8;
    --bg-lifted: #E9EAEC;
    --bg-accented: #DEE0E3;
    --bg-inverted: #17191C;
    --primary-color: #1A5FD6;
    --secondary-color: #083FBF;
    --success-color: #36C055;
    --info-color: #1062FE;
    --notice-color: #7643C9;
    --warning-color: #FFAA00;
    --error-color: #D92632;
    --neutral-color: #5E636E;
    --grayscale-color: #5E636E;
    --gray-color: #5E636E;
    --text-color: #17191C;
    --border-color: #DEE0E3;
    --bg-color: #FFFFFF;
    --danger: #D92632;
    --light: #E9EAEC;
    --dark: #17191C;
    --gray-gradient: linear-gradient(135deg, var(--gray-gradient-start), var(--gray-gradient-end));
    --mtd-theme-primary: #1A5FD6;
    --mtd-theme-primary-lifted: #6298FE;
    --mtd-theme-primary-accented: #015ABE;
    --on-primary: #FFFFFF;
    --on-primary-lifted: #FFFFFF;
    --on-secondary: #FFFFFF;
    --on-success: #FFFFFF;
    --on-info: #FFFFFF;
    --on-warning: #FFFFFF;
    --on-error: #FFFFFF;
}
body.dark-mode,
html[data-theme="dark"] body {
    --primary: #1062FE;
    --primary-lifted: #337AFF;
    --primary-accented: #0143BE;
    --secondary: #083FBF;
    --secondary-lifted: #337AFF;
    --secondary-accented: #0143BE;
    --success: #31AF4E;
    --success-lifted: #5CD175;
    --success-accented: #247F38;
    --info: #1062FE;
    --info-lifted: #337AFF;
    --info-accented: #0143BE;
    --notice: #7643C9;
    --notice-lifted: #8F68D5;
    --notice-accented: #690AC2;
    --warning: #EB7D00;
    --warning-lifted: #FFAE52;
    --warning-accented: #CC6D00;
    --error: #D92632;
    --error-lifted: #E56C74;
    --error-accented: #B6202A;
    --neutral: #B3B3B3;
    --neutral-lifted: #8C8C8C;
    --neutral-accented: #E0E0E0;
    --grayscale: #B3B3B3;
    --grayscale-lifted: #666666;
    --grayscale-accented: #E0E0E0;
    --gray: #B3B3B3;
    --gray-lighter: #8C8C8C;
    --gray-lighter-2: #666666;
    --gray-lighter-3: #1A3456;
    --gray-lighter-4: #13263F;
    --gray-lighter-5: #0D1B2E;
    --gray-darker: #E0E0E0;
    --gray-gradient-start: #07111F;
    --gray-gradient-end: #0D1B2E;
    --text: #E0E0E0;
    --text-muted: #8C8C8C;
    --text-lifted: #B3B3B3;
    --text-accented: #E0E0E0;
    --text-inverted: #121212;
    --border: #424242;
    --border-muted: #303030;
    --border-lifted: #666666;
    --border-accented: #8C8C8C;
    --bg: #07111F;
    --bg-muted: #0D1B2E;
    --bg-lifted: #13263F;
    --bg-accented: #1A3456;
    --bg-inverted: #FFFFFF;
    --primary-color: #1062FE;
    --secondary-color: #083FBF;
    --success-color: #31AF4E;
    --info-color: #1062FE;
    --notice-color: #7643C9;
    --warning-color: #EB7D00;
    --error-color: #D92632;
    --neutral-color: #B3B3B3;
    --grayscale-color: #B3B3B3;
    --gray-color: #B3B3B3;
    --text-color: #E0E0E0;
    --border-color: #424242;
    --bg-color: #07111F;
    --danger: #D92632;
    --light: #13263F;
    --dark: #FFFFFF;
    --gray-gradient: linear-gradient(135deg, var(--gray-gradient-start), var(--gray-gradient-end));
    --mtd-theme-primary: #1062FE;
    --mtd-theme-primary-lifted: #337AFF;
    --mtd-theme-primary-accented: #0143BE;
    --on-primary: #FFFFFF;
    --on-primary-lifted: #121212;
    --on-secondary: #FFFFFF;
    --on-success: #121212;
    --on-info: #FFFFFF;
    --on-warning: #121212;
    --on-error: #FFFFFF;
}
body {
    color: var(--text);
    background-color: var(--bg);
}
.spanner {
    --mtd-spanner-color: var(--mtd-theme-primary, var(--brand-primary, var(--primary, #1062FE)));
}
.spanner > div,
.spanner > span {
    background: var(--mtd-spanner-color) !important;
    background-color: var(--mtd-spanner-color) !important;
}
.btn_loader.btn_loading .btn_loading_icon .spanner {
    --mtd-spanner-color: currentColor;
}
.btn_loader.btn_loading.btn-default .btn_loading_icon .spanner {
    --mtd-spanner-color: var(--mtd-theme-primary, var(--brand-primary, var(--primary, #1062FE)));
}
.owl-carousel .owl-dots {
    --mtd-owl-dot-color: var(--mtd-theme-primary, var(--brand-primary, var(--primary, #1062FE)));
}
.owl-carousel .owl-dots .owl-dot span {
    color: var(--mtd-owl-dot-color) !important;
    background-color: var(--mtd-owl-dot-color) !important;
    opacity: .28;
}
.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span,
.owl-carousel .owl-dots .owl-dot:focus span {
    color: var(--mtd-owl-dot-color) !important;
    background-color: var(--mtd-owl-dot-color) !important;
    opacity: 1;
}
a,
.text-primary,
.btn-link {
    color: var(--primary);
}
a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
    color: var(--primary-lifted);
}
.btn-primary,
button.btn-primary,
input.btn-primary,
.label-primary,
.badge-primary,
.panel-primary > .panel-heading,
.bg-primary {
    color: var(--on-primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.bg-gradient {
    color: var(--on-primary) !important;
    background: linear-gradient(135deg, var(--primary-accented), var(--primary), var(--primary-lifted)) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: var(--on-primary-lifted) !important;
    background-color: var(--primary-lifted) !important;
    border-color: var(--primary-lifted) !important;
}
.btn-secondary,
.label-secondary,
.badge-secondary,
.bg-secondary {
    color: var(--on-secondary) !important;
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}
.btn-success,
.bg-success {
    color: var(--on-success) !important;
    background-color: var(--success) !important;
    border-color: var(--success) !important;
}
.btn-info,
.bg-info {
    color: var(--on-info) !important;
    background-color: var(--info) !important;
    border-color: var(--info) !important;
}
.btn-warning,
.bg-warning {
    color: var(--on-warning) !important;
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
}
.btn-danger,
.bg-danger {
    color: var(--on-error) !important;
    background-color: var(--error) !important;
    border-color: var(--error) !important;
}
.alert-success,
.label-success,
.badge-success {
    border-color: var(--success) !important;
}
.alert-info,
.label-info,
.badge-info {
    border-color: var(--info) !important;
}
.alert-warning,
.label-warning,
.badge-warning {
    border-color: var(--warning) !important;
}
.alert-danger,
.label-danger,
.badge-danger {
    border-color: var(--error) !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    color: var(--on-primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--primary) 18%, transparent);
}
.mtd-navbar.theme,
.navbar-side.theme {
    color: var(--on-primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.mtd-navbar.theme a,
.mtd-navbar.theme .nav-link,
.mtd-navbar.theme .dropdown-toggle,
.mtd-navbar.theme .btn,
.mtd-navbar.theme .logo,
.navbar-side.theme a,
.navbar-side.theme .nav-link,
.navbar-side.theme .dropdown-toggle,
.navbar-side.theme .btn,
.navbar-side.theme .logo {
    color: var(--on-primary) !important;
}
.mtd-navbar.theme .navbar-toggler span,
.mtd-navbar.theme .tswicther[type=checkbox] + span {
    color: var(--on-primary) !important;
}
.mtd-navbar.theme .logo-light {
    display: none !important;
}
.mtd-navbar.theme .logo-dark {
    display: block !important;
}
.mtd-navbar.theme .badge,
.navbar-side.theme .badge {
    color: var(--text) !important;
    background-color: var(--text-inverted) !important;
}
.mtd-navbar.theme .navbar-nav li ul.dropdown-menu li a:hover,
.mtd-navbar.theme .navbar-nav li ul.dropdown-menu li a:focus,
.navbar-side.theme li a:hover,
.navbar-side.theme li a:focus {
    color: var(--on-primary-lifted) !important;
    background-color: var(--primary-lifted) !important;
}
.mtd-navbar.submenu-theme .navbar-nav li ul.dropdown-menu,
.mtd-navbar.submenu-theme .navbar-nav li.show ul.dropdown-menu,
.mtd-navbar.submenu-theme .navbar-header .secondary-menu-mobile .dropdown-menu {
    color: var(--on-primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.mtd-navbar.submenu-theme .navbar-nav li ul.dropdown-menu:after,
.mtd-navbar.submenu-theme .navbar-nav li.show ul.dropdown-menu:after,
.mtd-navbar.submenu-theme .navbar-header .secondary-menu-mobile .dropdown-menu:after {
    border-bottom-color: var(--primary) !important;
}
.mtd-navbar.submenu-theme .navbar-nav li ul.dropdown-menu a,
.mtd-navbar.submenu-theme .navbar-header .secondary-menu-mobile .dropdown-menu a,
.mtd-navbar.submenu-theme .dropdown-header,
.mtd-navbar.submenu-theme .mega-menu,
.mtd-navbar.submenu-theme .mega-menu p,
.mtd-navbar.submenu-theme .mega-menu h1,
.mtd-navbar.submenu-theme .mega-menu h2,
.mtd-navbar.submenu-theme .mega-menu h3,
.mtd-navbar.submenu-theme .mega-menu h4,
.mtd-navbar.submenu-theme .mega-menu h5,
.mtd-navbar.submenu-theme .mega-menu h6 {
    color: var(--on-primary) !important;
}
.mtd-navbar.submenu-theme .navbar-nav li ul.dropdown-menu a:hover,
.mtd-navbar.submenu-theme .navbar-nav li ul.dropdown-menu a:focus,
.mtd-navbar.submenu-theme .navbar-header .secondary-menu-mobile .dropdown-menu a:hover,
.mtd-navbar.submenu-theme .navbar-header .secondary-menu-mobile .dropdown-menu a:focus {
    color: var(--on-primary-lifted) !important;
    background-color: var(--primary-lifted) !important;
}
.footer-widgets.theme {
    color: var(--on-primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.footer-widgets.theme h1,
.footer-widgets.theme h2,
.footer-widgets.theme h3,
.footer-widgets.theme h4,
.footer-widgets.theme h5,
.footer-widgets.theme h6,
.footer-widgets.theme p,
.footer-widgets.theme span,
.footer-widgets.theme li,
.footer-widgets.theme a,
.footer-widgets.theme .footer-navbar,
.footer-widgets.theme .contacts_box {
    color: var(--on-primary) !important;
}
.footer-widgets.theme a:hover,
.footer-widgets.theme a:focus {
    color: var(--on-primary) !important;
    text-decoration: underline;
}
.footer-widgets.theme .btn,
.footer-widgets.theme mark {
    color: var(--on-primary-lifted) !important;
    background-color: var(--primary-lifted) !important;
    border-color: var(--primary-lifted) !important;
}
.footer-widgets.theme .border,
.footer-widgets.theme .contacts_box,
.footer-widgets.theme .footer-navbar .navbar-items {
    border-color: color-mix(in srgb, var(--on-primary) 24%, transparent) !important;
}
section.testimonials .testimonials-carousel .owl-stage-outer .owl-stage .owl-item .testimonial-item .quote [class*='fa-'] {
    color: var(--primary) !important;
}
section.testimonials .testimonials-carousel .owl-stage-outer .owl-stage .owl-item.center .testimonial-item,
section.testimonials .testimonials-carousel .owl-stage-outer .owl-stage .owl-item.active.center .testimonial-item,
.testimonials-carousel .owl-item.center .slide-item .testimonial-item,
body.dark-mode .testimonials-carousel .owl-item.center .slide-item .testimonial-item {
    color: var(--on-primary) !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-lifted)) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 24%, transparent) !important;
}
section.testimonials .testimonials-carousel .owl-stage-outer .owl-stage .owl-item.center .testimonial-item .quote [class*='fa-'],
section.testimonials .testimonials-carousel .owl-stage-outer .owl-stage .owl-item.center .testimonial-item .readmore,
section.testimonials .testimonials-carousel .owl-stage-outer .owl-stage .owl-item.center .testimonial-item .author-info .author-name-link span.link a,
.testimonials-carousel .owl-item.center .slide-item .testimonial-item .quote [class*='fa-'],
.testimonials-carousel .owl-item.center .slide-item .testimonial-item .readmore,
.testimonials-carousel .owl-item.center .slide-item .testimonial-item .author-info .author-name-link span.link a,
body.dark-mode .testimonials-carousel .owl-item.center .slide-item .testimonial-item .quote [class*='fa-'],
body.dark-mode .testimonials-carousel .owl-item.center .slide-item .testimonial-item .readmore,
body.dark-mode .testimonials-carousel .owl-item.center .slide-item .testimonial-item .author-info .author-name-link span.link a {
    color: var(--on-primary) !important;
}
body.dark-mode,
html[data-theme="dark"] body {
    color: var(--text);
    background-color: var(--bg);
}
:root {
    --brand-primary: #1A5FD6;
    --brand-primary-lighter: #5387E0;
    --brand-primary-lighter-2: #BACFF3;
    --brand-primary-lighter-3: #CFDDF6;
    --brand-primary-lighter-4: #E6EDFA;
    --brand-primary-darker: #1447A1;
    --brand-primary-gradient-start: #1A5FD6;
    --brand-primary-gradient-end: #5387E0;
    --brand-primary-gradient-h: linear-gradient(90deg, #1A5FD6 0%, #5387E0 100%);
    --brand-primary-gradient-v: linear-gradient(0deg, #5387E0 0%, #1A5FD6 100%);
}
body.dark-mode,
html[data-theme="dark"] body {
    --brand-primary: #1062FE;
    --brand-primary-lighter: #4C89FE;
    --brand-primary-lighter-2: #0A2D6D;
    --brand-primary-lighter-3: #092557;
    --brand-primary-lighter-4: #081E43;
    --brand-primary-darker: #0C4ABF;
    --brand-primary-gradient-start: #1062FE;
    --brand-primary-gradient-end: #4C89FE;
    --brand-primary-gradient-h: linear-gradient(90deg, #1062FE 0%, #4C89FE 100%);
    --brand-primary-gradient-v: linear-gradient(0deg, #4C89FE 0%, #1062FE 100%);
    --link-color: #1062FE;
    --link-hover-color: #4C89FE;
    --text-primary-color: #1062FE;
}

body {
    font-family: "Instrument Sans", system-ui, sans-serif !important;
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: "Sora", "Instrument Sans", system-ui, sans-serif;
}

/* ==== WBAMS.COM DESIGN LAYER START ====
   wbams.com's own look (site-wide Custom CSS of the WBAMS CMS, theme Serepok). Every page section carries the class
   "wb" plus its own (wb-hero, wb-bento ...); the header and footer are restyled too. Made from the WBAMS mark: navy W,
   teal speed bars, the blue rising arrow. Light and dark (body.dark-mode); motion stops for "reduce motion".
   Source: _rename-work/wbams-site/site/wbams.css (built in by site/build.php --styles); edit there, not in WBAMS. */

/* ---- tokens ----------------------------------------------------------------------------------------------------- */
:root {
  --wb-ink: #0b1f38; --wb-ink-2: #071629; --wb-navy: #10294a; --wb-navy-2: #16355e;
  --wb-teal: #0bb5a5; --wb-teal-ink: #087f75; --wb-blue: #1a5fd6; --wb-blue-2: #2e7cf6;
  --wb-paper: #f3f6f9; --wb-card: #ffffff; --wb-text: #22344c; --wb-muted: #5b6b80; --wb-line: rgba(16, 41, 74, .11);
  --wb-display: "Sora", "Instrument Sans", system-ui, sans-serif; --wb-sans: "Instrument Sans", system-ui, sans-serif;
  --wb-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wb-head: #0b1f38; --wb-radius: 12px; --wb-ease: cubic-bezier(.2, .7, .1, 1);
  --wb-shadow: 0 1px 0 rgba(16, 41, 74, .04), 0 22px 44px -26px rgba(11, 31, 56, .38);
  /* the mark's three speed bars, and its rising arrow, as pictures */
  --wb-bars: linear-gradient(var(--wb-teal), var(--wb-teal)) 0 0 / 16px 3px no-repeat, linear-gradient(var(--wb-teal), var(--wb-teal)) 0 6px / 12px 3px no-repeat, linear-gradient(var(--wb-teal), var(--wb-teal)) 0 12px / 8px 3px no-repeat;
  --wb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 10 L46 10 L58 3 L70 9 L118 2' fill='none' stroke='%230bb5a5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wb-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 380'%3E%3Cg fill='none' stroke='%230bb5a5' stroke-width='2'%3E%3Cpath d='M20 40 L140 340 L250 120 L360 340 L470 40'/%3E%3Cpath d='M70 40 L150 240 L200 140' opacity='.6'/%3E%3Cpath d='M300 120 L370 260 L440 110' opacity='.6'/%3E%3C/g%3E%3Cpath d='M440 90 L500 60 L520 80 L590 20' fill='none' stroke='%232e7cf6' stroke-width='3'/%3E%3C/svg%3E");
}
body.dark-mode { --wb-head: #ffffff; --wb-paper: #0a1628; --wb-card: #0f2038; --wb-text: #d3deec; --wb-muted: #93a4ba; --wb-line: rgba(255, 255, 255, .1); --wb-shadow: 0 22px 44px -26px rgba(0, 0, 0, .7); }

/* ---- sections: the WBAMS voice over the CMS's section styles ------------------------------------------------------ */
.sec.wb { font-family: var(--wb-sans); color: var(--wb-text); }
.sec.wb.sx { --sx-accent: var(--wb-blue); --sx-ink: var(--wb-ink); --sx-muted: var(--wb-muted); --sx-surface: var(--wb-card); --sx-soft: color-mix(in srgb, var(--wb-teal) 9%, var(--wb-card));
  --sx-tint: color-mix(in srgb, var(--wb-teal) 16%, transparent); --sx-line: var(--wb-line); --sx-radius: var(--wb-radius); --sx-shadow: var(--wb-shadow); --sx-dark: var(--wb-ink); }
body.dark-mode .sec.wb.sx { --sx-ink: #fff; --sx-muted: var(--wb-muted); --sx-accent: #6aa3ff; }
.sec.wb :is(.sec-title, h1, h2, h3, [class*="__title"]) { font-family: var(--wb-display); letter-spacing: -.028em; color: var(--sx-ink, var(--wb-ink)); }
.sec.wb .sec-title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; font-weight: 700; }
.sec.wb .sec-subtitle, .sec.wb .sec-subtitle p { color: var(--wb-muted); font-size: 18px; line-height: 1.6; }
/* headings sit on the left, like a ledger's columns */
.sec.wb .sec-description { text-align: left !important; align-items: flex-start; max-width: 760px; margin-left: 0; margin-right: auto; }
.sec.wb .sec-description .sec-subtitle { margin-left: 0; }
/* small labels: monospaced, with the mark's speed bars in front */
.sec.wb :is(.sec-caption .rounded, .sx-eyebrow, .sx-hero__eyebrow) { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none;
  font-family: var(--wb-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wb-teal-ink); }
body.dark-mode .sec.wb :is(.sec-caption .rounded, .sx-eyebrow, .sx-hero__eyebrow) { color: var(--wb-teal); }
.sec.wb :is(.sec-caption .rounded, .sx-hero__eyebrow)::before { content: ""; flex: none; width: 16px; height: 15px; background: var(--wb-bars); }
.sec.wb .sx-hero__dot { display: none; }
/* buttons: square-shouldered, signal blue; the second one an outline */
.sec.wb .btn { border-radius: 10px; font-family: var(--wb-sans); font-weight: 700; letter-spacing: 0; box-shadow: none; }
.sec.wb .btn-primary { background: var(--wb-blue); border-color: var(--wb-blue); color: #fff; }
.sec.wb .btn-primary:hover { background: #154fb4; border-color: #154fb4; }
/* a WBAMS screen in its console window: a navy title bar with three lights and the WBAMS path */
.sec.wb :is(.sx-hero__pic, .sx-sticky__frame, .sx-tabs__media, .sx-story__frame) { position: relative; overflow: hidden; border: 1px solid rgba(16, 41, 74, .16); border-radius: var(--wb-radius); background: var(--wb-navy); padding-top: 30px; box-shadow: var(--wb-shadow); }
.sec.wb :is(.sx-hero__pic, .sx-sticky__frame, .sx-tabs__media, .sx-story__frame)::before { content: ""; position: absolute; left: 14px; top: 11px; width: 46px; height: 8px; z-index: 2;
  background: radial-gradient(circle 4px at 4px 4px, #ff6b5f 3.5px, transparent 4px), radial-gradient(circle 4px at 23px 4px, #f6c344 3.5px, transparent 4px), radial-gradient(circle 4px at 42px 4px, var(--wb-teal) 3.5px, transparent 4px); }
.sec.wb :is(.sx-hero__pic, .sx-sticky__frame, .sx-tabs__media, .sx-story__frame)::after { content: "wbams / control"; position: absolute; left: 50%; top: 7px; transform: translateX(-50%); z-index: 2; padding: 1px 12px; border-radius: 6px;
  background: rgba(255, 255, 255, .08); font: 600 10px/16px var(--wb-mono); letter-spacing: .06em; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.sec.wb :is(.sx-hero__pic, .sx-tabs__media, .sx-story__frame) img, .sec.wb .sx-sticky__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 0; background: #fff; }

/* ---- hero: ink-navy blueprint with the W drawn in, screens in console windows ------------------------------------ */
.sec.wb-hero { background: var(--wb-ink-2); color: #dbe5f2; isolation: isolate; }
.sec.wb-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 56px 56px,
    radial-gradient(60% 70% at 78% 40%, rgba(46, 124, 246, .22), transparent 70%), radial-gradient(40% 50% at 10% 100%, rgba(11, 181, 165, .16), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.sec.wb-hero::after { content: ""; position: absolute; right: -4%; bottom: -6%; width: min(820px, 62vw); aspect-ratio: 600 / 380; z-index: -1; opacity: .16; background: var(--wb-w) center / contain no-repeat; pointer-events: none; }
.sec.wb-hero.sx { --sx-ink: #fff; --sx-muted: #a9b9cd; }
.sec.wb-hero .sx-hero__eyebrow { color: var(--wb-teal); }
.sec.wb-hero .sx-hero__title { color: #fff; font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; }
.sec.wb-hero .sx-hero__rotate { display: grid; color: var(--wb-teal); } /* still one grid cell for the words, on its own line */
.sec.wb-hero .sx-hero__word { padding-bottom: .12em; background: var(--wb-arrow) 0 100% / 100% .22em no-repeat; }
.sec.wb-hero .sx-hero__text, .sec.wb-hero .sx-hero__text p { color: #b8c6d8; font-size: 19px; line-height: 1.6; max-width: 34em; }
.sec.wb-hero .sx-hero__actions .sx-hero__ghost { background: transparent !important; border: 1px solid rgba(255, 255, 255, .32) !important; color: #fff !important; border-radius: 10px; }
.sec.wb-hero .sx-hero__actions .sx-hero__ghost:hover { border-color: var(--wb-teal) !important; background: rgba(11, 181, 165, .1) !important; }
.sec.wb-hero .sx-hero__pic { border-color: rgba(255, 255, 255, .14); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.sec.wb-hero .sx-hero__badge { border-radius: 10px; background: var(--wb-teal); color: var(--wb-ink-2); box-shadow: 0 18px 40px -16px rgba(11, 181, 165, .6); }
.sec.wb-hero .sx-hero__badge { border: 0; }
.sec.wb-hero .sx-hero__badge strong { font-family: var(--wb-display); color: var(--wb-ink-2); font-size: 32px; letter-spacing: -.04em; }
.sec.wb-hero .sx-hero__badge span { font-family: var(--wb-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(7, 22, 41, .78); }

/* ---- marquee: the modules running past, on a hairline band ------------------------------------------------------- */
.sec.wb-marquee { background: var(--wb-card); border-top: 1px solid var(--wb-line); border-bottom: 1px solid var(--wb-line); padding: 18px 0 !important; }
.sec.wb-marquee .sx-marquee__word { font-family: var(--wb-display); font-weight: 600; letter-spacing: -.02em; color: var(--wb-navy); }
body.dark-mode .sec.wb-marquee .sx-marquee__word { color: #c7d6ea; }
.sec.wb-marquee .sx-marquee__word::after, .sec.wb-marquee .sx-marquee--sep-dot .sx-marquee__word::after { color: var(--wb-teal); }

/* ---- statement: big words, the highlighted ones underlined with the rising arrow ---------------------------------- */
.sec.wb-statement { background: var(--wb-paper); }
.sec.wb-statement .sx-statement__text { font-family: var(--wb-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.18; color: var(--wb-ink); }
body.dark-mode .sec.wb-statement .sx-statement__text { color: #fff; }
.sec.wb-statement mark { background: var(--wb-arrow) 0 100% / 100% .2em no-repeat; color: var(--wb-blue); padding: 0 0 .1em; }
body.dark-mode .sec.wb-statement mark { color: #7fb0ff; }

/* ---- bento: the modules as ledger tiles on a blueprint ----------------------------------------------------------- */
.sec.wb-bento { background: var(--wb-paper); }
.sec.wb-bento::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--wb-line) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, var(--wb-line) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 85%); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 85%); opacity: .7; }
.sec.wb-bento .container { position: relative; }
.sec.wb-bento .sx-bento__tile { border-radius: var(--wb-radius); padding: 24px; }
@media (max-width: 575.98px) { .sec.wb-bento .sx-bento__tile.sx-tone--image { padding-top: var(--sx-pic, 24px); } }
.sec.wb-bento .sx-bento__title { font-family: var(--wb-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.sec.wb-bento .sx-bento__text { font-size: 15px; line-height: 1.5; }
.sec.wb-bento .sx-bento__icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--wb-teal) 14%, transparent); color: var(--wb-teal-ink); }
.sec.wb-bento .sx-bento__stat { font-family: var(--wb-display); font-weight: 800; letter-spacing: -.04em; color: var(--wb-blue); }
.sec.wb-bento .sx-bento__more { font-family: var(--wb-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wb-blue); }
body.dark-mode .sec.wb-bento :is(.sx-bento__more, .sx-bento__stat) { color: #7fb0ff; }
body.dark-mode .sec.wb-bento .sx-tone--accent :is(.sx-bento__more, .sx-bento__stat) { color: #fff; }
.sec.wb-bento .sx-tone--dark { background: var(--wb-ink) linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px; border-color: transparent; }
.sec.wb-bento .sx-tone--dark :is(.sx-bento__title, .sx-bento__stat) { color: #fff; }
.sec.wb-bento .sx-tone--dark .sx-bento__icon { background: rgba(11, 181, 165, .18); color: var(--wb-teal); }
.sec.wb-bento .sx-tone--dark .sx-bento__more { color: var(--wb-teal); }
.sec.wb-bento .sx-tone--accent { background: var(--wb-blue); border-color: transparent; }
.sec.wb-bento .sx-tone--accent :is(.sx-bento__title, .sx-bento__stat, .sx-bento__text, .sx-bento__more, .sx-eyebrow) { color: #fff; }
.sec.wb-bento .sx-tone--accent .sx-bento__icon { background: rgba(255, 255, 255, .16); color: #fff; }
.sec.wb-bento .sx-tone--soft { background: color-mix(in srgb, var(--wb-teal) 10%, var(--wb-card)); }
/* a tile with a screenshot: the screen fills the top, the words sit on a navy foot */
.sec.wb-bento .sx-tone--image { background: var(--wb-navy); }
.sec.wb-bento .sx-tone--image .sx-bento__media { object-fit: cover; object-position: left top; }
.sec.wb-bento .sx-tone--image .sx-eyebrow { color: var(--wb-teal); }
.sec.wb-bento .sx-tone--image :is(.sx-bento__title, .sx-bento__text, .sx-bento__more) { color: #fff; }
/* the screenshots are light all over, so the shade is navy and starts higher than the kit's */
@media (min-width: 576px) { .sec.wb-bento .sx-tone--image::after { background: linear-gradient(180deg, rgba(7, 22, 41, .1) 0%, rgba(7, 22, 41, .55) 34%, rgba(7, 22, 41, .92) 62%); } }

/* ---- sticky story: a console window that changes as the steps go by ---------------------------------------------- */
.sec.wb-sticky { background: var(--wb-card); }
.sec.wb-sticky .sx-sticky__frame { aspect-ratio: 16 / 10.4; height: auto; }
/* the pictures are stacked over the whole frame; they start below the window's title bar */
.sec.wb-sticky .sx-sticky__pic { top: 30px; }
.sec.wb-sticky .sx-sticky__frame::before, .sec.wb-sticky .sx-sticky__frame::after { z-index: 3; }
.sec.wb-sticky .sx-sticky__counter { font-family: var(--wb-mono); border-radius: 6px; background: var(--wb-teal); color: var(--wb-ink-2); }
.sec.wb-sticky .sx-sticky__step { border-left: 2px solid var(--wb-line); padding-left: 28px; }
.sec.wb-sticky .sx-sticky__step.is-active { border-left-color: var(--wb-teal); }
.sec.wb-sticky .sx-sticky__title { font-size: clamp(24px, 2.4vw, 32px); }
.sec.wb-sticky .sx-sticky__num { font-family: var(--wb-mono); color: var(--wb-teal-ink); }

/* ---- tabs: industries as a ledger list beside a console window --------------------------------------------------- */
.sec.wb-tabs { background: var(--wb-paper); }
.sec.wb-tabs .sx-tabs__tab { border-radius: 10px; font-family: var(--wb-sans); font-weight: 700; color: var(--wb-text); border: 1px solid transparent; }
.sec.wb-tabs .sx-tabs__tab.is-active { background: var(--wb-card); border-color: var(--wb-line); box-shadow: inset 3px 0 0 var(--wb-teal), var(--wb-shadow); color: var(--wb-ink); }
body.dark-mode .sec.wb-tabs .sx-tabs__tab.is-active { color: #fff; }
.sec.wb-tabs .sx-tabs__tab i { color: var(--wb-teal-ink); }
.sec.wb-tabs .sx-tabs__media { aspect-ratio: 16 / 10.4; }
.sec.wb .sx-checks i { border-radius: 4px; background: color-mix(in srgb, var(--wb-teal) 16%, transparent); color: var(--wb-teal-ink); }

/* ---- metrics: figures on an ink band, ruled like a ledger -------------------------------------------------------- */
.sec.wb-metrics { background: var(--wb-ink); }
.sec.wb-metrics.sx { --sx-ink: #fff; --sx-muted: #a9b9cd; }
.sec.wb-metrics :is(.sec-title) { color: #fff; }
.sec.wb-metrics .sec-caption .rounded { color: var(--wb-teal); }
.sec.wb-metrics .sx-metrics__item { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 24px; text-align: left; }
.sec.wb-metrics .sx-metrics__value { font-family: var(--wb-display); font-weight: 800; letter-spacing: -.05em; color: #fff; }
.sec.wb-metrics .sx-metrics__label { font-family: var(--wb-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--wb-teal); }
.sec.wb-metrics .sx-metrics__text { color: #a9b9cd; }

/* ---- steps: numbered in mono, joined by the rising arrow --------------------------------------------------------- */
.sec.wb-steps { background: var(--wb-card); }
.sec.wb-steps .sx-steps__marker { border-radius: 10px; font-family: var(--wb-mono); font-weight: 600; background: var(--wb-ink); color: var(--wb-teal); border: 0; }
.sec.wb-steps .sx-steps__title { font-size: 21px; }

/* ---- questions: plain ruled rows --------------------------------------------------------------------------------- */
.sec.wb-faqs { background: var(--wb-paper); }
.sec.wb-faqs .card { border: 0; border-bottom: 1px solid var(--wb-line) !important; border-radius: 0 !important; background: transparent; box-shadow: none; }
.sec.wb-faqs .card-header .btn, .sec.wb-faqs .card-title { font-family: var(--wb-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--wb-ink); text-align: left; }
body.dark-mode .sec.wb-faqs .card-header .btn, body.dark-mode .sec.wb-faqs .card-title { color: #fff; }
.sec.wb-faqs .card-icon { color: var(--wb-teal-ink); }
.sec.wb-faqs .card-body { color: var(--wb-muted); font-size: 16px; line-height: 1.65; }

/* ---- call to action: an ink band cut on the W's slant ------------------------------------------------------------ */
.sec.wb-cta { position: relative; background: var(--wb-ink-2) !important; isolation: isolate; clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%); padding-top: 120px !important; }
/* the band reaches up over the section above by the cut, so the cut shows that section, not the page behind it */
.sec.wb-cta { margin-top: -48px; z-index: 1; }
.sec.wb-cta::after { content: ""; position: absolute; right: 2%; top: 18%; width: min(520px, 50vw); aspect-ratio: 600 / 380; opacity: .14; background: var(--wb-w) center / contain no-repeat; z-index: -1; }
.sec.wb-cta :is(.sec-title) { color: #fff; font-size: clamp(34px, 4vw, 56px); letter-spacing: -.04em; }
.sec.wb-cta .sec-subtitle, .sec.wb-cta .sec-subtitle p { color: #b8c6d8; }
.sec.wb-cta .sec-caption .rounded { color: var(--wb-teal) !important; background: none !important; border: 0 !important; padding: 0 !important; }
.sec.wb-cta .cta-band__actions .btn-light { background: var(--wb-teal) !important; border-color: var(--wb-teal) !important; color: var(--wb-ink-2) !important; }
.sec.wb-cta .cta-band__actions .btn-outline { background: transparent !important; border-color: rgba(255, 255, 255, .34) !important; color: #fff !important; }

/* ---- story rows: screens in console windows, numbered in mono ---------------------------------------------------- */
.sec.wb-story { background: var(--wb-card); }
.sec.wb-story .sx-story__frame { aspect-ratio: 16 / 10.4; height: auto; }
.sec.wb-story .sx-story__num { font-family: var(--wb-mono); font-weight: 600; color: var(--wb-teal-ink); -webkit-text-stroke: 0; }
.sec.wb-story .sx-story__title { font-size: clamp(24px, 2.4vw, 32px); }
body.dark-mode .sec.wb-story .sx-story__num { color: var(--wb-teal); }

/* ---- timeline: a ledger of states, markers in ink and teal ------------------------------------------------------- */
.sec.wb-timeline { background: var(--wb-paper); }
.sec.wb-timeline .timeline__card { border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-card); box-shadow: var(--wb-shadow); }
.sec.wb-timeline .timeline__label { font-family: var(--wb-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wb-teal-ink); }
.sec.wb-timeline .timeline__title { font-family: var(--wb-display); font-weight: 700; letter-spacing: -.02em; color: var(--wb-head); }
.sec.wb-timeline .timeline__text { color: var(--wb-muted); }
body.dark-mode .sec.wb-timeline .timeline__label { color: var(--wb-teal); }

/* ---- expanding panels: screens behind an ink veil, the open one lit ---------------------------------------------- */
.sec.wb-panels { background: var(--wb-paper); }
.sec.wb-panels .sx-panels__panel { border-radius: var(--wb-radius); background: var(--wb-navy); }
.sec.wb-panels .sx-panels__img { object-position: left top; }
.sec.wb-panels .sx-panels__icon { border-radius: 10px; background: var(--wb-teal); color: var(--wb-ink-2); }
.sec.wb-panels :is(.sx-panels__title, .sx-panels__name) { font-family: var(--wb-display); letter-spacing: -.02em; color: #fff; }
.sec.wb-panels .sx-panels__link { font-family: var(--wb-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wb-teal); }

/* ---- thumbnail slider: full screens on ink, the list in mono ----------------------------------------------------- */
.sec.wb-thumbs { background: var(--wb-ink-2); }
.sec.wb-thumbs .sx-tslider__stage { border-radius: var(--wb-radius); }
.sec.wb-thumbs .sx-tslider__media { object-position: left top; }
.sec.wb-thumbs .sx-tslider__eyebrow { border-radius: 6px; background: var(--wb-teal); color: var(--wb-ink-2); font-family: var(--wb-mono); letter-spacing: .1em; }
.sec.wb-thumbs .sx-tslider__title { font-family: var(--wb-display); letter-spacing: -.03em; }
.sec.wb-thumbs :is(.sx-tslider__num, .sx-tslider__label) { font-family: var(--wb-mono); }
.sec.wb-thumbs .sx-tslider__bar { background: var(--wb-teal); }

/* ---- pricing: the store's own plans as ledger cards -------------------------------------------------------------- */
.sec.wb-pricing { background: var(--wb-paper); }
.sec.wb-pricing .mtd-pricing-table { border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-card); box-shadow: var(--wb-shadow); }
.sec.wb-pricing .mtd-pricing-table.active { border-color: var(--wb-blue); box-shadow: inset 0 4px 0 var(--wb-teal), var(--wb-shadow); }
.sec.wb-pricing .mtd-pricing-table .h4 { font-family: var(--wb-display); font-weight: 700; letter-spacing: -.02em; color: var(--wb-head); }
.sec.wb-pricing :is(.price, .cost, .price .suffix) { font-family: var(--wb-display); letter-spacing: -.04em; color: var(--wb-head) !important; }
.sec.wb-pricing .cycle { font-family: var(--wb-mono); color: var(--wb-muted); }
.sec.wb-pricing .sticker { background: var(--wb-teal) !important; color: var(--wb-ink-2) !important; font-family: var(--wb-mono); font-weight: 600; letter-spacing: .06em; }
.sec.wb-pricing .cycle-change { border-radius: 8px !important; font-weight: 700; }
.sec.wb-pricing .cycle-change.active { background: var(--wb-ink) !important; color: #fff !important; }
body.dark-mode .sec.wb-pricing .cycle-change.active { background: var(--wb-teal) !important; color: var(--wb-ink-2) !important; }

/* ---- comparison: a ruled ledger, the highlighted column tinted blue ---------------------------------------------- */
.sec.wb-compare { background: var(--wb-card); }
.sec.wb-compare .compare-table__table { font-family: var(--wb-sans); }
.sec.wb-compare .compare-table__plan-name { font-family: var(--wb-display); font-weight: 700; color: var(--wb-head); }
.sec.wb-compare .compare-table__feature { color: var(--wb-text); }
.sec.wb-compare .is-highlight { background: color-mix(in srgb, var(--wb-blue) 7%, transparent) !important; }
.sec.wb-compare .compare-table__plan.is-highlight .compare-table__plan-name { color: var(--wb-blue); }
.sec.wb-compare .compare-table__yes { background: color-mix(in srgb, var(--wb-teal) 16%, transparent); color: var(--wb-teal-ink); }
body.dark-mode .sec.wb-compare .compare-table__yes { color: var(--wb-teal); }
body.dark-mode .sec.wb-compare .compare-table__plan.is-highlight .compare-table__plan-name { color: #7fb0ff; }

/* ---- newsroom cards (the Updates section) ------------------------------------------------------------------------ */
.sec.wb-news { background: var(--wb-paper); }
.sec.wb-news .news-card { border: 1px solid var(--wb-line) !important; border-radius: var(--wb-radius); background: var(--wb-card); box-shadow: var(--wb-shadow); overflow: hidden; }
.sec.wb-news .news-card__date { font-family: var(--wb-mono); font-size: 12px; letter-spacing: .06em; color: var(--wb-teal-ink); }
.sec.wb-news .news-card__title { font-family: var(--wb-display); font-weight: 700; letter-spacing: -.02em; color: var(--wb-head); }
.sec.wb-news .news-card__more { font-family: var(--wb-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wb-blue); }
body.dark-mode .sec.wb-news :is(.news-card__date, .news-card__more) { color: var(--wb-teal); }

/* ---- newsletter: an ink band with a teal button ------------------------------------------------------------------ */
.sec.wb-newsletter { background: var(--wb-ink); }
.sec.wb-newsletter .sec-title { color: #fff; }
.sec.wb-newsletter :is(.sec-subtitle, .sec-subtitle p) { color: #b8c6d8; }
.sec.wb-newsletter .sec-caption .rounded { color: var(--wb-teal); }
.sec.wb-newsletter .newsletter__input { border-radius: 10px; border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; }
.sec.wb-newsletter .newsletter__input::placeholder { color: #93a4ba; }
.sec.wb-newsletter .newsletter__button { border-radius: 10px; background: var(--wb-teal); border-color: var(--wb-teal); color: var(--wb-ink-2); font-weight: 700; }
.sec.wb-newsletter :is(.newsletter__note, .newsletter__status) { color: #93a4ba; }

/* ---- gallery album cards ----------------------------------------------------------------------------------------- */
.sec.wb-albums { background: var(--wb-card); }
.sec.wb-albums .wg-card { border-radius: var(--wb-radius); box-shadow: var(--wb-shadow); }
.sec.wb-albums .wg-card__frame img { object-position: left top; }
.sec.wb-albums .wg-card__eyebrow { font-family: var(--wb-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--wb-teal-ink); }
.sec.wb-albums .wg-card__title { font-family: var(--wb-display); letter-spacing: -.02em; }
body.dark-mode .sec.wb-albums .wg-card__eyebrow { color: var(--wb-teal); }

/* ---- header and footer --------------------------------------------------------------------------------------------- */
.serepok-header.header { border-bottom: 1px solid var(--wb-line); box-shadow: none !important; }
.serepok-header .nav-link, .serepok-header .dropdown-item { font-family: var(--wb-sans); font-weight: 600; }
.serepok-header .nav-link:hover { color: var(--wb-blue); }

/* ---- legal documents (Privacy Policy, Terms of Use): a header band, then a contents list beside numbered sections -- */
.sec.wb-legal-head { padding: 0 !important; background: var(--wb-ink-2) linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 48px; color: #c9d6e6; overflow: hidden; }
.wb-legal-head__inner { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 60px); }
.wb-legal-head__inner::after { content: ""; position: absolute; right: -2%; top: 40px; width: min(440px, 38vw); aspect-ratio: 600 / 380; background: var(--wb-w) no-repeat center / contain; opacity: .22; pointer-events: none; }
.wb-legal-head__eyebrow { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--wb-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wb-teal); }
.wb-legal-head__eyebrow::before { content: ""; width: 16px; height: 15px; background: var(--wb-bars); }
.sec.wb-legal-head .wb-legal-head__title { position: relative; z-index: 1; margin: 14px 0 16px !important; /* the story styles give an h1 1.2em on top */ font-family: var(--wb-display); font-size: clamp(40px, 5.2vw, 66px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; color: #fff; }
.wb-legal-head__lead { position: relative; z-index: 1; max-width: 660px; }
.wb-legal-head__lead p { margin: 0; font-size: 18px; line-height: 1.6; color: #b9c8db; }
.wb-legal-head__meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 22px 0 0; font-family: var(--wb-mono); font-size: 12.5px; letter-spacing: .04em; color: #8fa3bd; }
.wb-legal-head__meta span + span::before { content: "/"; margin-right: 18px; color: #4f6683; }
.wb-legal-head__docs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.sec.wb-legal-head .wb-legal-head__doc { padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #dbe6f3; font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.sec.wb-legal-head a.wb-legal-head__doc:hover { border-color: var(--wb-teal); color: #fff; }
.sec.wb-legal-head .wb-legal-head__doc.is-current { border-color: var(--wb-teal); background: var(--wb-teal); color: var(--wb-ink-2); }
.wb-legal-head__short { position: relative; z-index: 1; margin-top: 40px; padding: 22px 24px; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--wb-radius); background: rgba(255, 255, 255, .035); }
.wb-legal-head__short-title { margin: 0 0 14px; font-family: var(--wb-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--wb-teal); }
.wb-legal-head__short ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; margin: 0; padding: 0; list-style: none; }
.wb-legal-head__short strong { display: block; margin-bottom: 4px; font-family: var(--wb-display); font-size: 16px; font-weight: 700; color: #fff; }
.wb-legal-head__short span { display: block; font-size: 14.5px; line-height: 1.55; color: #a9bad0; }

.sec.wb-legal { padding: clamp(48px, 6vw, 84px) 0 !important; background: var(--wb-paper); }
.wb-legal__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); align-items: start; }
.wb-legal__toc { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow: auto; }
.wb-legal__toc summary { list-style: none; font-family: var(--wb-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wb-teal-ink); pointer-events: none; }
.wb-legal__toc summary::-webkit-details-marker { display: none; }
.wb-legal__toc ol { margin: 14px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--wb-line); }
.sec.wb-legal .wb-legal__toc a { display: flex; gap: 10px; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; color: var(--wb-muted); font-size: 14.5px; line-height: 1.35; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.wb-legal__toc a span { flex: none; padding-top: 2px; font-family: var(--wb-mono); font-size: 11.5px; color: var(--wb-teal-ink); }
.sec.wb-legal .wb-legal__toc a:hover, .sec.wb-legal .wb-legal__toc a.is-active { border-left-color: var(--wb-teal); color: var(--wb-head); }
.wb-legal__doc { max-width: 780px; }
.wb-legal__section { scroll-margin-top: 104px; margin: 0 0 40px; padding: 0 0 40px; border-bottom: 1px solid var(--wb-line); }
.wb-legal__section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.sec.wb-legal .wb-legal__section h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; font-family: var(--wb-display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; color: var(--wb-head); }
.wb-legal__num { flex: none; font-family: var(--wb-mono); font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--wb-teal-ink); }
.sec.wb-legal .wb-legal__short { margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid var(--wb-teal); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--wb-teal) 9%, var(--wb-card)); font-size: 15.5px; line-height: 1.6; color: var(--wb-text); }
.wb-legal__short strong { display: block; margin-bottom: 3px; font-family: var(--wb-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wb-teal-ink); }
.sec.wb-legal .wb-legal__doc h3 { margin: 28px 0 10px; font-family: var(--wb-display); font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--wb-head); }
.sec.wb-legal .wb-legal__doc :is(p, li) { font-size: 16.5px; line-height: 1.75; color: var(--wb-text); }
.sec.wb-legal .wb-legal__doc p { margin: 0 0 14px; }
.sec.wb-legal .wb-legal__doc ul { margin: 0 0 16px; padding: 0; list-style: none; }
.sec.wb-legal .wb-legal__doc li { position: relative; margin: 0 0 10px; padding-left: 22px; }
.sec.wb-legal .wb-legal__doc li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 8px; border-radius: 2px; background: var(--wb-teal); }
.sec.wb-legal .wb-legal__doc li strong { color: var(--wb-head); }
.sec.wb-legal .wb-legal__doc a { color: var(--wb-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wb-legal__table { margin: 6px 0 20px; overflow-x: auto; border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-card); }
.wb-legal__table table { width: 100%; min-width: 520px; border-collapse: collapse; }
.wb-legal__table th { padding: 12px 16px; border-bottom: 1px solid var(--wb-line); background: color-mix(in srgb, var(--wb-teal) 7%, var(--wb-card)); font-family: var(--wb-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-align: left; text-transform: uppercase; color: var(--wb-muted); }
.sec.wb-legal .wb-legal__table td { padding: 12px 16px; border-top: 1px solid var(--wb-line); font-size: 15px; line-height: 1.55; vertical-align: top; color: var(--wb-text); }
.wb-legal__table tr:first-child td { border-top: 0; }
.wb-legal__table td:first-child { font-weight: 600; color: var(--wb-head); }
body.dark-mode .sec.wb-legal :is(.wb-legal__num, .wb-legal__short strong, .wb-legal__toc a span, .wb-legal__toc summary) { color: var(--wb-teal); }
body.dark-mode .sec.wb-legal-head { border-bottom: 1px solid var(--wb-line); } /* after dark the band and the page are both navy */
body.dark-mode .sec.wb-legal .wb-legal__doc a { color: #7fb0ff; }
@media (max-width: 991.98px) {
  .wb-legal-head__short ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-legal__grid { grid-template-columns: minmax(0, 1fr); }
  .wb-legal__toc { position: static; max-height: none; padding: 16px 18px; border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-card); }
  .wb-legal__toc summary { display: flex; justify-content: space-between; align-items: center; pointer-events: auto; cursor: pointer; }
  .wb-legal__toc summary::after { content: "+"; font-size: 18px; line-height: 1; }
  .wb-legal__toc[open] summary::after { content: "\2212"; }
}
@media (max-width: 575.98px) {
  .wb-legal-head__inner::after { display: none; }
  .wb-legal-head__meta { flex-direction: column; gap: 4px; }
  .wb-legal-head__meta span + span::before { content: none; }
  .wb-legal-head__short ul { grid-template-columns: minmax(0, 1fr); }
  .sec.wb-legal .wb-legal__doc :is(p, li) { font-size: 16px; }
  /* a table row becomes a small card: the first cell as its title, each other cell under its column's name */
  .wb-legal__table { overflow: visible; }
  .wb-legal__table table { min-width: 0; }
  .wb-legal__table thead { display: none; }
  .wb-legal__table tr { display: block; padding: 14px 16px; border-top: 1px solid var(--wb-line); }
  .wb-legal__table tr:first-child { border-top: 0; }
  .sec.wb-legal .wb-legal__table td { display: block; padding: 0; border: 0; }
  .sec.wb-legal .wb-legal__table td + td { margin-top: 8px; font-weight: 400; }
  .wb-legal__table td + td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--wb-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wb-muted); }
}

/* ---- phones ------------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .sec.wb .sec-title { font-size: 30px; }
  .sec.wb-hero .sx-hero__title { font-size: 40px; }
  .sec.wb .sx-hero__pic::after { display: none; } /* the small windows keep their lights, without the path */
  .sec.wb-cta { clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%); padding-top: 80px !important; margin-top: -24px; }
  .sec.wb-metrics .sx-metrics__item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding: 18px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .sec.wb * { transition: none !important; } }
/* ---- the logo (business profile, 2026-10-29): narrower than the theme's 250px on desktop, so the whole menu fits
   beside it in dark mode too, where the header also carries the lamp button ------------------------------------------- */
@media (min-width: 1200px) { .section-header .navbar-brand.serepok-brand .serepok-brand-logo { max-width: 214px; } }
/* ==== WBAMS.COM DESIGN LAYER END ==== */