/* ServeTech site. Tokens first: edit colors here only. J2 palette: brand blue #245B90 on white, dark #0B1827 with ink #E9ECEA, brand-blue bands (--band) as the 30% field, teal #177A63 (--go) only on Install and trial buttons, pale blue (--alt) for a few alternate sections in light mode. */
:root{color-scheme:light dark;
--accent:#245B90;--accent2:#1B4A74;--accent-text:#245B90;--accent-soft:#DCE8F3;--accent-line:#B5CBE0;
--ink:#101F30;--muted:#45566A;--line:#CBD8E4;--bg:#FFFFFF;--surface:#fff;--surface2:#F3F7FA;
--band:#245B90;--band-ink:#FFFFFF;--band-muted:#DCE8F3;--band-line:rgba(255,255,255,.22);
--foot:#101F30;--ok:#245B90;--go:#177A63;--go2:#11634F;--go-ink:#FFFFFF;--go-soft:#E3F2EE;--go-text:#11634F;--ev:#101F30;--ev-ink:#FFFFFF;--alt:#E6EEF6;--alt-card:#fff;--strip:#DCE8F3;
--shadow-sm:0 1px 2px rgba(20,24,40,.06);--shadow:0 1px 2px rgba(20,24,40,.05),0 12px 32px rgba(20,24,40,.08);--shadow-lg:0 2px 4px rgba(20,24,40,.05),0 24px 60px rgba(16,31,48,.16);
--r:12px;--r-lg:16px;--wrap:1160px;--hdr:68px;
--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* legacy names used by older markup */
--navy:var(--accent);--navy2:var(--accent2);--teal:var(--accent-text);--white:var(--surface);--th:var(--surface2)}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark;--alt:var(--surface);--alt-card:var(--bg);--strip:var(--surface);--go-soft:#12352F;--go-text:#7FD1BA;--ev:#E9ECEA;--ev-ink:#101F30;--accent:#2A659C;--accent2:#245B90;--accent-text:#8FBDE8;--accent-soft:#16304A;--accent-line:#2F5578;--ink:#E9ECEA;--muted:#AEBBC8;--line:#2B435C;--bg:#0B1827;--surface:#16293F;--surface2:#1C344D;--band:#1F5387;--band-line:rgba(255,255,255,.18);--foot:#07111C;--ok:#8FBDE8;--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.3);--shadow-lg:0 2px 4px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--alt:var(--surface);--alt-card:var(--bg);--strip:var(--surface);--go-soft:#12352F;--go-text:#7FD1BA;--ev:#E9ECEA;--ev-ink:#101F30;--accent:#2A659C;--accent2:#245B90;--accent-text:#8FBDE8;--accent-soft:#16304A;--accent-line:#2F5578;--ink:#E9ECEA;--muted:#AEBBC8;--line:#2B435C;--bg:#0B1827;--surface:#16293F;--surface2:#1C344D;--band:#1F5387;--band-line:rgba(255,255,255,.18);--foot:#07111C;--ok:#8FBDE8;--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.3);--shadow-lg:0 2px 4px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.45)}}
header.site .wm-dark{display:none}
:root[data-theme=dark] header.site .wm-light{display:none}:root[data-theme=dark] header.site .wm-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) header.site .wm-light{display:none}:root:not([data-theme=light]) header.site .wm-dark{display:block}}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:calc(var(--hdr) + 20px)}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent-text);text-underline-offset:3px}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,64px);letter-spacing:-.025em;font-weight:800}
h2{font-size:clamp(30px,3.8vw,44px);letter-spacing:-.02em;font-weight:750}
h3{font-size:19px;letter-spacing:-.01em}
p{margin:0 0 1em}
.muted{color:var(--muted);font-size:15px}
.lead{font-size:clamp(18px,1.6vw,20px);color:var(--muted);line-height:1.55}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:50}.skip:focus{left:8px}

