/* Wire Monkey Labs — one stylesheet for the whole site.
   Palette matches the app: #0B0E13 ground, #FF8A1F accent. */

:root {
  --bg: #0B0E13;
  --panel: #11151C;
  --panel-2: #161B24;
  --line: #232A35;
  --text: #E8EBF0;
  --dim: #98A2B3;
  --dimmer: #6B7484;
  --accent: #FF8A1F;
  --good: #4ADE80;
  --measure: 68ch;
  --wide: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.measure { max-width: var(--measure); }

/* ---- header ---------------------------------------------------------- */

header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 14, 19, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* HEIGHT, NOT MIN-HEIGHT, WAS A BUG.
   At 62px fixed, the brand and the nav wrap onto more rows than fit, and
   because the flex line is vertically centered the overflow splits above and
   below — so the FIRST row of nav links rendered off the top of the page.
   On a 390px phone that made Tools and Output unreachable on the Ampsheet
   page, and every link on the home page. It looked fine on a laptop, which
   is why it survived. */
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 24px; min-height: 62px; padding-top: 10px; padding-bottom: 10px;
}
.brand {
  display: flex; align-items: baseline; gap: 9px; white-space: nowrap;
  color: var(--text); font-weight: 700; letter-spacing: .02em;
  font-size: 15px; text-transform: uppercase;
}
.brand:hover { text-decoration: none; }
.brand .mark { color: var(--accent); }
nav.site { display: flex; gap: 22px; flex-wrap: wrap; }
nav.site a {
  color: var(--dim); font-size: 14px; font-weight: 500;
  letter-spacing: .01em;
}
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--text); text-decoration: none; }

/* ---- hero ------------------------------------------------------------ */

.hero { padding: 96px 0 72px; border-bottom: 1px solid var(--line); }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dimmer); margin: 0 0 18px;
}
h1 {
  font-size: clamp(34px, 6vw, 58px); line-height: 1.06;
  letter-spacing: -0.02em; font-weight: 800; margin: 0 0 22px;
}
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--dim); margin: 0 0 18px; }
.lede strong { color: var(--text); font-weight: 600; }

/* ---- sections -------------------------------------------------------- */

section { padding: 72px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }
h2 {
  font-size: clamp(24px, 3vw, 32px); line-height: 1.15;
  letter-spacing: -0.01em; font-weight: 750; margin: 0 0 14px;
}
h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.005em; }
p { margin: 0 0 16px; }
p.dim { color: var(--dim); }
small.note { display: block; color: var(--dimmer); font-size: 14px; line-height: 1.6; }

/* ---- grids ----------------------------------------------------------- */

.grid { display: grid; gap: 18px; margin-top: 34px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px;
}
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--dim); font-size: 15.5px; }

.principle { display: flex; gap: 14px; align-items: flex-start; }
.principle .n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--accent); font-size: 12px; font-weight: 800;
  display: grid; place-items: center; margin-top: 2px;
}

/* ---- product entries ------------------------------------------------- */

.product {
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  align-items: start;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 24px; margin-top: 18px;
}
.product h3 { font-size: 21px; margin-bottom: 6px; }
.product .kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dimmer); margin-bottom: 10px;
}
.status {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--dim); white-space: nowrap;
}
/* PILLS ARE THE APP'S ORANGE, NOT A SECOND ONE.
   #FF8A1F is the accent the AMPSHEET wordmark is set in, so every pill-shaped
   thing on the site — the status badge and the store buttons — is tinted from
   the same variable rather than from a hand-mixed rgba that drifts the moment
   the palette moves. */
