/* OBOS Payroll & HR — Public website, app-matched 2026 visual system.
   Scoped public-only styles: no modification to Filament, payroll forms or calculations. */
:root{
  color-scheme:light;
  --ob-ink:#17213b;--ob-sub:#5f6b83;--ob-mute:#5c6981;
  --ob-bg:#f6f7fc;--ob-paper:#fff;--ob-border:#e2e7f1;
  --ob-line:#ccd5e5;--ob-indigo:#4547e8;--ob-indigo-2:#6a61f0;
  --ob-orange:#f97316;--ob-link:#3439c5;--ob-rgb:69,71,232;
  --ob-shadow:0 22px 58px rgba(27,34,83,.07);
  --ob-radius:19px;--ob-width:1216px;
}
html[data-theme=dark]{
  color-scheme:dark;
  --ob-ink:#f3f6ff;--ob-sub:#cad5ec;--ob-mute:#aab9d1;
  --ob-bg:#0b1426;--ob-paper:#14223b;--ob-border:#485e7b;
  --ob-line:#637a9c;--ob-link:#aab0ff;
  --ob-shadow:0 22px 58px rgba(0,0,0,.22);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--ob-bg);color:var(--ob-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:3px solid #fda65a;outline-offset:4px}
::selection{background:#c8caff;color:#111a39}
.skip-link{position:fixed;top:-90px;left:18px;z-index:1001;border-radius:9px;padding:10px 16px;background:#fff;color:#162141;font-weight:800}
.skip-link:focus{top:12px}
.container{width:min(var(--ob-width),calc(100% - 48px));margin-inline:auto}
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid #e5e9f2;box-shadow:0 4px 16px rgba(34,45,91,.025)}
html[data-theme=dark] .header{background:rgba(14,25,47,.96);border-color:#3e536f}
.header-inner{min-height:79px;display:flex;align-items:center;gap:20px;justify-content:space-between}
.site-logo{display:inline-flex;align-items:center;min-width:0;flex-shrink:0}
.site-logo img{display:block;width:222px;max-width:100%;height:auto}
.logo-dark{display:none!important}
html[data-theme=dark] .logo-light{display:none!important}
html[data-theme=dark] .logo-dark{display:block!important}
.desktop-nav{display:flex;align-items:center;gap:27px;margin-left:auto}
.desktop-nav a{font-weight:700;font-size:12px;color:#46536d;transition:color .17s}
html[data-theme=dark] .desktop-nav a{color:#d8e3f4}
.desktop-nav a:hover{color:var(--ob-indigo)}
html[data-theme=dark] .desktop-nav a:hover{color:#b4bcff}
.header-actions{display:flex;gap:10px;align-items:center;flex-shrink:0}
.action-plain{display:inline-flex;align-items:center;gap:8px;font-weight:850;font-size:12px;color:var(--ob-ink);min-height:39px;padding:0 8px}
.icon-btn{border:1px solid var(--ob-border);border-radius:11px;background:var(--ob-paper);color:var(--ob-ink);min-width:40px;height:40px;display:grid;place-items:center;transition:background .2s,transform .2s}
.icon-btn:hover{background:rgba(var(--ob-rgb),.09)}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .moon-icon{display:block}.icon-btn .sun-icon{display:none}
html[data-theme=dark] .icon-btn .moon-icon{display:none}
html[data-theme=dark] .icon-btn .sun-icon{display:block}
.menu-button{display:none}
.button{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:47px;padding:0 21px;border:1px solid transparent;border-radius:12px;font-size:13px;font-weight:850;line-height:1.2;transition:transform .18s,background .18s,box-shadow .18s;white-space:nowrap}
.button:hover{transform:translateY(-2px)}
.button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.button-primary{background:linear-gradient(110deg,#4a4ae5,#6460ef);color:#fff;box-shadow:0 10px 22px rgba(64,69,203,.2)}
.button-primary:hover{box-shadow:0 15px 25px rgba(64,69,203,.28)}
.button-neutral{background:var(--ob-paper);color:var(--ob-ink);border-color:var(--ob-border)}
.button-light{background:#fff;color:#313db8}
.button-outline-light{background:transparent;color:#fff;border-color:#ffffff72}
.button-small{padding:0 16px;min-height:40px;font-size:12px}
.mobile-nav{display:none;border-top:1px solid var(--ob-border);padding:8px 24px 20px;background:var(--ob-paper)}
.mobile-nav[hidden]{display:none}
.mobile-nav a{display:flex;align-items:center;min-height:45px;padding:0 8px;color:var(--ob-ink);font-size:14px;font-weight:750;border-bottom:1px solid var(--ob-border)}
.mobile-nav a:last-child{border:0}
.mobile-nav .mobile-cta{margin-top:10px;background:#4547e8;border-radius:10px;color:#fff;justify-content:center}

/* Hero — an application screen, not a generic stock landing page */
.hero{padding:33px 0 0}
.hero-panel{position:relative;overflow:hidden;border-radius:29px;background:linear-gradient(124deg,#212c82 2%,#4448de 55%,#6960ee 100%);color:#fff;box-shadow:0 30px 70px rgba(42,55,150,.18)}
.hero-panel::before{content:"";position:absolute;pointer-events:none;width:710px;height:710px;right:-215px;top:-360px;border:1px solid #ffffff24;border-radius:50%;box-shadow:0 0 0 75px #ffffff09,0 0 0 150px #ffffff07}
.hero-panel::after{content:"";position:absolute;pointer-events:none;width:270px;height:270px;left:27%;bottom:-193px;border-radius:50%;background:rgba(249,115,22,.18);filter:blur(3px)}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:32px;align-items:center;padding:clamp(29px,4vw,62px) 0 clamp(30px,4vw,62px) clamp(28px,5vw,66px)}
.hero-copy{padding:0 0 7px}
.eyebrow{display:inline-flex;gap:9px;align-items:center;font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:850}
.hero .eyebrow{border:1px solid #ffffff63;background:#ffffff19;color:#fff;padding:10px 13px;border-radius:999px}
.eyebrow .spark{width:7px;height:7px;background:#ffbb76;border-radius:50%;box-shadow:0 0 0 4px #ffb27027}
.hero h1{font-size:clamp(40px,4.45vw,66px);line-height:1.04;letter-spacing:-.055em;font-weight:900;margin:25px 0 20px;max-width:640px}
.hero h1 em{font-style:normal;color:#ffcb90}
.hero p{color:#e3eaff;font-size:clamp(14px,1.4vw,17px);line-height:1.75;max-width:520px;margin:0}
.hero-ctas{display:flex;gap:11px;flex-wrap:wrap;margin:28px 0 24px}
.hero-proof{display:flex;flex-wrap:wrap;gap:12px 20px;color:#e1e8ff;font-size:11px;font-weight:750}
.hero-proof span{display:inline-flex;gap:7px;align-items:center}
.hero-proof svg{width:15px;height:15px;stroke:#ffc48a;stroke-width:2.3;fill:none}
.hero-aside{position:relative;min-width:0;transform:translateX(11px)}
.preview-window{position:relative;background:#f6f8fd;border:1px solid #c4cbe0;border-radius:17px 0 0 17px;color:#1c2842;overflow:hidden;box-shadow:0 25px 60px #0d194b64}
.preview-toolbar{height:36px;background:#fff;border-bottom:1px solid #e7ecf5;display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.preview-dots{display:flex;gap:5px}.preview-dots i{width:7px;height:7px;border-radius:50%;background:#dce3f3}.preview-dots i:first-child{background:#f8a572}.preview-dots i:nth-child(2){background:#f3cf83}
.preview-toolbar span{font-size:9px;letter-spacing:.045em;color:#6a7391;font-weight:750}
.preview-layout{display:grid;grid-template-columns:121px minmax(0,1fr);min-height:433px}
.preview-sidebar{background:#182447;color:#c3ccde;padding:14px 9px}
.preview-sidebar .preview-mark{display:flex;gap:6px;align-items:center;margin-bottom:17px;color:#fff;font-weight:900;font-size:11px}
.preview-sidebar .preview-mark img{width:23px;height:23px}
.preview-nav-item{display:flex;align-items:center;gap:6px;padding:9px 7px;border-radius:7px;color:#becae1;font-size:8px;font-weight:750}
.preview-nav-item svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}
.preview-nav-item.active{background:#3947b7;color:#fff}
.preview-main{padding:15px 14px 15px;min-width:0}
.preview-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px;color:#7d89a0;font-size:8px;font-weight:750}
.preview-topline b{color:#1e2d4c}
.preview-welcome{background:linear-gradient(110deg,#28359c,#6d63e9);border-radius:10px;padding:13px 14px;display:flex;justify-content:space-between;gap:7px;color:#fff;min-height:71px}
.preview-welcome small{display:block;color:#dce0ff;font-size:7px;font-weight:800;letter-spacing:.095em}
.preview-welcome strong{display:block;font-size:13px;letter-spacing:-.025em;margin:4px 0}
.preview-welcome p{font-size:8px;line-height:1.3;color:#e1e5ff;margin:0}
.preview-welcome-icon{font-size:17px;align-self:center;background:#ffffff22;border:1px solid #ffffff33;border-radius:11px;padding:10px}
.preview-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:10px}
.preview-tile{min-height:73px;padding:9px 8px;border-radius:9px;color:#1d2b45}
.preview-tile:nth-child(1){background:#ffede4}.preview-tile:nth-child(2){background:#edeaff}.preview-tile:nth-child(3){background:#e7f2ff}.preview-tile:nth-child(4){background:#fff3d3}
.preview-tile .tile-icon{display:block;font-size:15px;margin-bottom:6px}
.preview-tile b{display:block;font-size:9px}.preview-tile small{display:block;font-size:7px;color:#6b718a;margin-top:4px}
.preview-workflow{margin-top:11px;background:#fff;border:1px solid #e3e9f3;border-radius:10px;overflow:hidden}
.preview-workflow-head{padding:10px 11px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7ecf3}
.preview-workflow-head strong{font-size:9px}.preview-workflow-head span{font-size:7px;color:#717c96}
.preview-flow{background-image:linear-gradient(#f2f4f8 1px,transparent 1px),linear-gradient(90deg,#f2f4f8 1px,transparent 1px);background-size:17px 17px;padding:13px 9px}
.preview-flowline{display:flex;align-items:stretch;gap:5px}
.preview-step{min-width:0;flex:1;text-align:center;background:#fff;border:1px solid #e2e8f2;border-radius:7px;padding:8px 2px;box-shadow:0 3px 7px #1120440c}
.preview-step .step-icon{display:grid;place-items:center;margin:0 auto 5px;border-radius:6px;width:25px;height:25px;font-size:14px}
.preview-step span{display:block;font-size:7px;font-weight:850}
.preview-step small{display:block;font-size:6px;color:#7d8aa0;margin-top:2px}
.preview-link{align-self:center;color:#8da1bf;font-size:11px;font-weight:850}
.preview-pay{display:flex;gap:8px;margin-top:10px}
.preview-pay > div{background:#fff;border:1px solid #e2e8f2;border-radius:8px;padding:10px;flex:1;min-width:0}
.preview-pay span{font-size:7px;color:#72829f;display:block}
.preview-pay b{font-size:11px;margin-top:4px;display:block}
.preview-float{position:absolute;bottom:-18px;left:-23px;display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid #e7ecf6;border-radius:12px;box-shadow:0 14px 36px #10174c34;color:#1f2b43}
.preview-float > span{display:grid;place-items:center;background:#dcfce7;color:#16865b;width:34px;height:34px;border-radius:9px;font-size:16px}
.preview-float b{display:block;font-size:10px}.preview-float small{display:block;font-size:8px;color:#71809b;margin-top:4px}
.preview-disclaimer{position:absolute;right:19px;bottom:-25px;color:#e5e9ff;font-size:9px;font-weight:650;letter-spacing:.02em}

/* Trust / customer expectations */
.signal-strip{padding:26px 0 0}
.signal-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;background:var(--ob-paper);border:1px solid var(--ob-border);border-radius:15px}
.signal-title{font-size:10px;letter-spacing:.095em;font-weight:900;text-transform:uppercase;color:var(--ob-mute)}
.signal-items{display:flex;gap:12px 27px;flex-wrap:wrap}
.signal-items span{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ob-sub);font-weight:800}
.signal-items svg{width:16px;height:16px;stroke:#5354da;fill:none;stroke-width:2}
html[data-theme=dark] .signal-items svg{stroke:#b3b7ff}

.section{padding:95px 0 0}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}
.section-heading>div{max-width:690px}
.section-tag{display:inline-flex;gap:7px;align-items:center;color:#4d4bcb;background:#edeeff;padding:7px 11px;border-radius:999px;font-size:10px;letter-spacing:.10em;text-transform:uppercase;font-weight:900}
html[data-theme=dark] .section-tag{color:#c5c8ff;background:#343469}
.section-heading h2{font-size:clamp(27px,3.4vw,43px);letter-spacing:-.052em;line-height:1.14;margin:15px 0 12px;max-width:700px}
.section-heading p{color:var(--ob-sub);font-size:14px;line-height:1.75;margin:0}
.text-link{display:inline-flex;align-items:center;gap:7px;color:var(--ob-link);font-size:12px;font-weight:900;white-space:nowrap;padding-bottom:6px}
.text-link:hover{text-decoration:underline}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feature-card{position:relative;overflow:hidden;min-height:214px;padding:26px;border-radius:18px;border:1px solid var(--ob-border);background:var(--ob-paper);box-shadow:0 8px 26px rgba(26,35,81,.026);transition:transform .18s,box-shadow .18s,border-color .18s}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--ob-shadow);border-color:#aaaef2}
.feature-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:13px;margin-bottom:19px}
.feature-icon svg{height:23px;width:23px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.tint-peach{background:#ffeadf;color:#c75b17}.tint-lilac{background:#eee8ff;color:#6246d5}.tint-sky{background:#e3f2ff;color:#1474b8}.tint-butter{background:#fff2cc;color:#946006}.tint-mint{background:#e0f8ec;color:#11744c}.tint-pink{background:#ffe7f0;color:#be386a}
.feature-card h3{font-size:16px;line-height:1.3;letter-spacing:-.02em;margin:0 0 9px}
.feature-card p{font-size:12px;line-height:1.8;color:var(--ob-sub);margin:0}
.feature-card .micro-label{display:block;margin-top:18px;color:var(--ob-link);font-size:10px;font-weight:900}

/* Interactive module tour */
.tour-shell{display:grid;grid-template-columns:288px minmax(0,1fr);border-radius:22px;overflow:hidden;border:1px solid var(--ob-border);background:var(--ob-paper);box-shadow:var(--ob-shadow)}
.tour-sidebar{background:#222e84;color:#fff;padding:30px 22px}
.tour-sidebar .section-tag{background:#ffffff1b;color:#eff1ff}
.tour-sidebar h3{font-size:23px;letter-spacing:-.04em;line-height:1.2;margin:16px 0 10px}
.tour-sidebar p{font-size:12px;line-height:1.75;color:#dce4ff;margin:0 0 21px}
.tour-tabs{display:grid;gap:7px}
.tour-tab{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid transparent;border-radius:11px;padding:11px 12px;background:transparent;color:#dce3fa;font-size:12px;font-weight:800;min-height:49px}
.tour-tab svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;flex-shrink:0}
.tour-tab[aria-selected=true]{background:#fff;color:#2d39a4;box-shadow:0 4px 12px #10185845}
.tour-tab:not([aria-selected=true]):hover{background:#ffffff16}
.tour-preview{padding:32px 34px;background:var(--ob-paper);min-height:434px;min-width:0}
.tour-pane[hidden]{display:none!important}
.tour-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:var(--ob-link)}
.tour-pane h3{font-size:clamp(22px,2.5vw,31px);letter-spacing:-.045em;margin:10px 0 10px}
.tour-pane>p{font-size:13px;line-height:1.7;color:var(--ob-sub);margin:0 0 23px;max-width:650px}
.tour-surface{background:var(--ob-bg);border:1px solid var(--ob-border);border-radius:14px;padding:16px;overflow:hidden}
.tour-toolbar{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:12px}
.tour-toolbar b{font-size:12px}
.tour-chip{font-size:10px;font-weight:850;border:1px solid var(--ob-border);border-radius:999px;padding:6px 9px;color:var(--ob-sub);background:var(--ob-paper)}
.tour-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tour-stat{padding:14px;border:1px solid var(--ob-border);background:var(--ob-paper);border-radius:10px}
.tour-stat span{display:block;font-size:10px;color:var(--ob-sub);font-weight:800}
.tour-stat strong{font-size:18px;display:block;margin-top:6px;font-variant-numeric:tabular-nums}
.tour-stat small{font-size:9px;color:var(--ob-mute);display:block;margin-top:4px}
.tour-table-wrap{max-width:100%;overflow-x:auto;background:var(--ob-paper);border:1px solid var(--ob-border);border-radius:10px;margin-top:12px}
.tour-table{border-collapse:collapse;width:100%;min-width:510px;font-size:11px}
.tour-table th{font-weight:900;color:var(--ob-sub);background:var(--ob-bg);padding:12px;text-align:left;white-space:nowrap}
.tour-table td{padding:13px 12px;border-top:1px solid var(--ob-border);font-variant-numeric:tabular-nums;white-space:nowrap}
.tour-table th:not(:first-child),.tour-table td:not(:first-child){text-align:right}
.tour-table td:first-child{font-weight:850}
.tour-table .net{font-weight:950;color:var(--ob-link)}
.tour-status{display:inline-flex;gap:6px;align-items:center;font-size:9px;font-weight:850;padding:5px 8px;border-radius:99px;background:#e0f7e9;color:#116a47}
.tour-status.warning{background:#fff0d8;color:#915007}
.tour-footnote{margin-top:11px;font-size:10px;color:var(--ob-mute);line-height:1.5}

/* Workflow map — same semantics and colorful icon language as real dashboard */
.workflow{position:relative;background:linear-gradient(180deg,transparent,#eceefe 60%,transparent);margin-top:95px;padding:4px 0 6px}
html[data-theme=dark] .workflow{background:linear-gradient(180deg,transparent,#101b37 60%,transparent)}
.workflow-board{border:1px solid var(--ob-border);border-radius:20px;background:var(--ob-paper);box-shadow:var(--ob-shadow);overflow:hidden}
.workflow-board-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 23px;border-bottom:1px solid var(--ob-border);background:var(--ob-paper)}
.workflow-board-head strong{font-size:14px}
.workflow-board-head small{display:block;font-size:11px;color:var(--ob-sub);margin-top:6px}
.workflow-live{display:inline-flex;gap:7px;align-items:center;color:#2d38ab;background:#edeeff;padding:8px 11px;font-size:10px;font-weight:850;border-radius:999px}
html[data-theme=dark] .workflow-live{background:#293d6a;color:#dce6ff}
.flow-body{background-image:linear-gradient(rgba(120,145,191,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(120,145,191,.065) 1px,transparent 1px);background-size:25px 25px;padding:15px 22px 17px}
.flow-row{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--ob-border)}
.flow-row:last-child{border:0}
.flow-label{display:flex;gap:10px;align-items:center;color:var(--ob-ink);font-size:11px;font-weight:900}
.flow-number{width:31px;height:31px;border-radius:9px;background:#eceeff;color:#4644c5;font-size:12px;display:grid;place-items:center;flex:none}
html[data-theme=dark] .flow-number{background:#2b3d6e;color:#d5dcff}
.flow-steps{display:flex;align-items:stretch;min-width:0;gap:8px}
.flow-card{flex:1;min-width:0;border:1px solid var(--ob-border);border-radius:12px;background:var(--ob-paper);padding:13px 8px;text-align:center;box-shadow:0 4px 11px #222a5606}
.flow-card .feature-icon{width:37px;height:37px;border-radius:10px;margin:0 auto 8px}
.flow-card .feature-icon svg{width:19px;height:19px}
.flow-card b{display:block;font-size:11px;line-height:1.3}
.flow-card small{display:block;margin-top:5px;color:var(--ob-sub);font-size:9px;line-height:1.45}
.flow-arrow{width:13px;flex:none;align-self:center;color:#8ca1c0;font-weight:850;font-size:16px}
.workflow-foundations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;border-top:1px solid var(--ob-border);background:var(--ob-bg)}
.foundation{background:var(--ob-paper);border:1px solid var(--ob-border);border-radius:10px;padding:14px}
.foundation b{display:block;font-size:11px}
.foundation small{display:block;color:var(--ob-sub);font-size:10px;line-height:1.55;margin-top:5px}

/* Payroll grid section */
.grid-demo{border:1px solid var(--ob-border);border-radius:20px;overflow:hidden;background:var(--ob-paper);box-shadow:var(--ob-shadow)}
.grid-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:17px 21px;border-bottom:1px solid var(--ob-border)}
.grid-head strong{font-size:15px}.grid-head small{font-size:11px;color:var(--ob-sub);display:block;margin-top:4px}
.grid-caption{background:#eef1ff;color:#444ab6;font-size:11px;font-weight:750;padding:10px 20px;border-bottom:1px solid #d7dff6}
html[data-theme=dark] .grid-caption{background:#263762;color:#dbe6ff;border-color:#50688e}
.grid-scroll{overflow-x:auto;scrollbar-gutter:stable;overscroll-behavior-x:contain}
.pay-grid{border-spacing:0;border-collapse:separate;font-size:12px;min-width:1050px;width:100%;font-variant-numeric:tabular-nums}
.pay-grid th,.pay-grid td{height:45px;padding:0 13px;white-space:nowrap;border-bottom:1px solid var(--ob-border);text-align:right}
.pay-grid .identity{position:sticky;left:0;z-index:2;text-align:left;background:var(--ob-paper);box-shadow:5px 0 8px -8px #62789a}
.pay-grid thead th{background:#f0f2fb;color:#495775;font-weight:850;font-size:10px}
html[data-theme=dark] .pay-grid thead th{background:#293a55;color:#ecf2ff}
.pay-grid thead .identity{z-index:3;background:#f0f2fb}
html[data-theme=dark] .pay-grid thead .identity{background:#293a55}
.pay-grid tbody tr:nth-child(even) td{background:var(--ob-bg)}
.pay-grid tbody tr:nth-child(even) td.identity{background:var(--ob-bg)}
.pay-grid .gross{font-weight:850;color:var(--ob-ink)}.pay-grid .net{font-weight:950;color:var(--ob-link)}
.pay-grid tfoot td{font-weight:900;background:#e9ecff;color:#263ba9;border:0;height:50px}
.pay-grid tfoot td.identity{background:#e9ecff}
html[data-theme=dark] .pay-grid tfoot td{background:#283c70;color:#e9efff}
html[data-theme=dark] .pay-grid tfoot td.identity{background:#283c70}
.grid-bottom{padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:13px;flex-wrap:wrap}
.grid-bottom small{font-size:11px;color:var(--ob-sub)}
.grid-bottom a{color:var(--ob-link);font-size:12px;font-weight:900}

/* Security and capabilities */
.proof-layout{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.proof-panel{border:1px solid var(--ob-border);background:var(--ob-paper);border-radius:18px;padding:27px;min-height:288px}
.proof-panel h3{font-size:21px;letter-spacing:-.025em;margin:0 0 10px}
.proof-panel>p{font-size:12px;color:var(--ob-sub);line-height:1.75;margin:0 0 19px}
.proof-list{display:grid;gap:12px}
.proof-row{display:flex;gap:10px;align-items:flex-start;color:var(--ob-ink);font-size:12px;line-height:1.65;font-weight:650}
.proof-row svg{width:17px;height:17px;stroke:#5c5be9;flex:none;fill:none;stroke-width:2.2;margin-top:1px}
.integration-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.integration-list span{padding:9px 12px;border:1px solid var(--ob-border);border-radius:9px;font-size:11px;color:var(--ob-sub);background:var(--ob-paper);font-weight:750}
.availability-note{color:var(--ob-sub);font-size:11px;line-height:1.65;margin-top:14px}

/* Contact + footer */
.final-section{margin-top:95px;padding-bottom:29px}
.final-panel{position:relative;overflow:hidden;border-radius:23px;background:linear-gradient(112deg,#222f86,#4949dc 64%,#7169ee);color:#fff;padding:clamp(30px,5vw,55px);display:flex;align-items:center;justify-content:space-between;gap:25px}
.final-panel::after{content:"";position:absolute;border:1px solid #ffffff28;width:270px;height:270px;border-radius:50%;right:-90px;top:-155px}
.final-panel>div{position:relative;z-index:1}
.final-panel .eyebrow{color:#e9edff}
.final-panel h2{max-width:640px;font-size:clamp(27px,3vw,39px);line-height:1.16;letter-spacing:-.045em;margin:12px 0}
.final-panel p{color:#e4eaff;font-size:13px;line-height:1.7;margin:0;max-width:570px}
.final-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
footer{padding:30px 0 39px}
.footer-inner{border-top:1px solid var(--ob-border);padding-top:23px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.footer-brand img{width:200px;max-width:100%;height:auto;display:block}
.footer-meta{display:grid;gap:7px;color:var(--ob-sub);font-size:11px;line-height:1.5}
.footer-links{display:flex;flex-wrap:wrap;gap:11px 22px;color:var(--ob-sub);font-size:11px;font-weight:750}
.footer-links a:hover{text-decoration:underline}
.footer-legal{margin:10px 0 0;color:var(--ob-mute);font-size:10px;line-height:1.6}

@media(max-width:1120px){
  .desktop-nav{gap:13px}
  .hero-inner{grid-template-columns:1fr .96fr;gap:22px}
  .preview-layout{grid-template-columns:90px 1fr}
  .preview-sidebar{padding-inline:5px}.preview-nav-item{font-size:7px;padding:8px 4px}
  .hero h1{font-size:clamp(37px,4.5vw,55px)}
  .hero-aside{transform:none}
}
@media(max-width:980px){
  .desktop-nav,.header-actions .action-plain{display:none}
  .menu-button{display:grid}
  .mobile-nav:not([hidden]){display:grid}
  .hero-inner{grid-template-columns:1fr;gap:33px;padding:44px 42px 60px}
  .hero h1{max-width:680px;font-size:clamp(42px,6.4vw,62px)}
  .hero p{max-width:630px}
  .hero-aside{transform:none}
  .preview-window{border-radius:17px}
  .preview-layout{grid-template-columns:145px 1fr}
  .preview-sidebar{padding:14px 9px}.preview-nav-item{font-size:8px}
  .preview-float{left:14px;bottom:-20px}
  .preview-disclaimer{right:15px;bottom:-27px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-row{grid-template-columns:105px 1fr}
  .tour-shell{grid-template-columns:230px minmax(0,1fr)}
  .tour-preview{padding:24px}
}
@media(max-width:680px){
  .container{width:calc(100% - 26px)}
  .header-inner{min-height:67px}
  .site-logo img{width:199px}
  .header-actions{gap:6px}
  .header-actions .button-small{display:none}
  .hero{padding-top:13px}
  .hero-panel{border-radius:20px}
  .hero-inner{padding:30px 20px 43px;gap:30px}
  .hero h1{font-size:clamp(36px,10vw,52px);margin:20px 0 17px}
  .hero p{font-size:14px;line-height:1.7}
  .hero-ctas{margin:25px 0 19px}.hero-ctas .button{flex:1 1 145px}
  .hero-proof{font-size:10px;gap:11px}
  .preview-layout{grid-template-columns:1fr;min-height:0}
  .preview-sidebar{display:none}
  .preview-main{padding:10px}
  .preview-window{border-radius:13px}
  .preview-tiles{gap:5px}
  .preview-tile{padding:7px 5px;min-height:68px}
  .preview-welcome strong{font-size:11px}
  .preview-pay{gap:5px}
  .preview-float{left:10px;bottom:-18px}
  .preview-disclaimer{display:none}
  .signal-strip{padding-top:14px}
  .signal-inner{align-items:flex-start;flex-direction:column;gap:13px;padding:18px}
  .signal-items{gap:11px 17px}
  .section{padding-top:69px}
  .section-heading{align-items:flex-start;flex-direction:column;gap:10px}
  .section-heading h2{font-size:clamp(27px,7vw,36px)}
  .feature-grid{grid-template-columns:1fr;gap:10px}
  .feature-card{min-height:0;padding:22px}
  .feature-card .feature-icon{margin-bottom:13px}
  .tour-shell{grid-template-columns:minmax(0,1fr)}
  .tour-sidebar{padding:22px 17px;min-width:0;max-width:100%}
  .tour-sidebar h3{font-size:20px;margin-bottom:6px}
  .tour-sidebar p{margin-bottom:13px}
  .tour-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .tour-tab{font-size:11px;min-height:44px;padding:9px;min-width:0;overflow-wrap:anywhere}
  .tour-preview{padding:21px 15px;min-height:0;min-width:0;max-width:100%}
  .tour-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tour-stat{padding:10px}.tour-stat strong{font-size:16px}
  .tour-pane,.tour-surface{min-width:0;max-width:100%}
  .tour-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .workflow{margin-top:64px}
  .workflow-board-head{padding:16px}
  .flow-body{padding:6px 13px}
  .flow-row{grid-template-columns:1fr;gap:11px;padding:17px 0}
  .flow-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .flow-arrow{display:none}
  .flow-card{padding:12px 7px;min-height:103px}
  .flow-card .feature-icon{margin-bottom:6px}
  .workflow-foundations{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:9px}
  .foundation{padding:11px}
  .grid-head,.grid-bottom{padding:15px}
  .proof-layout{grid-template-columns:1fr;gap:10px}
  .proof-panel{min-height:0;padding:22px}
  .final-section{margin-top:67px}
  .final-panel{align-items:flex-start;flex-direction:column;padding:28px 22px}
  .final-actions{width:100%}
  .final-actions .button{flex:1}
  footer{padding-bottom:26px}
}
@media(max-width:380px){
  .header-actions .icon-btn{min-width:35px;width:35px;height:35px}
  .site-logo img{width:170px}
  .preview-tiles{grid-template-columns:repeat(2,1fr)}
  .preview-flowline{gap:3px}
  .preview-step{padding:6px 1px}
  .preview-link{font-size:9px}
  .tour-tabs{grid-template-columns:1fr 1fr}
  .workflow-foundations{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .button,.feature-card{transition:none}
  .button:hover,.feature-card:hover{transform:none}
}

/* Oct 2026 mobile containment: no full-page horizontal overflow in the interactive tour. */
@media (max-width:680px){
 html,body{width:100%;max-width:100%;overflow-x:clip}
 main,.section,.container,.tour-shell,.tour-sidebar,.tour-preview,.tour-pane,.tour-surface,.tour-tabs,.tour-grid,.tour-toolbar{min-width:0;max-width:100%}
 .tour-shell{width:100%;grid-template-columns:minmax(0,1fr)}
 .tour-tabs{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
 .tour-tab{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
 .tour-tab svg{flex:0 0 19px}
 .tour-preview,.tour-sidebar{width:100%;overflow:hidden}
 .tour-pane>p,.tour-sidebar p,.tour-surface{overflow-wrap:anywhere}
 .tour-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tour-table-wrap,.grid-scroll{max-width:100%;overflow-x:auto;touch-action:pan-x pan-y}
 .tour-table-wrap table{width:100%;max-width:none}
}
@media (max-width:410px){
 .tour-grid{grid-template-columns:minmax(0,1fr)}
 .tour-sidebar,.tour-preview{padding:18px 14px}
 .tour-toolbar{flex-wrap:wrap}
 .tour-tab{gap:7px;padding:10px 8px;font-size:11px}
}