/* StockWait — derived from the logo, not from a framework.
   Palette sampled directly out of stockwait_logo.png: cream ground #FEFAF0, navy ink #1C2A3D,
   mint accent #62D8B5. The logo is line art — heavy navy strokes, generous corner radii, a
   pill lockup — so the page is built the same way: outlined cards rather than shadowed ones,
   pill buttons, and the mint reserved for accents the way the logo reserves it for the
   notification dot.

   Light only, deliberately: the brand decides this, not the visitor's OS. `color-scheme: light`
   stops the browser auto-darkening controls and scrollbars for a dark-mode visitor.

   No framework, no webfonts, no third-party requests — the privacy policy claims this site
   loads no trackers and the cheapest way to keep that true is to have nothing to load. */
:root {
  color-scheme: light;

  --cream: #fefaf0;
  --cream-deep: #f7f0e0;
  --ink: #1c2a3d;
  --ink-soft: #55617a;
  --mint: #62d8b5;
  --mint-deep: #1f8f6e;
  --line: #1c2a3d;
  --line-soft: #d9d2c0;

  --radius: 1.25rem;
  --radius-lg: 2rem;
  --stroke: 2px;
  --max: 70rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  /* ui-rounded gets SF Pro Rounded on Apple platforms, which is the closest system match to
     the logo's rounded wordmark. Everywhere else this degrades to the normal system UI face
     rather than pulling a webfont across the network. */
  font: 17px/1.65 ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", system-ui,
    -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
/* Measure limit only — never `margin: auto`, or a section carrying both classes centres
   itself and breaks the shared left edge every other section lines up on. */
.prose { max-width: 48rem; }
.wrap.prose { max-width: var(--max); }
.wrap.prose > * { max-width: 48rem; }

/* ---------- header ---------- */
header.site { border-bottom: var(--stroke) solid var(--ink); background: var(--cream); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 6rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 66px; width: auto; }
nav.site { display: flex; align-items: center; gap: 1.5rem; }
nav.site a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.98rem; }
nav.site a:hover { color: var(--mint-deep); }

/* ---------- type ---------- */
h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 1.25rem; font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -0.02em; margin: 0 0 1rem; font-weight: 800; }
h3 { font-size: 1.12rem; margin: 0 0 0.5rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
a { color: var(--mint-deep); }
.lede { font-size: 1.22rem; color: var(--ink-soft); max-width: 38rem; }
.eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--mint-deep); margin-bottom: 1rem; }

/* The logo's one flourish: the mint notification dot. Reused as the emphasis mark. */
.dot::after {
  content: ""; display: inline-block; width: 0.34em; height: 0.34em; margin-left: 0.08em;
  border-radius: 50%; background: var(--mint); vertical-align: 0.12em;
}
.mark-underline { background: linear-gradient(transparent 62%, var(--mint) 62%); }

/* ---------- buttons ---------- */
.cta, .cta-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  font-weight: 700; padding: 0.85rem 1.6rem; border-radius: 999px;
  border: var(--stroke) solid var(--ink); transition: transform 0.08s ease, background 0.15s ease;
}
.cta { background: var(--ink); color: var(--cream); }
.cta:hover { background: #14202f; transform: translateY(-1px); }
.cta-ghost { background: transparent; color: var(--ink); }
.cta-ghost:hover { background: var(--cream-deep); transform: translateY(-1px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.75rem; }
.cta-note { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.9rem; }

/* ---------- layout blocks ---------- */
.hero { padding: 5.5rem 0 4rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3rem; align-items: center; }
.hero-art { justify-self: center; width: min(100%, 22rem); }
.hero-art img { display: block; width: 100%; height: auto; }
@media (max-width: 56rem) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-art { display: none; }
}
section + section { padding-top: 1rem; }
.section { padding: 3.5rem 0; }

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2rem; }
.card {
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  padding: 1.5rem; background: var(--cream);
}
.card p { margin-bottom: 0; color: var(--ink-soft); font-size: 0.97rem; }
.card .chip {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: 0.9rem;
  border: var(--stroke) solid var(--ink); border-radius: 0.75rem; background: var(--mint);
  font-weight: 800; font-size: 0.95rem;
}

.callout {
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  background: var(--cream-deep); padding: 1.5rem 1.75rem; margin: 2rem 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- pricing ---------- */
.plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 2rem; }
.plan { border: var(--stroke) solid var(--ink); border-radius: var(--radius); padding: 1.5rem; position: relative; }
.plan.featured { background: var(--cream-deep); }
.plan.featured::before {
  content: "Most popular"; position: absolute; top: -0.85rem; left: 1.25rem;
  background: var(--mint); border: var(--stroke) solid var(--ink); border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.15rem 0.7rem;
}
.plan .price { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; margin: 0.4rem 0 0.2rem; }
.plan .price small { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); }
.plan ul { list-style: none; padding: 0; margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.plan li { padding-left: 1.4rem; position: relative; margin-bottom: 0.45rem; }
.plan li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55rem; height: 0.55rem;
  border-radius: 50%; background: var(--mint); border: 1.5px solid var(--ink);
}

/* ---------- tables (legal pages) ---------- */
.scroll-x { overflow-x: auto; border: var(--stroke) solid var(--ink); border-radius: var(--radius); margin: 1.25rem 0 2rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th, tr:first-child th { background: var(--cream-deep); font-weight: 700; }
tr:last-child td, tr:last-child th { border-bottom: none; }

/* ---------- misc ---------- */
.meta { color: var(--ink-soft); font-size: 0.93rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em;
  background: var(--cream-deep); border: 1px solid var(--line-soft); padding: 0.08em 0.35em; border-radius: 0.35rem; }
ul.plain { padding-left: 1.2rem; }
ul.plain li { margin-bottom: 0.5rem; }
hr { border: none; border-top: var(--stroke) solid var(--line-soft); margin: 3rem 0; }

footer.site { border-top: var(--stroke) solid var(--ink); margin-top: 5rem; padding: 2.5rem 0 3rem; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
footer.site img { height: 34px; width: auto; display: block; }
footer.site nav a { color: var(--ink); text-decoration: none; margin-right: 1.5rem; font-size: 0.94rem; font-weight: 600; }
footer.site nav a:hover { color: var(--mint-deep); }
footer.site .fine { color: var(--ink-soft); font-size: 0.88rem; width: 100%; margin-top: 0.5rem; }

main { padding-bottom: 1rem; }

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .hero { padding: 3.5rem 0 2.5rem; }
  header.site .wrap { min-height: 5rem; }
  .brand img { height: 52px; }
  nav.site { gap: 1rem; }
  nav.site a { font-size: 0.9rem; }
}