/* VPN HAPP Proxy Monitor — site styles.
   Identity is carried from the iOS app, deliberately: same spruce accent,
   same status colours, same grouped-paper background, same system type.
   The site and the app should read as one product, not two. */

:root {
  --paper: #F2F2F7;
  --card: #FFFFFF;
  --ink: #0B1A14;          /* spruce-black: warmer than #000, ties to the accent */
  --muted: #6E7C76;        /* spruce-tinted grey for secondary prose */
  --faint: #A8B2AD;
  --rule: #E1E4E6;
  --spruce: #2E6B4F;
  --spruce-ink: #245740;
  --up: #34C759;
  --slow: #FF9500;
  --down: #FF3B30;
  --idle: #D6D9DE;
  --radius: 16px;
  --measure: 34rem;        /* prose line length */
  --shell: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #000000;
    --card: #14181A;
    --ink: #F2F5F3;
    --muted: #9AA5A0;
    --faint: #6B7671;
    --rule: #2A2F31;
    --spruce: #4E9B77;
    --spruce-ink: #6FB894;
    --idle: #2C3033;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--spruce); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--spruce-ink); }
:focus-visible { outline: 2px solid var(--spruce); outline-offset: 3px; border-radius: 4px; }

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

/* ---------- masthead ---------- */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 16px; padding: 22px 0 10px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -0.01em;
}
.wordmark:hover { color: var(--ink); }
.mark { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 20px; }
.mark i { display: block; width: 4px; border-radius: 1px; background: var(--spruce); }
.mark i:nth-child(1) { height: 11px; }
.mark i:nth-child(2) { height: 20px; }
.mark i:nth-child(3) { height: 15px; }

.masthead nav { display: flex; gap: 20px; font-size: 15px; }
.masthead nav a { color: var(--muted); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); }

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

.hero { padding: 56px 0 28px; }
.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(2.1rem, 6.4vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 700;
  max-width: 18ch;
}
/* The signature move: the headline carries its own ledger. The sentence
   turns at exactly the point the slats turn red — the typography IS the
   product's story rather than a decoration sitting next to it. */
.inline-ledger {
  display: inline-flex; align-items: flex-end; gap: 2px;
  vertical-align: -0.06em; margin: 0 2px;
}
.inline-ledger i {
  display: block; width: 5px; height: 0.62em; border-radius: 1.5px;
  background: var(--up); opacity: .55;
}
.inline-ledger i.down { background: var(--down); opacity: 1; }

.hero p.lede {
  margin: 0 0 30px; max-width: var(--measure);
  font-size: 1.16rem; color: var(--muted);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.btn {
  display: inline-block; background: var(--spruce); color: #fff;
  padding: 13px 26px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 1rem;
  box-shadow: 0 6px 18px rgba(46,107,79,.28);
}
.btn:hover { background: var(--spruce-ink); color: #fff; }
.cta-note { font-size: .93rem; color: var(--faint); }

/* ---------- the ledger band (signature) ---------- */

.ledger-card {
  background: var(--card); border-radius: var(--radius);
  padding: 22px 22px 16px; margin: 40px 0 8px;
}
.ledger-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 14px;
}
.ledger-head strong { font-size: 1.05rem; letter-spacing: -0.01em; }
.ledger-head span { font-size: .88rem; color: var(--muted); }
.ledger {
  display: flex; align-items: flex-end; gap: 3px; height: 46px;
}
.ledger i {
  display: block; flex: 1 1 0; min-width: 0; height: 100%;
  border-radius: 2px; background: var(--up); opacity: .5;
  transform-origin: bottom;
  animation: stamp .34s cubic-bezier(.2,.9,.3,1) backwards;
  animation-delay: calc(var(--i) * 22ms);
}
.ledger i.down  { background: var(--down); opacity: 1; }
.ledger i.slow  { background: var(--slow); opacity: 1; }
.ledger i.idle  { background: var(--idle); opacity: 1; }
.ledger i.fresh { opacity: 1; }
@keyframes stamp { from { transform: scaleY(.15); opacity: 0; } }

.axis {
  display: flex; justify-content: space-between;
  margin-top: 10px; font-size: .82rem; color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  .ledger i { animation: none; }
}

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

.band { padding: 40px 0 8px; border-top: 1px solid var(--rule); margin-top: 34px; }
.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 14px;
}
h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.2; }
h3 { font-size: 1.06rem; margin: 0 0 6px; letter-spacing: -0.01em; }
p { max-width: var(--measure); }

.trio { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.trio p { margin: 0; color: var(--muted); font-size: .98rem; }
.trio .tick { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-bottom: 12px; }
.trio .tick i { display: block; width: 3.5px; height: 100%; border-radius: 1px; background: var(--spruce); opacity: .35; }
.trio .tick i:last-child { opacity: 1; }

.plain {
  background: var(--card); border-radius: var(--radius);
  padding: 26px 28px 22px;
  /* Cap the card to its own prose measure + padding: full-bleed left a dead
     right half, which read as a layout bug rather than as breathing room. */
  max-width: calc(var(--measure) + 56px);
}
.plain p:last-child { margin-bottom: 0; }
.plain p { color: var(--muted); }
.plain strong { color: var(--ink); }

/* ---------- documents ---------- */

.doc { padding: 34px 0 10px; }
.doc h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -0.03em; margin: 0 0 6px; }
.doc .updated { color: var(--faint); font-size: .92rem; margin: 0 0 30px; }
.doc h2 {
  font-size: .82rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--spruce); margin: 32px 0 8px;
}
.doc p { color: var(--muted); }
.doc p strong, .doc li strong { color: var(--ink); }
.doc ul { max-width: var(--measure); color: var(--muted); padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc .callout {
  background: var(--card); border-radius: var(--radius);
  padding: 20px 22px; margin: 26px 0; max-width: var(--measure);
}
.doc .callout p { margin: 0; }

code {
  font: 500 .92em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--card); border: 1px solid var(--rule);
  padding: 2px 6px; border-radius: 6px; word-break: break-all;
}

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

.foot {
  border-top: 1px solid var(--rule); margin-top: 56px;
  padding: 26px 0 44px; display: flex; flex-wrap: wrap;
  gap: 10px 22px; align-items: center; justify-content: space-between;
  font-size: .92rem; color: var(--faint);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* Narrow phones: the masthead was wrapping "Config links" onto two lines and
   pushing "Support" against the edge. Shrink the chrome rather than hiding
   the wordmark — the brand is the one thing a first-time visitor needs. */
@media (max-width: 460px) {
  .shell { padding: 0 18px; }
  .masthead { padding: 16px 0 8px; }
  .wordmark { font-size: .94rem; gap: 8px; }
  .mark { height: 17px; }
  .mark i { width: 3.5px; }
  .mark i:nth-child(1) { height: 9px; }
  .mark i:nth-child(2) { height: 17px; }
  .mark i:nth-child(3) { height: 13px; }
  /* The brand is 22 characters — at phone widths it and the nav cannot
     share a row without clipping, so the nav takes its own line rather
     than the wordmark being truncated. */
  .masthead nav { width: 100%; gap: 18px; font-size: 14px; }
  .masthead nav a { white-space: nowrap; }
  .hero { padding: 34px 0 20px; }
  .ledger { height: 38px; }
  .foot { gap: 14px; }
}