/* NOIZE-LABS — static site
   Self-contained. No external fonts, no CDN, no trackers, no JavaScript: fewer moving
   parts means fewer ways for the site Stripe is checking to go down.

   The security headers forbid inline styles and remote assets, so everything visual
   lives here and uses faces that ship with the operating system. The contrast between
   a serif display face and a sans body is doing the work a web font usually would. */

:root {
  --bg:        #ffffff;
  --raise:     #fbfbfc;
  --surface:   #f4f4f6;
  --text:      #121216;
  --muted:     #5c5c66;
  --faint:     #8e8e99;
  --line:      #e4e4e8;
  --hair:      #eeeef1;
  --accent:    #121216;
  --max:       54rem;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", ui-monospace, Consolas, "SF Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0d0d10;
    --raise:   #121216;
    --surface: #16161b;
    --text:    #eeeef2;
    --muted:   #9b9ba6;
    --faint:   #6e6e7a;
    --line:    #24242c;
    --hair:    #1c1c22;
    --accent:  #eeeef2;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---- header ---- */
header { border-bottom: 1px solid var(--hair); padding: 1.4rem 0; }
header .wrap { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: baseline; }
.brand {
  font-family: var(--mono);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
nav { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-left: auto; }
nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .84rem;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
nav a:hover, nav a:focus { color: var(--text); border-bottom-color: var(--text); }

/* ---- hero ---- */
.hero { padding: clamp(3.5rem, 11vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem); }
.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1.6rem;
}
h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 7.2vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
.lede {
  font-family: var(--display);
  font-size: clamp(1.12rem, 2.4vw, 1.4rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 34em;
  margin: 1.6rem 0 0;
}

/* ---- sections ---- */
section { padding: clamp(2.6rem, 6vw, 4rem) 0; border-top: 1px solid var(--hair); }
section:first-of-type { border-top: 0; }
h2 {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1.8rem;
  padding: 0;
  border: 0;
}
h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 0 .4rem;
}
p, ul, ol { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.35rem; }
li { margin-bottom: .4rem; }
a { color: var(--text); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 640; }
.muted { color: var(--muted); }

/* ---- the product list: numbered rows, not boxes ---- */
.items { list-style: none; margin: 0; padding: 0; }
.items > li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .2rem 1.1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--hair);
  margin: 0;
}
.items > li:first-child { border-top: 0; padding-top: 0; }
.items .n {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--faint);
  padding-top: .5rem;
}
.items h3 { grid-column: 2; }
.items p { grid-column: 2; color: var(--muted); margin: 0; font-size: .96rem; }

/* ---- a quiet panel for the entity split and contact ---- */
.panel {
  background: var(--raise);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 1.4rem 1.5rem;
}
.panel + .panel { margin-top: .85rem; }
.panel h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.panel p { color: var(--muted); font-size: .95rem; }

.split { display: grid; gap: .85rem; }
@media (min-width: 46rem) { .split { grid-template-columns: 1fr 1fr; } .split .panel + .panel { margin-top: 0; } }

/* ---- blocks the other four pages still use ---- */
.card {
  background: var(--raise);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 1.25rem 1.4rem;
  margin: 0 0 1rem;
}
.card h3 { margin-top: 0; font-size: 1.1rem; }
.card p:last-child { margin-bottom: 0; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.updated {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hair);
}

address { font-style: normal; line-height: 1.75; color: var(--muted); }

table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .93rem; }
th {
  text-align: left;
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  padding: 0 .85rem .55rem 0;
  font-weight: 600;
}
td { border-bottom: 1px solid var(--hair); padding: .65rem .85rem .65rem 0; vertical-align: top; }
.table-scroll { overflow-x: auto; }

/* ---- footer ---- */
footer {
  margin-top: clamp(3rem, 8vw, 5.5rem);
  border-top: 1px solid var(--hair);
  padding: 2.2rem 0 3.5rem;
  font-size: .82rem;
  color: var(--muted);
}
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }
footer .legal { margin-top: 1.1rem; color: var(--faint); }
footer .legal a { color: var(--faint); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 30rem) {
  .items > li { grid-template-columns: 1fr; }
  .items .n { padding-top: 0; }
  .items h3, .items p { grid-column: 1; }
}