:root{
  --ink:#1d2b26;
  --ink-soft:#54655e;
  --paper:#ffffff;
  --band:#f2f5f2;
  --rule:#d9e2dc;
  --accent:#2f6b4f;
  --measure:38rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1.0625rem/1.72 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.5rem}

/* ---- header ---- */
.masthead{background:var(--ink);padding:1.25rem 0}
.masthead .wrap{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  align-items:baseline;justify-content:space-between;
}
.brand{
  color:#fff;text-decoration:none;
  font:600 .9375rem/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.16em;text-transform:uppercase;
}
.masthead nav{display:flex;gap:1.25rem;font-size:.875rem}
.masthead nav a{color:#a9c3b5;text-decoration:none}
.masthead nav a:hover{color:#fff}

/* ---- hero band: the signature ---- */
.band{
  background:var(--band);
  border-bottom:1px solid var(--rule);
  padding:3.5rem 0 3rem;
  margin-bottom:3rem;
}
.band h1{margin-bottom:.75rem}
.band p{margin-bottom:0;color:var(--ink-soft);font-size:1.125rem}

h1{font:600 2.125rem/1.22 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.02em;margin:0 0 1rem}
h2{font:600 1.1875rem/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:2.75rem 0 .75rem}
p{margin:0 0 1.25rem}
a{color:var(--accent)}

.eyebrow{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .85rem;font-weight:600;
}

/* ---- product rows: structure encodes the short list ---- */
.rows{list-style:none;margin:0 0 1.5rem;padding:0}
.rows li{
  display:flex;gap:1rem;align-items:baseline;
  border-bottom:1px solid var(--rule);padding:1rem 0;
}
.rows .name{font-weight:600;min-width:9.5rem}
.rows .note{color:var(--ink-soft);font-size:.9375rem}

ul.plain{margin:0 0 1.25rem;padding-left:1.25rem}
ul.plain li{margin-bottom:.5rem}

.callout{
  background:var(--band);
  border-left:3px solid var(--accent);
  padding:1.25rem 1.25rem .1rem;
  margin:2.5rem 0;
}

footer{
  background:var(--ink);color:#a9c3b5;
  margin-top:4rem;padding:2.25rem 0 2.75rem;font-size:.875rem;
}
footer p{margin:0 0 .35rem}
footer strong{color:#fff;font-weight:600}

@media (max-width:600px){
  h1{font-size:1.75rem}
  body{font-size:1rem}
  .rows li{flex-direction:column;gap:.25rem}
  .rows .name{min-width:0}
}

a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){a{transition:color .15s ease}}