/* Light, modern. White space and soft surfaces; the logo teal is an accent.
   Teal on white is only 2.5:1, so it is used for fills (black text on it is 8.4:1)
   and for large decorative shapes -- never for body text. Links use a deeper teal (5.2:1). */
:root{
  --ink:#16201f;--muted:#5d6b6a;--line:#e6eeed;--bg:#fff;--soft:#f5fbfa;
  --teal:#16b8ae;--teal-soft:#e3f6f4;--teal-dark:#0b7a75;--radius:1rem;
  --shadow:0 1px 2px rgba(16,40,38,.05),0 8px 24px rgba(16,40,38,.06);
}
*{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
.narrow{max-width:42rem}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;border-radius:.5rem;box-shadow:var(--shadow);z-index:10}
a{color:var(--teal-dark);text-underline-offset:.2em}a:hover{color:#000}
h1,h2,h3{line-height:1.2;color:#000;font-weight:650;letter-spacing:-.015em}
h1{font-size:2.25rem;margin:0 0 1rem}h2{font-size:1.5rem;margin:2.5rem 0 .6rem}h3{font-size:1.15rem;margin:0 0 .5rem}

.top{position:sticky;top:0;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);z-index:5}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.85rem;padding-bottom:.85rem;flex-wrap:wrap}
.brand{font-weight:650;color:#000;text-decoration:none;font-size:1.05rem;display:flex;align-items:center;letter-spacing:-.01em}
.brand img{height:3.6rem;width:auto;display:block}
nav{display:flex;gap:.25rem}
nav a{padding:.45rem .9rem;border-radius:999px;text-decoration:none;color:var(--muted);font-size:.97rem}
nav a:hover{background:var(--soft);color:#000}
nav a[aria-current=page]{background:var(--teal-soft);color:#000;font-weight:600}

.lead{font-size:1.2rem;color:var(--muted);max-width:40rem}
.block{padding-top:2.5rem;padding-bottom:1.25rem}
.brands{list-style:none;padding:0;margin:0 0 1rem}
.brands li{padding:.9rem 0;border-bottom:1px solid var(--line)}
.brands li:last-child{border-bottom:0}
.home h1{font-size:2.4rem}

.btn{display:inline-block;background:var(--teal);color:#000;border:1px solid var(--teal);padding:.7rem 1.4rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:1rem;cursor:pointer;margin:.25rem .5rem .25rem 0;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{background:#13a39a;border-color:#13a39a;color:#000;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.ghost{background:#fff;border-color:#c9dad8;color:#000}.btn.ghost:hover{background:var(--soft);border-color:var(--teal)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem;margin-top:1.5rem}
.card,.product{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:#fff;box-shadow:var(--shadow)}
.card::before,.product::before{content:"";display:block;width:2.25rem;height:.28rem;border-radius:99px;background:var(--teal);margin-bottom:1rem}
.product{margin:1.25rem 0}.product h2{margin-top:0}
.muted{color:var(--muted)}.small{font-size:.9rem;color:var(--muted)}
.prose ul{padding-left:1.2rem}.prose li{margin:.4rem 0}

form label{display:block;font-weight:600;font-size:.95rem;margin:1.1rem 0 .35rem}
input[type=text],input[type=email],textarea{width:100%;padding:.75rem .9rem;border:1px solid #cfdcda;border-radius:.7rem;font:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{padding:.9rem 1.1rem;border-radius:.8rem;margin:1.25rem 0}
.note.ok{background:var(--teal-soft);border:1px solid #bfe9e5}.note.bad{background:#fdf0f0;border:1px solid #f0c4c4}
.cf-turnstile{margin:1.25rem 0}

.foot{background:var(--soft);border-top:1px solid var(--line);margin-top:4rem;padding:2.25rem 0;font-size:.95rem;color:var(--muted)}
.foot p{margin:.35rem 0}.foot strong{color:#000}.foot a{color:var(--teal-dark)}.foot a:hover{color:#000}

@media (max-width:40rem){h1{font-size:1.8rem}nav a{padding:.4rem .65rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}