/* /work/aos/ in the Practice Portal design language AOS shares (practiceportal-site/style.css):
   teal #0f766e, Archivo display, Source Sans 3 body, JetBrains Mono labels. White ground with
   a very light teal tint. Everything scoped under .cs-aos. */
.cs-aos{--ink:#101f1b;--text:#2b3a35;--muted:#5f6d67;--line:#e3e8e6;--card:#fff;--tint:#f2f8f7;
  --accent:#0f766e;--accent-ink:#0a4f49;--soft:#e3f1ef;
  --display:"Archivo",system-ui,sans-serif;--body:"Source Sans 3",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  background:#fff;color:var(--text);font:400 18px/1.6 var(--body);overflow:hidden}
.cs-aos *{box-sizing:border-box}
.cs-aos section{border-bottom:0}
.cs-aos h1,.cs-aos h2,.cs-aos h3{font-family:var(--display);color:var(--ink);letter-spacing:-.022em;line-height:1.08;margin:0 0 .5em;max-width:none}
.cs-aos h1{font-size:clamp(40px,5vw,66px);font-weight:800}
.cs-aos h2{font-size:clamp(28px,3.1vw,40px);font-weight:700}
.cs-aos h3{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.cs-aos p{margin:0 0 1em}
.cs-aos img{display:block;width:100%;height:auto}
.cs-aos figure{margin:0}
.cs-aos .ao-w{max-width:1140px;margin:0 auto;padding:0 28px}
.cs-aos .ao-eyebrow{font:500 12.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.cs-aos .ao-btn{display:inline-flex;align-items:center;border-radius:9px;padding:14px 22px;font:600 16px/1 var(--body);
  border:1px solid var(--line);color:var(--ink);background:#fff;text-decoration:none}
.cs-aos .ao-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.cs-aos .ao-btn.pri:hover{background:var(--accent-ink)}
.cs-aos .ao-btn:not(.pri):hover{border-color:var(--accent)}

/* centred opening over a wide stage that is wider than the column */
.cs-aos .ao-open{padding:96px 0 0;background:linear-gradient(180deg,#fff 0,#fff 55%,var(--tint) 55%,var(--tint) 100%)}
.cs-aos .ao-center{text-align:center;max-width:900px}
.cs-aos .ao-center h1{margin-left:auto;margin-right:auto;max-width:18ch}
.cs-aos .ao-lede{font-size:21px;color:var(--muted);max-width:40rem;margin:0 auto}
.cs-aos .ao-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:32px 0 64px}
.cs-aos .ao-stage{max-width:1320px;margin:0 auto;padding:0 28px 96px}
.cs-aos .ao-chrome{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-bottom:0;
  border-radius:14px 14px 0 0;padding:12px 16px}
.cs-aos .ao-chrome span{width:10px;height:10px;border-radius:50%;background:#d7dedb}
.cs-aos .ao-chrome em{font:500 12px/1 var(--mono);font-style:normal;color:var(--muted);margin-left:12px}
.cs-aos .ao-stage img{border:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:0 50px 90px -40px rgba(10,79,73,.35)}
.cs-aos .ao-stage figcaption{text-align:center;font-size:14px;color:var(--muted);margin-top:14px}

/* two ways in: copy beside a real comparison */
.cs-aos .ao-two{padding:110px 0 100px}
.cs-aos .ao-twogrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
.cs-aos .ao-tablewrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.cs-aos .ao-table{width:100%;border-collapse:collapse;font-size:16px}
.cs-aos .ao-table th,.cs-aos .ao-table td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--line)}
.cs-aos .ao-table thead th{font:700 14px/1.3 var(--display);color:var(--ink);background:#fafbfb}
.cs-aos .ao-table thead th.hl{background:var(--accent);color:#fff}
.cs-aos .ao-table tbody th{font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:22%}
.cs-aos .ao-table td:last-child{background:var(--tint);color:var(--ink);font-weight:600}
.cs-aos .ao-table tr:last-child th,.cs-aos .ao-table tr:last-child td{border-bottom:0}

/* the component only this page has: one platform in three firms' brands */
.cs-aos .ao-brand{padding:100px 0;background:var(--tint)}
.cs-aos .ao-brandhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:40px}
.cs-aos .ao-brandhead p{color:var(--muted)}
.cs-aos .ao-tens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cs-aos .ao-ten{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 24px 50px -32px rgba(16,31,27,.3);
  font-family:var(--body)}
.cs-aos .ao-tbar{display:flex;align-items:center;gap:9px;padding:14px 18px;border-bottom:1px solid var(--line)}
.cs-aos .ao-tbar .dot{width:12px;height:12px;border-radius:3px;background:var(--t)}
.cs-aos .ao-tbar b{font:700 15.5px/1.2 var(--display);color:var(--ink)}
.cs-aos .ao-tbar .tag{margin-left:auto;font:500 10.5px/1 var(--mono);letter-spacing:.08em;border:1px solid var(--line);border-radius:5px;padding:4px 6px;color:var(--muted)}
.cs-aos .ao-tnav{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.cs-aos .ao-tnav span{padding:5px 9px;border-radius:7px}
.cs-aos .ao-tnav .on{background:var(--tt);color:var(--t);font-weight:700}
.cs-aos .ao-tbody{padding:18px;background:#f7f8f8}
.cs-aos .ao-tbody .hi{font:700 18px/1.2 var(--display);color:var(--ink);margin-bottom:14px}
.cs-aos .ao-tstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.cs-aos .ao-tstats div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 13px;position:relative}
.cs-aos .ao-tstats small{display:block;font:500 9.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cs-aos .ao-tstats b{display:block;font:700 22px/1.2 var(--display);color:var(--t);margin:4px 0 6px}
.cs-aos .ao-tstats i{display:block;height:5px;border-radius:3px;background:var(--t)}
.cs-aos .ao-tcard{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 13px}
.cs-aos .ao-tcard .ai,.cs-aos .ao-agents .ai{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--tt,var(--soft));color:var(--t,var(--accent));font:700 12px/1 var(--display)}
.cs-aos .ao-tcard b{display:block;font-size:14.5px;color:var(--ink)}
.cs-aos .ao-tcard small{font-size:12.5px;color:var(--muted)}
.cs-aos .ao-tcard .btn{margin-left:auto;font-size:13px;font-weight:700;color:var(--t);border:1.5px solid var(--t);border-radius:7px;padding:5px 10px}
.cs-aos .ao-ill{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right;margin:16px 0 0}

/* modules */
.cs-aos .ao-mods{padding:110px 0 100px}
.cs-aos .ao-modgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:center}
.cs-aos .ao-agents{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:22px;margin-top:10px}
.cs-aos .ao-agents p{font-size:17px;color:var(--muted);margin:0}
.cs-aos .ao-modlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cs-aos .ao-modlist li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 16px 16px;font:600 15.5px/1.3 var(--display);color:var(--ink);
  position:relative;min-height:84px;display:flex;align-items:flex-end}
.cs-aos .ao-modlist li::before{content:"";position:absolute;top:14px;left:16px;width:10px;height:10px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.cs-aos .ao-modlist li:nth-child(9){background:var(--accent);color:#fff;border-color:var(--accent)}
.cs-aos .ao-modlist li:nth-child(9)::before{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}

/* deployment: sticky heading beside numbered steps */
.cs-aos .ao-deploy{padding:100px 0;border-top:1px solid var(--line)}
.cs-aos .ao-depgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.cs-aos .ao-dephead{position:sticky;top:96px}
.cs-aos .ao-dephead p{color:var(--muted)}
.cs-aos .ao-steps{list-style:none;margin:0;padding:0;border-left:2px solid var(--soft)}
.cs-aos .ao-steps li{display:flex;gap:22px;padding:0 0 34px 0;position:relative}
.cs-aos .ao-steps li:last-child{padding-bottom:0}
.cs-aos .ao-steps .n{flex:none;margin-left:-19px;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--accent);
  display:grid;place-items:center;font:500 12.5px/1 var(--mono);color:var(--accent)}
.cs-aos .ao-steps li:last-child .n{background:var(--accent);color:#fff}
.cs-aos .ao-steps h3{margin:5px 0 6px}
.cs-aos .ao-steps p{color:var(--muted);margin:0}

/* decisions as a numbered list */
.cs-aos .ao-calls{padding:20px 0 100px}
.cs-aos .ao-calllist{list-style:none;margin:36px 0 0;padding:0;counter-reset:c}
.cs-aos .ao-calllist li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;padding:30px 0;border-top:1px solid var(--line)}
.cs-aos .ao-calllist h3{font-size:22px}
.cs-aos .ao-calllist p{margin:0;color:var(--text)}

/* next */
.cs-aos .ao-next{padding:0 0 90px}
.cs-aos .ao-next a{display:flex;align-items:center;gap:22px;text-decoration:none;background:var(--tint);border:1px solid #cfe5e1;border-radius:14px;padding:28px 32px}
.cs-aos .ao-next small{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.cs-aos .ao-next b{font:700 24px/1.2 var(--display);color:var(--ink)}
.cs-aos .ao-next span{margin-left:auto;width:48px;height:48px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:20px}
.cs-aos .ao-next a:hover{border-color:var(--accent)}

@media (max-width:980px){
  .cs-aos .ao-w{padding:0 20px}
  .cs-aos .ao-open{padding-top:52px}
  .cs-aos .ao-lede{font-size:18px}
  .cs-aos .ao-acts{margin-bottom:40px}
  .cs-aos .ao-stage{padding:0 20px 56px}
  .cs-aos .ao-twogrid,.cs-aos .ao-brandhead,.cs-aos .ao-modgrid,.cs-aos .ao-depgrid,.cs-aos .ao-calllist li{grid-template-columns:minmax(0,1fr);gap:24px}
  .cs-aos .ao-two,.cs-aos .ao-brand,.cs-aos .ao-mods,.cs-aos .ao-deploy{padding:60px 0}
  .cs-aos .ao-table{font-size:15.5px}
  .cs-aos .ao-table thead{display:none}
  .cs-aos .ao-table tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .cs-aos .ao-table tr:last-child{border-bottom:0}
  .cs-aos .ao-table tbody th{grid-column:1/-1;width:auto;padding:14px 16px 4px;border:0}
  .cs-aos .ao-table td{border:0;padding:8px 16px 14px}
  .cs-aos .ao-table td::before{content:attr(data-l);display:block;font:700 12px/1.3 var(--display);color:var(--accent);margin-bottom:4px}
  .cs-aos .ao-tens{grid-template-columns:minmax(0,1fr)}
  .cs-aos .ao-modlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-aos .ao-dephead{position:static}
  .cs-aos .ao-steps{margin-left:18px}
  .cs-aos .ao-calllist li{gap:8px}
  .cs-aos .ao-next a{padding:22px;flex-wrap:wrap;gap:10px 16px}
  .cs-aos .ao-next small{width:100%}
  .cs-aos .ao-next b{font-size:20px;flex:1}
}