:root{--graphite:#242D36;--graphite-2:#2E3944;--graphite-3:#3A4753;--amber:#E5A744;--amber-hover:#CF9130;--white:#fff;--canvas:#F5F7F8;--border:#D7DEE3;--muted:#52616D;--link:#755000;--info:#175CD3;--good:#176B45;--good-bg:#E6F4EC;--warn:#7A4B00;--warn-bg:#FFF1D6;--crit:#B42318;--crit-bg:#FDE8E6;--none:#4A5763;--none-bg:#ECEFF2;--radius:8px;--content:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--graphite);background:var(--white);line-height:1.6;font-size:1.0625rem}
@media(min-width:1000px){body{font-size:1.125rem}}
img{max-width:100%;height:auto}
.wrap{width:min(calc(100% - 40px),var(--content));margin-inline:auto}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--info);outline-offset:3px}
.on-dark :focus-visible,.hero :focus-visible,.cta :focus-visible,.dark :focus-visible{outline-color:#9CC3FF}
.skip{position:absolute;left:-999px;top:0;background:var(--white);padding:8px 12px}
.skip:focus{left:8px;z-index:10}
header.top{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:12px;flex-wrap:wrap}
header.top img{width:150px;display:block}
nav ul{list-style:none;display:flex;gap:4px 24px;margin:0;padding:0;flex-wrap:wrap;align-items:center}
nav a{color:var(--graphite);text-decoration:none;font-weight:700;font-size:1rem;padding:6px 0;border-bottom:3px solid transparent}
nav a:hover,nav a[aria-current=page]{border-bottom-color:var(--amber)}
nav a.btn{border-bottom:2px solid transparent;padding:8px 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border:2px solid transparent;border-radius:var(--radius);background:var(--amber);color:var(--graphite);font:700 1rem Arial,Helvetica,sans-serif;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--amber-hover)}
.btn.second{background:transparent;border-color:var(--graphite)}
.btn.second:hover{background:var(--canvas)}
.btn.small{min-height:36px;padding:6px 14px;font-size:.92rem}
.btn.quiet{background:var(--white);border-color:var(--border)}
.btn.quiet:hover{background:var(--canvas)}
/* the angled threshold of the logo, used as a divider */
.slant{height:44px;background:var(--graphite);clip-path:polygon(0 0,100% 0,100% 0,0 100%);margin-top:-1px}
.slant.up{background:var(--white);clip-path:polygon(0 100%,100% 0,100% 100%)}
.hero{background:var(--graphite);color:var(--white);padding-block:64px 100px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-8%;top:-30%;width:46%;height:160%;background:var(--graphite-2);transform:skewX(-14deg);z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.eyebrow{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.7rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 20px}
.hero p.lead{font-size:1.2rem;max-width:52ch;margin:0 0 28px;color:#E6EBEF}
.hero .row{display:flex;gap:14px;flex-wrap:wrap}
.hero .btn.second{border-color:var(--white);color:var(--white)}
.hero .btn.second:hover{background:var(--graphite-3)}
.page-head{background:var(--graphite);color:var(--white);padding-block:56px 40px}
.page-head h1{font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.1;letter-spacing:-.025em;margin:0 0 14px;max-width:24ch}
.page-head p{max-width:62ch;color:#E6EBEF;font-size:1.15rem;margin:0}
section{padding-block:72px}
section.alt{background:var(--canvas)}
section.dark{background:var(--graphite);color:var(--white)}
section.dark .lead,section.dark p{color:#E6EBEF}
section.dark .tag{color:var(--amber)}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 14px}
h3{font-size:1.2rem;margin:0 0 8px}
.lead{font-size:1.15rem;max-width:62ch;color:var(--muted)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.split.flip>.copy{order:2}
.copy .btn{margin-top:8px}
.tag{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--link);margin-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{padding:24px;border:1px solid var(--border);border-radius:12px;background:var(--white)}
.card p{margin:0;color:var(--muted)}
section.dark .card{background:var(--graphite-2);border-color:var(--graphite-3)}
section.dark .card p{color:#D7DEE3}
table{border-collapse:collapse;width:100%;margin-top:20px;background:var(--white)}
th,td{border:1px solid var(--border);padding:12px 14px;text-align:left;vertical-align:top}
th{background:var(--canvas)}
.note{border-left:5px solid var(--amber);background:var(--canvas);padding:16px 20px;border-radius:0 var(--radius) var(--radius) 0;margin-top:24px}
.note p{margin:0 0 8px}.note p:last-child{margin:0}
.fine{font-size:.95rem;color:var(--muted);margin:12px 0 0}
section.dark .fine,.hero .fine{color:#C9D2D9}
ul.tick{padding-left:1.2em}ul.tick li{margin-bottom:6px}
ol.q{padding-left:1.3em}ol.q li{margin-bottom:10px}
.cta{background:var(--graphite);color:var(--white);text-align:center;padding-block:72px}
.cta h2{margin-bottom:12px}.cta p{color:#E6EBEF;margin:0 auto 24px;max-width:56ch}
/* ---- product surfaces (illustrations) ---- */
.surface{background:var(--white);color:var(--graphite);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(14,20,26,.18);overflow:hidden}
.surface .bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;background:var(--canvas);border-bottom:1px solid var(--border);font-size:.85rem;color:var(--muted)}
.surface .bar b{color:var(--graphite)}
.surface .body{padding:18px}
.illus{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--border);background:var(--white);color:var(--muted);padding:2px 8px;border-radius:999px}
.areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.area{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:14px;border:2px solid var(--border);border-radius:10px;background:var(--white)}
.area:hover{border-color:#8A97A2}
.area[aria-pressed=true]{border-color:var(--graphite);box-shadow:inset 5px 0 0 var(--amber)}
.area h3,.area .t{display:block;font-size:1.05rem;font-weight:700;margin:0 0 6px}
.area small{display:block;color:var(--muted);font-size:.85rem;margin-top:6px;line-height:1.4}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;padding:2px 10px 2px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.chip i{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:.75rem;line-height:1;color:var(--white)}
.chip.good{background:var(--good-bg);color:var(--good);border-color:#B9DEC9}.chip.good i{background:var(--good)}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:#EBCB8D}.chip.warn i{background:var(--warn)}
.chip.crit{background:var(--crit-bg);color:var(--crit);border-color:#F2B8B2}.chip.crit i{background:var(--crit)}
.chip.none{background:var(--none-bg);color:var(--none);border-color:#CBD3DA}.chip.none i{background:var(--none)}
.detail{margin-top:14px;border:1px solid var(--border);border-radius:10px;background:var(--canvas);padding:14px 16px}
.detail h4{margin:0 0 8px;font-size:1rem}
.detail dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.95rem}
.detail dt{font-weight:700;color:var(--muted)}
.detail dd{margin:0}
.detail[hidden]{display:none}
.hero .surface{position:relative}
.phone-over{position:absolute;right:-10px;bottom:-92px;width:150px;z-index:2}
/* phones */
.phone{width:min(100%,300px);margin-inline:auto;background:var(--graphite);border-radius:34px;padding:12px;box-shadow:0 14px 44px rgba(14,20,26,.3)}
.phone .screen{background:var(--white);color:var(--graphite);border-radius:24px;overflow:hidden;min-height:440px;display:flex;flex-direction:column}
.phone .top{background:var(--canvas);border-bottom:1px solid var(--border);padding:10px 14px;font-size:.8rem;display:flex;justify-content:space-between;color:var(--muted)}
.phone .pad{padding:14px;display:flex;flex-direction:column;gap:10px;font-size:.92rem;line-height:1.45}
.bubble{padding:10px 12px;border-radius:12px;background:var(--canvas);border:1px solid var(--border)}
.bubble.me{background:var(--graphite);color:var(--white);border-color:var(--graphite);align-self:flex-end;max-width:92%}
.src{display:inline-flex;align-items:center;gap:6px;font:700 .85rem Arial,Helvetica,sans-serif;color:var(--link);background:var(--white);border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer;text-align:left}
.src:hover{background:var(--canvas)}
.mini{width:150px;border-radius:22px;padding:7px;background:var(--graphite);box-shadow:0 10px 30px rgba(14,20,26,.35)}
.mini .screen{background:var(--white);border-radius:16px;padding:10px 9px;font-size:.62rem;line-height:1.35;color:var(--graphite);min-height:190px}
.mini b{display:block;font-size:.7rem;margin-bottom:4px}
.qs{display:flex;flex-direction:column;gap:8px}
.q-btn{font:inherit;font-size:.88rem;text-align:left;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--white);cursor:pointer;color:var(--graphite)}
.q-btn[aria-pressed=true]{border-color:var(--graphite);box-shadow:inset 4px 0 0 var(--amber)}
.doc{background:var(--white);color:var(--graphite);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 28px rgba(14,20,26,.16);padding:22px;font-size:.95rem}
.doc .meta{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:12px}
.doc p{margin:0 0 10px;color:#33414D}
.hl{padding:2px 0}
.hl[data-on=true]{background:#FFE29A;color:var(--graphite);box-shadow:0 0 0 2px #FFE29A}
/* risk draft */
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:0;list-style:none}
.steps button{font:700 .92rem Arial,Helvetica,sans-serif;padding:8px 14px;border:2px solid var(--border);border-radius:999px;background:var(--white);color:var(--graphite);cursor:pointer}
.steps button[aria-selected=true]{background:var(--graphite);border-color:var(--graphite);color:var(--white)}
.stage[hidden]{display:none}
.field{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--white)}
.field small{display:block;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem}
.matrix{display:inline-grid;grid-template-columns:repeat(5,28px);gap:3px;margin-top:6px}
.matrix span{height:22px;border-radius:4px;background:var(--none-bg);border:1px solid var(--border);display:grid;place-items:center;font-size:.7rem}
.matrix .on{background:var(--warn-bg);border:2px solid var(--graphite);font-weight:700}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.verdict{margin-top:10px;font-weight:700}
/* connectivity */
.switch{display:inline-flex;border:2px solid var(--graphite);border-radius:999px;overflow:hidden}
.switch button{font:700 .92rem Arial,Helvetica,sans-serif;padding:8px 18px;border:0;background:var(--white);color:var(--graphite);cursor:pointer}
.switch button[aria-pressed=true]{background:var(--graphite);color:var(--white)}
.stack{display:grid;gap:10px}
.row-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--white);font-size:.95rem}
/* workflow */
.flow{display:flex;flex-wrap:wrap;gap:0;margin:28px 0 0;padding:0;list-style:none;counter-reset:s}
.flow li{flex:1 1 170px;position:relative;padding:16px 16px 16px 18px;background:var(--white);border:1px solid var(--border);border-left:0;font-weight:700}
.flow li:first-child{border-left:1px solid var(--border);border-radius:10px 0 0 10px}
.flow li:last-child{border-radius:0 10px 10px 0}
.flow li::before{counter-increment:s;content:counter(s);display:block;color:var(--link);font-size:.8rem;margin-bottom:4px}
.flow li span{display:block;font-weight:400;color:var(--muted);font-size:.92rem;margin-top:4px}
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.group{border-top:4px solid var(--amber);padding:16px 4px 0}
.group h3{margin-bottom:6px}.group p{margin:0;color:var(--muted)}
.audience{padding:32px;border-radius:16px;border:1px solid var(--border);background:var(--white)}
.audience ul{padding-left:1.1em;margin:14px 0 0}.audience li{margin-bottom:6px}
.audience.d{background:var(--graphite);color:var(--white);border-color:var(--graphite)}
.audience.d li,.audience.d p{color:#E6EBEF}.audience.d .tag{color:var(--amber)}
.timeline{display:grid;gap:16px;margin-top:24px;counter-reset:t}
.tstep{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:22px;border:1px solid var(--border);border-radius:14px;background:var(--white)}
.tstep::before{counter-increment:t;content:counter(t);width:48px;height:48px;border-radius:50%;background:var(--graphite);color:var(--amber);display:grid;place-items:center;font-weight:700;font-size:1.2rem}
.tstep h3{margin-top:0}.tstep p{margin:0;color:var(--muted)}
/* forms */
form{max-width:640px}
label{display:block;font-weight:700;margin:18px 0 6px}
input,textarea,select{width:100%;font:inherit;padding:11px 12px;border:1px solid #8A97A2;border-radius:var(--radius);background:var(--white);color:var(--graphite)}
textarea{min-height:130px}
.hint{font-weight:400;color:var(--muted);font-size:.95rem}
.hp{position:absolute;left:-5000px;height:0;width:0;overflow:hidden}
form .btn{margin-top:24px}
.err{color:var(--crit);font-weight:700;font-size:.95rem;margin:6px 0 0}
input[aria-invalid=true],select[aria-invalid=true]{border:2px solid var(--crit)}
.form-msg{border:2px solid var(--crit);background:var(--crit-bg);border-radius:var(--radius);padding:12px 16px;margin-bottom:12px}
.form-msg[hidden]{display:none}
footer{background:var(--canvas);border-top:1px solid var(--border);padding-block:36px;font-size:.95rem;color:var(--muted)}
footer .wrap{display:flex;gap:16px 40px;justify-content:space-between;flex-wrap:wrap}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:6px 22px;flex-wrap:wrap}
@media(max-width:900px){.hero-grid,.split{grid-template-columns:1fr;gap:32px}.split.flip>.copy{order:0}.phone-over{display:none}.groups,.grid{grid-template-columns:1fr}.grid.two{grid-template-columns:1fr}.hero::before{display:none}}
@media(max-width:800px){section{padding-block:48px}.hero{padding-block:40px 24px}th,td{padding:10px}.tstep{grid-template-columns:1fr}.areas{grid-template-columns:1fr}.flow li,.flow li:first-child,.flow li:last-child{border-left:1px solid var(--border);border-radius:0;flex-basis:100%;margin-bottom:-1px}header.top{position:static}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media(prefers-reduced-motion:no-preference){.stage:not([hidden]),.detail:not([hidden]){animation:rise .25s ease-out}@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}
@media(max-width:700px){
table.rows,table.rows tbody,table.rows tr,table.rows th,table.rows td{display:block;width:100%}
table.rows thead{position:absolute;left:-5000px}
table.rows tr{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
table.rows th[scope=row]{border:0;background:var(--canvas)}
table.rows td{border:0;border-top:1px solid var(--border)}
table.rows td::before{content:attr(data-label);display:block;font-weight:700;font-size:.85rem;color:var(--muted);margin-bottom:2px}
}

/* utilities (the site's content-security policy forbids inline style attributes) */
.h1-plain{font-size:clamp(2rem,4.5vw,3rem);margin:0 0 14px}.mt8{margin:8px 0 0}.live-line{min-height:1.6em}.narrow{max-width:760px}.mb12{margin:0 0 12px}.mb10{margin:0 0 10px}.m0{margin:0}
.mt0{margin-top:0}.mt14{margin-top:14px}.mt16{margin-top:16px}.mt18{margin-top:18px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mt28{margin-top:28px}.mt32{margin-top:32px}.mt36{margin-top:36px}.mt40{margin-top:40px}.mt44{margin-top:44px}.mt48{margin-top:48px}
.flat{box-shadow:none}.h2-sm{font-size:1.7rem}.blk{display:block}.rel{position:relative}.ink{color:var(--graphite)}.lnk-amber{color:#FFD98A}.ink-link{color:#755000}
.quote{margin:10px 0 0;padding:10px 12px;background:#FFF6DC;border-left:4px solid var(--amber)}