:root{
  --paper:#FAF9F6; --ink:#0F0F0D; --amber:#E0A43A; --mist:#E3E0D6; --white:#fff; --muted:#55534C;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.55;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:8px}

.top{display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);z-index:10}
.brand{display:block;line-height:0}
.brand img{height:44px;width:auto;display:block}
nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,30px);font-size:16px}
nav a{text-decoration:none}
nav a:not(.nav-cta):hover{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:6px}
.nav-cta{background:var(--ink);color:#fff;padding:9px 16px;border-radius:6px;white-space:nowrap}
.nav-cta:hover{background:var(--amber);color:var(--ink)}
.lang{font:inherit;font-size:14px;font-weight:600;background:none;border:1.5px solid var(--ink);border-radius:99px;padding:5px 11px;cursor:pointer;color:var(--ink)}
.lang:hover{background:var(--ink);color:#fff}

.announce{background:#ECE9E0;text-align:center;font-size:15px;padding:8px var(--pad)}
.announce a{font-weight:600;text-underline-offset:3px;text-decoration-color:var(--amber);text-decoration-thickness:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hero{position:relative;overflow:hidden;min-height:calc(100svh - 118px);display:grid;grid-template-rows:auto auto 1fr;align-content:start;padding:clamp(28px,5vw,64px) var(--pad) clamp(36px,4vw,56px)}
h1{position:relative;z-index:2;margin:0;max-width:12.5em;font-family:"Newsreader",Georgia,"Times New Roman",serif;font-weight:300;font-size:clamp(50px,8.4vw,132px);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.lead{max-width:34em;font-size:clamp(18px,1.6vw,22px);color:var(--muted);margin:28px 0 0}
.actions{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,40px)}
.hero-next{position:relative;z-index:2;align-self:end;justify-self:start;margin-top:56px;font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(34px,4.2vw,62px);line-height:1;letter-spacing:-.03em;text-decoration:none}
.hero-next:hover{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:3px;text-underline-offset:8px}
.hero-mark{position:absolute;z-index:0;right:-4vw;bottom:calc(min(44vw,680px) * -.42);width:min(44vw,680px);height:auto;transform:rotate(-14deg);filter:drop-shadow(0 40px 60px rgba(15,15,13,.22));pointer-events:none}
.ask{position:absolute;z-index:3;right:var(--pad);bottom:clamp(20px,3vw,40px);display:flex;align-items:center;gap:8px;width:min(380px,calc(100% - 2*var(--pad)));background:var(--white);border:1.5px solid var(--mist);border-radius:99px;padding:6px 6px 6px 20px;box-shadow:0 18px 40px -20px rgba(15,15,13,.35)}
.ask input{flex:1;min-width:0;font:inherit;font-size:15px;border:0;background:none;color:var(--ink);padding:6px 0}
.ask input:focus{outline:none}
.ask:focus-within{border-color:var(--ink)}
.ask button{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:grid;place-items:center;cursor:pointer}
.ask button:hover{background:var(--amber);color:var(--ink)}
.ch-body .queue{margin-top:30px}
.btn{display:inline-block;font:inherit;font-weight:500;font-size:17px;padding:12px 20px;border-radius:6px;text-decoration:none;border:2px solid var(--ink);cursor:pointer}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* approval queue */
.queue{background:var(--white);border-radius:22px;padding:22px;box-shadow:0 1px 0 var(--mist),0 24px 48px -28px rgba(16,21,40,.35)}
.q-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.q-head h2{margin:0;font-size:19px;font-weight:650}
.q-count{margin:0;font-size:15px;color:var(--muted)}
.q-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.q-item{border:1.5px solid var(--mist);border-radius:14px;padding:14px 16px;display:grid;gap:10px}
.q-item.enter{opacity:0;transform:translateY(8px);animation:arrive .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*420ms + 300ms)}
@keyframes arrive{to{opacity:1;transform:none}}
.q-item .who-tag{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.q-item .who-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none}
.q-item p{margin:0;font-size:16px;line-height:1.45}
.q-btns{display:flex;gap:8px}
.q-btns button{font:inherit;font-size:14px;font-weight:600;padding:6px 14px;border-radius:99px;border:1.5px solid var(--ink);background:none;cursor:pointer;color:var(--ink)}
.q-btns .ok{background:var(--ink);color:#fff}
.q-btns .ok:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.q-btns button:not(.ok):hover{background:var(--mist)}
.q-item.done{background:var(--amber);border-color:var(--amber);transition:background .3s;animation:none;opacity:1;transform:none}
.q-item.done .who-tag::before{background:var(--ink)}
.q-item.skipped{background:transparent;border-style:dashed;color:var(--muted);animation:none;opacity:1;transform:none}
.q-item.skipped .who-tag{color:var(--muted)}
.q-item.skipped .who-tag::before{background:var(--mist)}
.q-state{font-size:15px;font-weight:600;margin:0}
.q-empty{font-size:16px;color:var(--muted);padding:6px 2px}
.q-empty button{font:inherit;font-size:15px;font-weight:600;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;color:var(--ink)}
.q-note{margin:14px 2px 0;font-size:14px;color:var(--muted)}

/* sections */
.section{padding:clamp(56px,8vw,112px) var(--pad);border-top:1.5px solid var(--mist)}
.sec-title{text-wrap:balance;margin:0 0 clamp(28px,4vw,56px);font-size:clamp(34px,5vw,64px);line-height:1;font-weight:700;font-stretch:78%;letter-spacing:-.02em;font-variation-settings:"wdth" 78;max-width:14em}
h3{margin:0;font-size:clamp(22px,2.3vw,30px);line-height:1.15;font-weight:650;letter-spacing:-.01em}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(16px,4vw,64px);padding:26px 0;border-top:1.5px solid var(--mist)}
.rows li:last-child{border-bottom:1.5px solid var(--mist)}
.rows p,.who p,.steps p{margin:0;color:var(--muted);max-width:32em}

.principle{background:var(--ink);color:var(--paper);padding:clamp(64px,10vw,140px) var(--pad)}
.principle h2{text-wrap:balance;margin:0;font-size:clamp(44px,8vw,116px);line-height:.95;font-weight:700;font-stretch:75%;letter-spacing:-.025em;font-variation-settings:"wdth" 75;max-width:11em}
.principle p{margin:28px 0 0;max-width:34em;font-size:clamp(18px,1.7vw,22px);color:#CFCCC2}

.who{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.who>div{padding:4px clamp(16px,3vw,40px) 4px 0;border-left:1.5px solid var(--mist);padding-left:clamp(16px,2.4vw,32px)}
.who>div:first-child{border-left:0;padding-left:0}
.who h3{margin-bottom:12px}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);counter-reset:s}
.steps li{counter-increment:s;border-top:4px solid var(--amber);padding-top:16px}
.steps li::before{content:counter(s);display:block;font-size:clamp(48px,6vw,84px);line-height:1;font-weight:700;font-stretch:75%;font-variation-settings:"wdth" 75;color:var(--ink);margin-bottom:10px}
.steps h3{margin-bottom:10px}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.contact .lead{margin-top:0}
.mail{margin:24px 0 0;font-size:clamp(20px,2.2vw,28px);font-weight:600}
.mail a{text-decoration-color:var(--amber);text-decoration-thickness:3px;text-underline-offset:6px}
.form{background:var(--white);border-radius:22px;padding:clamp(20px,3vw,34px);display:grid;gap:16px}
.form label{display:grid;gap:6px;font-weight:600;font-size:16px}
.form input,.form select,.form textarea{font:inherit;font-weight:400;padding:12px 14px;border:1.5px solid var(--mist);border-radius:12px;background:var(--paper);color:var(--ink);width:100%}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.err{margin:0;color:#B00020;font-size:15px;font-weight:600}
.form .btn{justify-self:start}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:28px var(--pad) 40px;border-top:1.5px solid var(--mist);font-size:15px;color:var(--muted)}

.integ{padding:clamp(28px,4vw,48px) var(--pad);border-top:1.5px solid var(--mist);display:grid;gap:14px}
.integ h2{margin:0;font-size:18px;font-weight:650}
.integ-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 34px;font-size:clamp(20px,2.4vw,30px);font-weight:650;letter-spacing:-.01em}
.integ p{margin:0;color:var(--muted);font-size:16px}

.chapters{display:grid;gap:0}
.chapter{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,5vw,80px);padding:clamp(28px,4vw,56px) 0;border-top:1.5px solid var(--mist)}
.chapter:last-child{border-bottom:1.5px solid var(--mist)}
.ch-head{align-self:start;position:sticky;top:96px}
.ch-head h3{font-size:clamp(28px,3.4vw,44px);font-weight:700;font-stretch:80%;font-variation-settings:"wdth" 80;letter-spacing:-.02em;line-height:1.02}
.ch-head p{margin:14px 0 0;color:var(--muted);max-width:22em}
.ch-list{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.ch-list li{padding-bottom:22px;border-bottom:1.5px solid var(--mist)}
.ch-list li:last-child{border-bottom:0;padding-bottom:0}
.ch-list h4{margin:0 0 6px;font-size:clamp(19px,1.8vw,23px);font-weight:650;letter-spacing:-.01em}
.ch-list p{margin:0;color:var(--muted);max-width:36em}

.chat{margin-top:30px;background:var(--white);border-radius:22px;padding:18px;box-shadow:0 1px 0 var(--mist),0 24px 48px -30px rgba(15,15,13,.35)}
.chat-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.chat-head .dot{width:9px;height:9px;border-radius:50%;background:var(--amber)}
.chat-head h4{margin:0;font-size:16px;font-weight:650}
.chat-note{margin-left:auto;font-size:13px;color:var(--muted)}
.chat-log{display:grid;gap:8px;min-height:120px;align-content:start}
.msg{max-width:84%;padding:10px 14px;border-radius:16px;font-size:16px;line-height:1.4}
.msg.you{justify-self:end;background:var(--ink);color:var(--paper);border-bottom-right-radius:4px}
.msg.agent{justify-self:start;background:var(--paper);border:1.5px solid var(--mist);border-bottom-left-radius:4px}
.msg.agent.handoff{background:var(--amber);border-color:var(--amber)}
.msg.typing{color:var(--muted);letter-spacing:.2em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips button{font:inherit;font-size:14px;font-weight:600;padding:7px 14px;border-radius:99px;border:1.5px solid var(--ink);background:none;color:var(--ink);cursor:pointer}
.chips button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.chips button:disabled{opacity:.45;cursor:default}

.meas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.meas li{border-top:4px solid var(--ink);padding-top:16px}
.meas h3{margin-bottom:8px}
.meas p{margin:0;color:var(--muted);max-width:20em}

.cta-band{background:var(--amber);color:var(--ink);padding:clamp(48px,7vw,96px) var(--pad);display:grid;gap:18px;justify-items:start}
.cta-band h2{margin:0;font-size:clamp(36px,5.6vw,76px);line-height:.98;font-weight:700;font-stretch:76%;font-variation-settings:"wdth" 76;letter-spacing:-.025em;text-wrap:balance;max-width:14em}
.cta-band p{margin:0;max-width:34em;font-size:clamp(18px,1.6vw,21px)}
.cta-band .btn.primary:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

@media (max-width:900px){
  .chapter{grid-template-columns:1fr}
  .ch-head{position:static}
  .meas{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .hero{min-height:0;padding-bottom:0}
  .hero-mark{position:relative;right:auto;bottom:auto;justify-self:end;width:78vw;margin:24px -14vw -22vw 0}
  .ask{position:relative;right:auto;bottom:auto;width:100%;margin-top:28px}
  .rows li{grid-template-columns:1fr;gap:8px}
  .who{grid-template-columns:1fr;gap:28px}
  .who>div{border-left:0;padding-left:0;border-top:1.5px solid var(--mist);padding-top:20px}
  .who>div:first-child{border-top:0;padding-top:0}
  .steps{grid-template-columns:1fr 1fr}
  nav a:not(.nav-cta){display:none}
}
@media (max-width:520px){ .steps,.meas{grid-template-columns:1fr} body{font-size:17px} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .q-item.enter{animation:none;opacity:1;transform:none}
  .q-item.done{transition:none}
}

/* unified type: serif headings (hero), sans UI (nav) */
.sec-title,.principle h2,.cta-band h2,.ch-head h3,.steps li::before{font-family:"Newsreader",Georgia,serif;font-weight:300;font-stretch:normal;font-variation-settings:normal;letter-spacing:-.03em;line-height:1}
.sec-title{font-size:clamp(40px,5.6vw,80px)}
.principle h2{font-size:clamp(48px,7.6vw,118px)}
.cta-band h2{font-size:clamp(42px,6vw,88px)}
.ch-head h3{font-size:clamp(32px,3.8vw,52px)}
.who h3,.steps h3,.meas h3{font-family:"Newsreader",Georgia,serif;font-weight:400;letter-spacing:-.02em;font-size:clamp(26px,2.6vw,34px)}
.steps li::before{font-size:clamp(56px,6.4vw,92px)}
.integ h2{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em}
.integ-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;font-size:20px}
.integ-list li{display:grid;place-items:center;min-height:84px;padding:16px;background:var(--white);border:1.5px solid var(--mist);border-radius:10px}
.integ-list img{max-height:32px;max-width:70%}
@media (max-width:700px){.integ-list{grid-template-columns:repeat(2,1fr)}}

/* integration groups + security */
.integ-g{margin:14px 0 0;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.integ-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.integ-list li{min-height:72px;font-size:18px;font-weight:600;text-align:center}
.sec-lead{margin:-12px 0 clamp(28px,4vw,48px)}
.sec-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,28px)}
.sec-list li{border-top:4px solid var(--ink);padding-top:16px}
.sec-list h3{font-family:"Newsreader",Georgia,serif;font-weight:400;letter-spacing:-.02em;font-size:clamp(26px,2.4vw,32px);margin-bottom:8px}
.sec-list p{margin:0;color:var(--muted)}
@media (max-width:900px){.sec-list{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sec-list{grid-template-columns:1fr}}

#models{border-top:0;padding-top:0}
.integ-list li img{display:block;max-height:30px;max-width:75%;filter:grayscale(1) contrast(1.1)}