/* Header */
header.site{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
header.site:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--hdr)}
.brand{display:flex;align-items:center;flex:0 0 auto;line-height:0;text-decoration:none}
.brand-word{height:36px;width:auto;max-width:none;display:block}
.hdr-right{display:flex;align-items:center;gap:10px;flex:1 1 auto;justify-content:flex-end}
header.site nav{display:flex;gap:4px;align-items:center;margin-right:auto;margin-left:28px}
header.site nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;border-radius:8px}
header.site nav a:hover{background:var(--accent-soft);color:var(--ink)}
header.site nav a[aria-current=page]{color:var(--accent-text);font-weight:600}
.hdr-cta{display:flex;gap:8px;align-items:center}
.theme{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer;flex:0 0 auto}
.theme:hover{color:var(--ink);border-color:var(--muted)}
.theme svg{display:block}
.menu{display:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:7px 12px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;text-decoration:none;padding:12px 20px;border-radius:10px;font-size:15px;font-weight:650;line-height:1.2;border:1px solid transparent;transition:background .15s,box-shadow .15s,transform .15s;white-space:nowrap}
.btn:hover{background:var(--accent2);box-shadow:0 6px 18px rgba(36,91,144,.25);transform:translateY(-1px)}
.btn.alt,.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.alt:hover,.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:none}
.btn.sm{padding:9px 14px;font-size:14px;border-radius:9px}
.btn.lg{padding:14px 24px;font-size:16px}
.btn .arr{transition:transform .15s}.btn:hover .arr{transform:translateX(2px)}
.navbtn{background:var(--accent);color:#fff !important;padding:9px 14px;border-radius:9px;font-weight:650;font-size:14px;text-decoration:none}
.navbtn:hover{background:var(--accent2)}
.textlink{font-weight:600;text-decoration:none;color:var(--accent-text)}.textlink:hover{text-decoration:underline}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Sections */
section{padding:clamp(64px,8vw,104px) 0}
section.alt{background:var(--alt)}
section.tight{padding:clamp(40px,5vw,64px) 0}
.section-head{max-width:720px;margin-bottom:clamp(32px,4vw,48px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{color:var(--muted);font-size:18px}
.section-head p:last-child{margin-bottom:0}

/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(56px,7vw,96px) 0 clamp(56px,6vw,80px);background:radial-gradient(900px 520px at 85% 30%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),radial-gradient(700px 420px at 0% 100%,color-mix(in srgb,var(--go) 16%,transparent),transparent 70%),var(--bg)}
.hero .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{margin-bottom:20px}
.hero .lead{max-width:540px;margin-bottom:28px}
.hero .actions{margin-bottom:22px}
.facts{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:0;font-size:14px;color:var(--muted)}
.facts li{display:flex;align-items:center;gap:8px}
.facts li:before,.checks li:before{content:"";flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%232E4FC7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

/* Product mock (sample data) */
.mock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;font-size:14px;line-height:1.4}
.mock-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface2)}
.mock-bar .dots{display:flex;gap:6px}.mock-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.mock-bar .title{font-weight:700;margin-left:6px}
.mock-bar .tag{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mock-body{padding:16px;display:grid;gap:12px}
.mock-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);white-space:nowrap}
.pill.on:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.plain{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.mbtn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;font-weight:650;font-size:13px;padding:8px 12px;border-radius:8px}
.toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.toggle i{width:30px;height:18px;border-radius:999px;background:var(--accent);position:relative;display:block}
.toggle i:after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.tcard{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:10px;padding:12px 14px}
.tcard .k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);margin-bottom:4px}
.tcard .t{font-weight:650}
.tcard .m{color:var(--muted);font-size:13px;margin-top:4px}
.mlist{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mlist .h{display:flex;justify-content:space-between;padding:9px 12px;background:var(--surface2);border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:var(--muted)}
.mlist .r{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)}
.mlist .r:last-child{border-bottom:0}
.who{display:flex;align-items:center;gap:10px}
.av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--accent-text);background:var(--accent-soft);border:1px solid var(--accent-line)}
.lbl{font-size:12px;font-weight:650;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.lbl.proven{background:var(--accent);border-color:var(--accent);color:#fff}
.lbl.likely{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text)}
.mock-note{font-size:12px;color:var(--muted);text-align:right;margin-top:10px}

/* Trust strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--strip)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.strip .item{padding:22px 20px;display:flex;gap:12px;align-items:flex-start;border-left:1px solid var(--line)}
.strip .item:first-child{border-left:0;padding-left:0}
.strip svg{flex:0 0 auto;color:var(--accent-text);margin-top:2px}
.strip strong{display:block;font-size:15px}
.strip span{display:block;font-size:14px;color:var(--muted);line-height:1.45}

/* Problem / outcomes */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:start}
.split p{color:var(--muted)}
.outcomes{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.outcomes li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
section.alt .outcomes li{background:var(--alt-card)}
.outcomes b{display:block}
.outcomes span{color:var(--muted);font-size:15px}
.num{flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:15px;background:var(--accent);color:#fff}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{position:relative;background:var(--alt-card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px 24px}
.steps li:before{counter-increment:s;content:"Step " counter(s);display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px}
.steps h3{margin-bottom:8px}
.steps p{color:var(--muted);font-size:16px;margin:0}

/* Feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.feature+.feature{margin-top:clamp(56px,7vw,96px)}
.feature.flip .copy{order:2}
.feature .copy p{color:var(--muted)}
.feature .copy h2{font-size:clamp(26px,3vw,34px)}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:16px}
.checks li:before{margin-top:4px}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.grid.four{grid-template-columns:repeat(4,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr);max-width:880px;margin:0 auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm)}
section.alt .card{background:var(--alt-card)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:16px}
.card p:last-child{margin-bottom:0}
.card .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);margin-bottom:14px}
.icon{display:none}

/* Plans */
.plan{position:relative;display:flex;flex-direction:column}
.plan .price{font-size:40px;font-weight:800;margin:4px 0 6px;letter-spacing:-.03em;color:var(--ink)}
.plan .price span{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan.featured{border:2px solid var(--accent);box-shadow:var(--shadow-lg)}
.flag{position:absolute;top:-13px;left:24px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.plan-list{list-style:none;padding:0;margin:14px 0 22px;flex:1}
.plan-list li{padding:8px 0 8px 28px;position:relative;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.plan-list li:before{content:"";position:absolute;left:4px;top:14px;width:13px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.plan .btn{width:100%}
.plan-note{text-align:center;margin-top:20px}

/* Tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:15px;background:var(--surface)}
th,td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:650;background:var(--surface2);font-size:14px}
tr:last-child td{border-bottom:0}
td.y{color:var(--ok);font-weight:650}
.cmp th[colspan]{color:var(--ink);font-size:13px;letter-spacing:.06em;text-transform:uppercase;background:var(--bg)}
.cmp td:not(:first-child),.cmp tr:first-child th:not(:first-child){text-align:center;width:22%}

/* Founder */
.founder{display:grid;grid-template-columns:220px 1fr;gap:clamp(24px,4vw,48px);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-sm)}
section.alt .founder{background:var(--alt-card)}
.founder img{width:220px;height:220px;border-radius:14px;object-fit:cover}
.founder .name{font-weight:750;font-size:19px;margin-bottom:2px}
.founder .role{color:var(--muted);font-size:15px;margin-bottom:14px}
.founder blockquote{margin:0 0 20px;font-size:18px;line-height:1.6}

/* Dark band */
.band{background:var(--band);color:var(--band-ink)}
.band h2,.band h3{color:#fff}
.band p,.band .muted{color:var(--band-muted)}
.band a:not(.btn){color:#fff}
.band .card{background:rgba(255,255,255,.09);border-color:var(--band-line);box-shadow:none}
.band .card p{color:var(--band-muted)}
.band .card .ic{background:rgba(143,189,232,.14);color:#C3CEFA}
.band .btn.alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.band .btn.alt:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* Final CTA */
.cta{text-align:center;background:radial-gradient(800px 340px at 50% 0%,rgba(255,255,255,.14),transparent 70%),var(--band);color:#fff}
.cta h2{color:#fff;max-width:720px;margin:0 auto 14px}
.cta p{color:var(--band-muted);max-width:600px;margin:0 auto 28px;font-size:18px}
.cta .actions{justify-content:center}
.cta .btn.alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.cta .btn.alt:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* Page head (inner pages) */
.pagehead{padding:clamp(48px,6vw,80px) 0 clamp(32px,4vw,48px);background:radial-gradient(800px 360px at 90% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),var(--bg);border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(34px,4.4vw,48px);margin-bottom:12px}
.pagehead .lead{max-width:640px;margin:0}

/* FAQ */
.faqgrid{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.faqnav{position:sticky;top:calc(var(--hdr) + 24px);display:grid;gap:2px;font-size:15px}
.faqnav a{color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:8px;border-left:2px solid transparent}
.faqnav a:hover{color:var(--ink);background:var(--accent-soft)}
.faq h2{font-size:22px;margin:40px 0 14px}
.faq h2:first-child{margin-top:0}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 20px;margin-bottom:10px}
.faq details[open]{border-color:var(--accent-line)}
.faq summary{cursor:pointer;font-weight:650;padding:17px 32px 17px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:12px;font-size:22px;font-weight:500;color:var(--accent-text)}
.faq details[open] summary:after{content:"\2013"}
.faq details p{padding-bottom:18px;margin:0;color:var(--muted)}
.faq-more{margin-top:24px}

/* Legal and booking */
.doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,4vw,48px)}
.doc h1{font-size:34px}
.doc h2{font-size:22px;margin-top:36px}
.doc table{font-size:14px}
.doc .tablewrap{margin-bottom:1em}
.legalgrid{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.toc{position:sticky;top:calc(var(--hdr) + 24px);font-size:14px}
.toc a{display:block;color:var(--muted);text-decoration:none;padding:5px 0}
.toc a:hover{color:var(--accent-text)}
.booking{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:start}
.booking iframe{width:100%;height:640px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;display:block}
.embed{aspect-ratio:4/3;width:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface)}

/* Footer */
footer.site{background:var(--foot);color:#C9CDD6;padding:56px 0 32px;font-size:14px}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;margin-bottom:32px}
footer.site h4{color:#fff;font-size:14px;margin-bottom:12px}
footer.site a{color:#C9CDD6;text-decoration:none;display:block;margin-bottom:8px}
footer.site a:hover{color:#fff}
footer.site p a{display:inline}
.flogo-row{display:flex;align-items:center;margin-bottom:14px;line-height:0}
.flogo-row .brand-word{height:30px!important}
.legal{border-top:1px solid rgba(255,255,255,.14);padding-top:14px;margin:0 0 6px;font-size:13px;color:#9AA0AD}

/* Reveal: content stays visible when scripts do not run */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.btn{transition:none}html{scroll-behavior:auto}}

/* Responsive */
@media (max-width:1020px){
.strip .wrap{grid-template-columns:repeat(2,1fr)}
.strip .item:nth-child(3){border-left:0;padding-left:0}
.strip .item:nth-child(n+3){border-top:1px solid var(--line)}
.grid.four{grid-template-columns:repeat(2,1fr)}
.hdr-cta .ghost{display:none}
}
@media (max-width:860px){
:root{--hdr:62px}
.hero .wrap,.split,.feature,.founder,.legalgrid,.faqgrid,.booking{grid-template-columns:1fr}
.feature.flip .copy{order:0}
.steps{grid-template-columns:1fr}
.grid.two{grid-template-columns:1fr}
.fcols{grid-template-columns:1fr 1fr}.fcols>div:first-child{grid-column:1/-1}
.toc,.faqnav{position:static}
.faqnav{display:flex;flex-wrap:wrap;gap:6px}.faqnav a{border:1px solid var(--line);background:var(--surface)}
.brand-word{height:30px}
.menu{display:block}
header.site nav{display:none;position:absolute;left:0;right:0;top:var(--hdr);background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px 16px 16px;gap:2px;margin:0;box-shadow:var(--shadow)}
header.site nav.open{display:flex}
header.site nav a{padding:12px}
.hdr-cta .navbtn{display:none}
.founder img{width:140px;height:140px}
}
@media (max-width:560px){
.strip .wrap{grid-template-columns:1fr}
.strip .item{border-left:0;padding-left:0;border-top:1px solid var(--line)}
.strip .item:first-child{border-top:0}
.grid.four{grid-template-columns:1fr}
.hero .actions .btn{flex:1 1 100%}
.cta .actions .btn{flex:1 1 100%}
th,td{padding:11px 12px}
}
.nav-m{display:none !important}
@media (max-width:860px){header.site nav .nav-m{display:block !important}header.site nav .nav-m.strong{background:var(--go);color:var(--go-ink);text-align:center;margin-top:8px;font-weight:650}}
.outcomes .num{color:#fff}
.mock-row.tabs{justify-content:flex-start;flex-wrap:wrap;gap:6px}
footer.site{border-top:1px solid var(--band-line)}
.hero .wrap>*,.feature>*,.split>*,.booking>*,.faqgrid>*,.legalgrid>*{min-width:0}
.card p.stat{font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--accent-text,var(--accent));margin:0 0 10px}
/* Accent: teal marks the main action (Install and trial links). Blue stays the brand color, and section labels use it in plain text, like the Step labels (Design Studio, October 29, 2026). */
a.btn[href*="marketplace"]:not(.alt),.navbtn[href*="marketplace"]{background:var(--go);color:var(--go-ink)}
a.btn[href*="marketplace"]:not(.alt):hover{background:var(--go2);box-shadow:0 6px 18px rgba(16,31,48,.22)}
/* Header lockup: Forte by ServeTech. Forte leads; "by ServeTech" sits smaller and quieter. */
.brand{gap:8px;align-items:center}
header.site .brand-word.brand-forte{height:26px!important}
header.site .brand-word.brand-st{height:17px!important;opacity:.85}
.brand-by{font-size:13px;line-height:1;color:var(--muted);font-weight:500;margin:0 0 0 6px}
@media (max-width:560px){header.site .brand-word.brand-forte{height:22px!important}header.site .brand-word.brand-st{height:14px!important}.brand-by{font-size:12px;margin-left:4px}.brand{gap:6px}}
/* Product views on the site (not the demo): colors by role.
   Teal = the action (Next ticket, on clock). Blue = settings and the selected area. Navy to grey = how much evidence a result has. */
.mock-bar{background:var(--band);border-bottom-color:var(--band)}
.mock-bar .title{color:#fff}
.mock-bar .tag{color:var(--band-muted)}
.mock-bar .dots i{background:#3A5068}
.mbtn{background:var(--go);color:var(--go-ink)}
.pill.on{background:var(--go-soft);color:var(--go-text)}
.tcard{background:var(--go-soft);border-color:var(--go-soft);border-left:4px solid var(--go)}
.tcard .k{color:var(--go-text)}
.mock-row.tabs .pill:not(.plain){background:var(--accent);color:#fff}
.lbl.proven{background:var(--ev);border-color:var(--ev);color:var(--ev-ink)}
.mlist .r:nth-child(odd) .av{background:var(--go-soft);color:var(--go-text);border-color:transparent}
header.site nav a,.hdr-cta a{white-space:nowrap}
@media (min-width:861px) and (max-width:1240px){header.site nav{margin-left:12px;gap:0}header.site nav a{padding:8px 8px;font-size:14px}.hdr-cta .ghost{display:none}}
/* About: the ServeTech company page. Company blue leads; warm neutral ground; no product teal except the main action. */
.about-hero{background:var(--alt)}
.about-intro{max-width:760px}
.about-mark{height:44px;width:auto;display:block;margin-bottom:28px}
.about-mark.wm-dark{display:none}
:root[data-theme=dark] .about-mark.wm-light{display:none}:root[data-theme=dark] .about-mark.wm-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .about-mark.wm-light{display:none}:root:not([data-theme=light]) .about-mark.wm-dark{display:block}}

.chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:none}
.chain .card{position:relative}
.chain .n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-weight:750;font-size:15px;margin-bottom:14px}
.chain h3{font-size:18px;margin:0 0 6px}.chain p{margin:0;color:var(--muted)}
@media (max-width:900px){.chain{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.chain{grid-template-columns:1fr}.about-mark{height:34px}}
.cta p a{color:#fff;text-decoration:underline}
/* Grouped Premium list: category name, then its parts. */
.plan-list.grouped li.cat strong{display:block;font-weight:700}
.plan-list.grouped li.cat span{display:block;color:var(--muted);font-size:14px;line-height:1.45;margin-top:2px}
table.cmp td .d{display:block;color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:2px;font-weight:400}
table.cmp td strong{font-weight:650}

/* hero definition */
.defn{margin:0 0 18px;padding-left:14px;border-left:3px solid var(--go);font-size:16px;line-height:1.5;color:var(--muted,var(--ink));max-width:520px}
.defn .dw{font-weight:700;font-size:20px;color:var(--ink);letter-spacing:.01em}
.defn .dp{margin-left:6px;opacity:.85}
.defn .dn{margin-left:6px;font-style:normal;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--go-text)}
.defn .dd{display:block;margin-top:2px}

/* own evidence panel */
.card.own{margin-top:24px;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,48px);border-left:4px solid var(--go)}
.card.own h3{font-size:clamp(22px,2.4vw,28px);margin:0}
.card.own p{margin:0 0 12px}.card.own p:last-child{margin:0}
.card.own a{color:var(--go-text);font-weight:700}
@media (max-width:860px){.card.own{grid-template-columns:1fr}}

/* circled checks in the accent */
.facts li:before,.checks li:before{background:var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
:root[data-theme=dark] .facts li:before,:root[data-theme=dark] .checks li:before{background:var(--go-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23101F30' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .facts li:before,:root:not([data-theme=light]) .checks li:before{background:var(--go-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23101F30' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}}

/* Home: From your own tickets (see, use, review). */
.own-strengths .feature h3,.os-use h3{font-size:clamp(24px,2.6vw,32px);line-height:1.15;margin:6px 0 12px}
.own-strengths .mlist .r>span:first-child{display:flex;flex-direction:column;gap:2px}
.os-sub{font-size:12px;color:var(--muted);font-weight:500}
.os-note{font-size:13px;color:var(--muted);margin:0}
.os-actions{margin-top:clamp(40px,5vw,64px);justify-content:center}
.os-use{max-width:760px;margin:clamp(56px,7vw,96px) auto;text-align:center}
.os-use p{margin:0 auto 12px}
.os-use+.feature{margin-top:0}
.own-strengths .lbl{white-space:nowrap}

/* Marketplace switch. OFF while the Zendesk Marketplace listing is updated (Jeff, October 29, 2026).
   To turn the Install Free and trial buttons back on, change the next line to: [data-mkt-alt]{display:none!important}, and remove the same rule at the end of assets/chrome.css. */
[data-mkt]{display:none!important}
.mkt-note{margin:auto 0 0;font-size:14px}

/* Color rhythm (Design Studio, October 29, 2026). 60-30-10: white or deep navy base, brand blue as the 30% field
   (How it works, Your data, final call to action), teal kept for the main action. On a blue field the plain button
   turns white so it still stands out. */
.band .steps li{background:rgba(255,255,255,.09);border-color:var(--band-line)}
.band .steps li:before{color:#fff;opacity:.85}
.band .steps h3{color:#fff}
.band .steps p{color:var(--band-muted)}
.band .section-head p{color:var(--band-muted)}
.band .eyebrow,.cta .eyebrow{color:#fff;opacity:.9}
.band .btn:not(.alt):not([href*="marketplace"]),.cta .btn:not(.alt):not([href*="marketplace"]){background:#fff;color:#1B4A74}
.band .btn:not(.alt):not([href*="marketplace"]):hover,.cta .btn:not(.alt):not([href*="marketplace"]):hover{background:#EAF2FA;color:#163E69}
.card,.steps li{box-shadow:var(--shadow-sm)}