.status.live {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
@media (max-width: 620px) {
  .product { grid-template-columns: 1fr; }
  /* The nav becomes its own row under the brand rather than fighting it for
     the same line. */
  header.site .wrap { gap: 6px 18px; }
  nav.site { gap: 18px; width: 100%; }
  nav.site a { font-size: 13.5px; }
}

/* ---- callout / disclaimer -------------------------------------------- */

.callout {
  border-left: 3px solid var(--accent);
  background: var(--panel); border-radius: 0 10px 10px 0;
  padding: 18px 22px; margin: 28px 0;
}
.callout p { margin: 0; color: var(--dim); font-size: 15.5px; }
.callout p + p { margin-top: 10px; }

.legalnote {
  border-left: 3px solid var(--line);
  padding: 16px 20px; margin: 30px 0 0;
  color: var(--dimmer); font-size: 14px; line-height: 1.65;
}

/* ---- figures --------------------------------------------------------- */

figure { margin: 0; }
figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
/* The two export figures are different SHAPES — a riser on 11 x 17 portrait
   next to a panel schedule on letter landscape — so sizing both to the column
   width made the riser nearly three times the height of the sheet beside it,
   and the pair read as one important picture and one afterthought. Capping the
   height lets the tall one settle at a comparable size; the panel is still
   bound by width, as it was. */
.grid.two figure img { max-height: 520px; width: auto; max-width: 100%; margin-inline: auto; }
/* A STANDING FIGURE, for a sheet that is taller than it is wide.
   The building riser is 11 x 17 PORTRAIT, so at the full column width it came
   out about 1780 px tall — a single picture longer than the section it sits in,
   most of it the sheet's own top margin. Capped and centered it reads as one
   figure among several; the reader who wants to see the conductors opens the
   PDF underneath, which is what that link is for. */
figure.standing img { max-height: 860px; width: auto; max-width: 100%; margin-inline: auto; }
figure.standing figcaption { max-width: var(--measure); margin-inline: auto; }
figcaption { color: var(--dimmer); font-size: 14px; margin-top: 10px; line-height: 1.6; }
/* "Open the full sheet (PDF)" under an export figure. Deliberately quiet —
   the picture is the argument; the PDF is for the reader who doubts it. */
.pdflink { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600;
  letter-spacing: .2px; }
.shots { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 30px; align-items: start; }
/* Phone screenshots are not all captured at the same height — one arrived 65 px
   shorter than the other two, which let its card end higher than its
   neighbours and dragged its caption up with it. Pinning the ratio means the
   row stays square whatever the next screenshot measures; contain rather than
   cover so nothing is cropped, on a background matching the app's own so the
   letterbox is invisible. */
.shots img { aspect-ratio: 900 / 1797; object-fit: contain; background: #0d1015; }
.shots figcaption { min-height: 3.2em; }

/* ---- buttons --------------------------------------------------------- */

.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.btn {
  display: inline-block; padding: 12px 20px; border-radius: 9px;
  font-size: 15px; font-weight: 650; border: 1px solid var(--line);
  color: var(--text); background: var(--panel);
}
.btn:hover { text-decoration: none; border-color: var(--dimmer); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #17110A; }
.btn.primary:hover { filter: brightness(1.07); }
/* The store buttons are not dead links, they are the two places the app will
   be. Greyed out they read as broken; in the accent they read as pending, which
   is what they are. No hover response, because there is nothing to press yet. */
.btn[aria-disabled="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  cursor: default;
}
.btn[aria-disabled="true"]:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  filter: none;
}

/* ---- legal ----------------------------------------------------------- */

.doc { max-width: var(--measure); }
.doc h2 { margin-top: 44px; }
.doc h3 { margin-top: 26px; color: var(--text); }
.doc p, .doc li { color: var(--dim); font-size: 16px; }
.doc ul { padding-left: 22px; }
.doc .ver { color: var(--dimmer); font-size: 14px; margin-bottom: 30px; }
.toc { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; }
.toc a { font-size: 14px; }

/* ---- footer ---------------------------------------------------------- */

footer.site {
  border-top: 1px solid var(--line); padding: 40px 0 60px;
  color: var(--dimmer); font-size: 14px;
}
footer.site .cols {
  display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
footer.site a { color: var(--dim); }
footer.site nav { display: flex; gap: 18px; flex-wrap: wrap; }