:root{--ink:#14181f;--mute:#4b5563;--line:#d8dde3;--soft:#f3f5f7;--accent:#0e5a4d;--accent-dark:#093d34;--bar:#0a463c;--mint:#8fd1c4;--logo-h:44px}
*{box-sizing:border-box}
html{scroll-padding-top:72px}
[hidden]{display:none!important}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.6 "Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1113px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:30}

/* Navbar */
.top{background:var(--bar);position:sticky;top:0;z-index:20; height: 20%;}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.05rem;text-decoration:none}
.brand img{display:block; height: 100px; width: auto;}
nav{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
nav a{color:var(--ink);text-decoration:none;border:1px solid #aab3bd;border-radius:3px;padding:6px 13px;background:#fff;font-weight:500;font-size:.95rem;transition:background-color .15s ease,color .15s ease}
nav a:hover{background:#dfe7e5;border-color:#dfe7e5}
nav a.nav-cta{background:var(--mint);border-color:var(--mint);color:#06261f}
nav a.nav-cta:hover{background:#fff;border-color:#fff}

/* Type */
h1{font-size:clamp(2rem,5.5vw,3.1rem);line-height:1.12;letter-spacing:-.015em;margin:0 0 14px}
h2{font-size:1.6rem;line-height:1.2;margin:0 0 12px}
h3{font-size:1.1rem;margin:0 0 6px}

/* Buttons */
.btn{display:inline-block;padding:10px 18px;border:1px solid var(--ink);border-radius:3px;color:var(--ink);text-decoration:none;font-weight:600;background:#fff}
.btn:hover{background:#e8ecef}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}

/* Hero (centered) */
.hx{position:relative;overflow:hidden;padding:36px 0 40px;text-align:center}
.hx-bg{position:absolute;inset:0;width:100%;height:100%;color:var(--accent);opacity:.16;pointer-events:none}
.hx-inner{position:relative;display:flex;flex-direction:column;align-items:center}
.hx-title{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .28em;font-size:clamp(2.4rem,8vw,5rem);line-height:1.02;letter-spacing:-.03em;font-weight:800}
.hx-b{font-weight:400;font-size:.45em;color:var(--mute);letter-spacing:0}
.hx-c{color:transparent;-webkit-text-stroke:2px var(--accent)}
@supports not (-webkit-text-stroke:1px #000){.hx-c{color:var(--accent)}}
.hx-rule{display:block;width:96px;height:3px;background:var(--accent);margin:16px 0}
.hx-sub{font-size:clamp(1.15rem,3vw,1.5rem);font-weight:700;margin:0 0 8px;max-width:36ch}
.hx-lead{max-width:58ch;color:var(--mute);font-size:1.05rem;margin:0 0 20px}
.hx-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:28px}
.hx-chat{width:100%;max-width:560px;text-align:left}

/* Older hero layout, kept in case it is still used */
.hero{padding:36px 0 32px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start}
.lead{font-size:1.1rem;color:var(--mute);margin:0 0 20px;max-width:52ch}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Chat example */
.chat{margin:0;border:1px solid var(--line);background:var(--soft);padding:14px;border-radius:4px}
.chat figcaption{font-size:.85rem;color:var(--mute);margin-bottom:10px}
.chat p{margin:0 0 8px;padding:9px 12px;border-radius:4px;background:#fff;border:1px solid var(--line)}
.chat p:last-child{margin-bottom:0}
.chat .bot{background:#e6f0ee;border-color:#c5dcd6}
.chat p span{display:block;font-size:.75rem;font-weight:700;color:var(--mute);margin-bottom:2px}
.chat-input{display:none;align-items:center;margin-top:10px;min-height:42px;padding:8px 12px;border:1px solid #cdd5db;background:#fff;border-radius:3px}
.chat.live .chat-input{display:flex}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--ink);margin-left:2px}
.dots{display:inline-flex;gap:4px;align-items:center;height:1.3em}
.chat p .dots{margin:0;font-size:inherit;font-weight:400}
.dots i{width:6px;height:6px;border-radius:50%;background:#8a97a5;animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.replay{display:inline-block;margin-top:10px;background:none;border:1px solid var(--line);border-radius:3px;padding:5px 12px;font:inherit;font-size:.88rem;color:var(--mute);cursor:pointer}
.replay:hover{background:#fff}

/* Sections */
.block{padding:36px 0;border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
ul,ol{padding-left:22px;margin:8px 0 0}
li{margin-bottom:6px}
.steps{max-width:70ch}
.steps li{margin-bottom:10px;padding-left:4px}
.narrow{max-width:66ch}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}

/* Flow diagram */
.flow{display:flex;align-items:stretch;margin:0 0 22px}
.flow-box{flex:1;border:1px solid var(--line);background:#fff;padding:12px 16px;border-radius:3px}
.flow-box.main{border-color:var(--accent);background:#e6f0ee}
.flow-box b{display:block}
.flow-box span{color:var(--mute);font-size:.92rem;line-height:1.4;display:block}
.flow-arrow{flex:none;width:36px;height:2px;align-self:center;background:var(--accent);position:relative}
.flow-arrow:after{content:"";position:absolute;right:-1px;top:-4px;border-left:8px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent}

/* Footer and legal pages */
footer{border-top:1px solid var(--line);padding:22px 0 32px;color:var(--mute);font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer a{color:var(--mute)}
.doc{max-width:720px;padding:32px 20px 56px}
.doc h1{font-size:2rem}
.doc h2{font-size:1.2rem;margin-top:24px}
.doc .date{color:var(--mute)}

/* Hero title entrance, only when the visitor has not asked for less motion */
@media (prefers-reduced-motion:no-preference){
  .hx-a,.hx-b,.hx-c{animation:hx-in .7s ease-out both}
  .hx-b{animation-delay:.25s}
  .hx-c{animation-delay:.5s}
  @keyframes hx-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .dots i{animation:none;opacity:.6}
}

@media (max-width:760px){
  :root{--logo-h:36px}
  html{scroll-padding-top:110px}
  .hero-grid,.two{grid-template-columns:1fr}
  .hx{padding:28px 0 32px}
  nav{margin-left:0;flex-basis:100%}
  .flow{flex-direction:column}
  .flow-arrow{width:2px;height:24px;align-self:center}
  .flow-arrow:after{right:auto;left:-4px;top:auto;bottom:-1px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--accent);border-bottom:0}
}