/* solutions.avahi.ai. Colors and type come from tokens.css only (spec 11.2). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--phantom);font-family:var(--font);font-size:17px;line-height:1.6}
a{color:var(--royal)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--azure);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--white);padding:8px 12px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top{background:var(--white);border-bottom:1px solid var(--cloud)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
/* The lockup: the Avahi logo leads to avahi.ai, "Solutions" to this site's home. */
.lockup{display:flex;align-items:center;gap:16px}
.brand svg{width:132px;height:auto;display:block}
.site-name{color:var(--phantom);text-decoration:none;font-weight:700;font-size:20px;padding-left:16px;border-left:2px solid var(--cloud);line-height:1.4}
.site-name:hover{color:var(--royal)}
.top nav{display:flex;gap:20px;flex-wrap:wrap}
.top nav a{color:var(--arsenic);text-decoration:none;font-weight:600;font-size:15px;padding:4px 0;border-bottom:2px solid transparent}
.top nav a:hover{color:var(--royal)}
.top nav a[aria-current="page"]{color:var(--royal);border-bottom-color:var(--royal)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 20px;font-size:14px;color:var(--smoke)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--steel)}
.crumbs a{color:var(--sky);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.hero{background:var(--black);color:var(--white);padding:64px 0 56px;border-bottom:6px solid transparent;border-image:var(--brand-gradient) 1}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.1;margin:8px 0 16px;font-weight:700;max-width:20ch}
.hero .lead{font-size:20px;max-width:60ch;color:var(--smoke)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700;color:var(--sky);margin:0}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;background:var(--brand-gradient);color:var(--white);text-decoration:none;font-weight:700;padding:12px 20px;border-radius:var(--radius-pill);transition:transform 300ms ease,filter 300ms ease,box-shadow 300ms ease,background-color 300ms ease,border-color 300ms ease}
.btn.ghost{background:transparent;border:2px solid var(--sky);color:var(--white)}
/* Hover (brand states): the gradient brightens and lifts 1px; the ghost fills with a sky tint and its border goes white. Pressing settles the lift. */
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 18px rgba(48,134,227,.35)}
.btn.ghost:hover{filter:none;background:rgba(70,186,227,.26);border-color:var(--white);box-shadow:0 6px 18px rgba(70,186,227,.3)}
.btn:active{transform:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover,.btn.ghost:hover{transform:none}}
.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px;margin:40px 0 8px}
.filters label{display:flex;flex-direction:column;font-size:14px;font-weight:600;color:var(--arsenic);gap:6px}
.filters input,.filters select{font:inherit;padding:10px 12px;border:1px solid var(--steel);border-radius:var(--radius-sm);background:var(--white);color:var(--phantom)}
.count{color:var(--graphite);font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin:16px 0 64px}
.card{background:var(--white);border:1px solid var(--cloud);border-radius:var(--radius-lg);padding:24px;height:100%;display:flex;flex-direction:column}
.card h3{margin:0 0 8px;font-size:21px;line-height:1.25}
.card h3 a{color:var(--phantom);text-decoration:none}
.card h3 a:hover{color:var(--royal)}
.card p{margin:0 0 12px;color:var(--arsenic)}
.card .meta{color:var(--graphite);font-size:14px;margin-top:auto}
.marks{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:8px}
.mark svg{height:22px;width:auto;display:block}
.mark-aws svg{height:44px}.mark-openai svg{height:64px}
.marks.big .mark svg{height:36px}.marks.big .mark-aws svg{height:72px}.marks.big .mark-openai svg{height:104px}
.hero .marks{background:var(--white);display:inline-flex;padding:12px 20px;border-radius:var(--radius-md)}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:48px;margin:48px auto}
.cols aside{background:var(--white);border:1px solid var(--cloud);border-radius:var(--radius-lg);padding:24px;align-self:start}
.facts{list-style:none;padding:0;margin:0 0 16px}.facts li{padding:8px 0;border-bottom:1px solid var(--cloud)}
.facts strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--graphite)}
h2{font-size:28px;margin:0 0 16px}
.highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;list-style:none;padding:0}
.highlights li{background:var(--white);border-left:4px solid var(--azure);padding:16px 20px;border-radius:var(--radius-sm)}
.diagram{margin:0 0 48px;background:var(--white);border:1px solid var(--cloud);border-radius:var(--radius-lg);padding:16px}
.diagram img{width:100%;height:auto;display:block}
.packages{padding-left:24px}.packages li{margin-bottom:16px}.packages h3{margin:0;font-size:19px}.packages p{margin:4px 0 0;color:var(--arsenic)}
.cta{margin:48px auto 72px;text-align:center}
.foot{background:var(--black);color:var(--steel);padding:40px 0 24px;font-size:15px}
.foot .wrap{display:grid;grid-template-columns:2fr 1fr;gap:24px 48px}.foot a{color:var(--sky)}
.foot-about p{margin:12px 0 0;max-width:56ch}
.foot-logo svg{width:120px;height:auto;display:block}
.foot-links{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.foot-links a{text-decoration:none;font-weight:600}.foot-links a:hover{text-decoration:underline}
.copy{grid-column:1/-1;margin:0;padding-top:16px;border-top:1px solid var(--arsenic);font-size:14px}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr}.site-name{font-size:18px}.filters{grid-template-columns:1fr}.cols{grid-template-columns:1fr;gap:24px}.hero{padding:40px 0}}