@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

/* ─────────────────────────────────────────
   TOKENS
───────────────────────────────────────── */
body.v2 {
  --upzo-bg:    #fafaf9;
  --upzo-text:  #111110;
  --upzo-muted: #888580;
  --upzo-faint: #e8e6e1;
  --upzo-green: #2d6a4f;
  --upzo-mono:  'IBM Plex Mono', monospace;
  --upzo-serif: 'Lora', Georgia, serif;

  --pico-background-color:              var(--upzo-bg);
  --pico-color:                         var(--upzo-text);
  --pico-muted-color:                   var(--upzo-muted);
  --pico-muted-border-color:            var(--upzo-faint);
  --pico-primary:                       var(--upzo-text);
  --pico-primary-background:            var(--upzo-text);
  --pico-primary-hover-background:      var(--upzo-muted);
  --pico-primary-focus:                 transparent;
  --pico-secondary-color:               var(--upzo-muted);
  --pico-secondary-hover-color:         var(--upzo-text);
  --pico-font-family:                   var(--upzo-mono);
  --pico-font-size:                     15px;
  --pico-line-height:                   1.7;
  --pico-border-radius:                 0px;
  --pico-card-background-color:         var(--upzo-bg);
  --pico-card-border-color:             var(--upzo-faint);
  --pico-card-box-shadow:               none;
  --pico-link-color:                    var(--upzo-text);
  --pico-link-hover-color:              var(--upzo-muted);
  --pico-link-decoration:               none;
  --pico-nav-link-color:                var(--upzo-muted);
  --pico-nav-link-hover-color:          var(--upzo-text);
  --pico-h1-color:                      var(--upzo-text);
  --pico-h2-color:                      var(--upzo-muted);
  --pico-h3-color:                      var(--upzo-text);
  --pico-form-element-border-color:     var(--upzo-faint);
  --pico-form-element-focus-color:      var(--upzo-text);
  --pico-form-element-background-color: var(--upzo-bg);
}

/* ─────────────────────────────────────────
   BASE
───────────────────────────────────────── */
body.v2 {
  background-color: var(--upzo-bg) !important;
  color: var(--upzo-text) !important;
  font-family: var(--upzo-mono) !important;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  body.v2 {
    --pico-background-color: var(--upzo-bg);
    --pico-color:            var(--upzo-text);
    --pico-muted-color:      var(--upzo-muted);
    --pico-link-color:       var(--upzo-text);
    --pico-link-hover-color: var(--upzo-muted);
    --pico-h1-color:         var(--upzo-text);
    --pico-h2-color:         var(--upzo-muted);
    background-color: var(--upzo-bg) !important;
    color: var(--upzo-text) !important;
  }
}

/* ─────────────────────────────────────────
   LINKS — base: no underline, dark text
───────────────────────────────────────── */
body.v2 a,
body.v2 a:visited {
  color: var(--upzo-text) !important;
  text-decoration: none !important;
}
body.v2 a:hover {
  color: var(--upzo-muted) !important;
}

/* Nav links — no underline, muted */
body.v2 header a,
body.v2 header a:visited,
body.v2 header a:hover {
  text-decoration: none !important;
}

/* All links in main and footer get underline */
body.v2 main a,
body.v2 main a:visited,
body.v2 footer a,
body.v2 footer a:visited {
  text-decoration: underline !important;
  text-decoration-color: var(--upzo-muted) !important;
  text-underline-offset: 3px !important;
}
body.v2 main a:hover,
body.v2 footer a:hover {
  color: var(--upzo-muted) !important;
  text-decoration-color: var(--upzo-text) !important;
}

/* CTA buttons — never underlined */
body.v2 a.cta-primary,
body.v2 a.cta-primary:visited,
body.v2 a.cta-primary:hover,
body.v2 a[role="button"],
body.v2 a[role="button"]:visited,
body.v2 a[role="button"]:hover {
  text-decoration: none !important;
}

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
body.v2 header.container > nav {
  border-bottom: 1px solid var(--upzo-faint);
  padding-bottom: 1.25rem;
}

body.v2 header.container > nav ul li a,
body.v2 header.container > nav ul li a:visited {
  color: var(--upzo-muted) !important;
  font-family: var(--upzo-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
}
body.v2 header.container > nav ul li a:hover {
  color: var(--upzo-text) !important;
}

/* Logo */
body.v2 header.container > nav ul:first-child li:first-child a,
body.v2 header.container > nav ul:first-child li:first-child a:visited {
  color: var(--upzo-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────
   HEADINGS
───────────────────────────────────────── */
body.v2 h1,
body.v2 h2,
body.v2 h3,
body.v2 h4 {
  font-family: var(--upzo-mono) !important;
  color: var(--upzo-text) !important;
}
body.v2 h1 {
  font-family: var(--upzo-serif) !important;
  font-size: clamp(26px, 4vw, 38px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 1.25rem !important;
}
body.v2 h2 {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--upzo-muted) !important;
  margin-bottom: 0.75rem !important;
}
body.v2 h3 {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ─────────────────────────────────────────
   BODY TEXT
───────────────────────────────────────── */
body.v2 p {
  font-family: var(--upzo-mono) !important;
  font-size: 13px;
  color: var(--upzo-muted);
  line-height: 1.85;
  margin-bottom: 0.75rem;
}

/* ─────────────────────────────────────────
   LISTS
───────────────────────────────────────── */
body.v2 main ul {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-bottom: 1rem;
}
body.v2 main ul li {
  font-size: 12px;
  color: var(--upzo-muted);
  line-height: 1.75;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--upzo-faint);
}
body.v2 main ul li:first-child {
  border-top: 1px solid var(--upzo-faint);
}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
body.v2 main.container {
  padding-top: 0 !important;
}
body.v2 main section:first-child {
  padding-top: 2rem;
  border-bottom: 1px solid var(--upzo-faint);
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
}
body.v2 main section:first-child > h1 {
  max-width: 560px;
}
body.v2 ul.hero-list {
  display: none !important;
}
body.v2 p.hero-intro {
  font-family: var(--upzo-mono) !important;
  font-size: 13px;
  color: var(--upzo-muted);
  line-height: 1.85;
  max-width: 480px;
  margin-bottom: 0.5rem;
}
body.v2 a.cta-primary {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

/* ─────────────────────────────────────────
   GRID
───────────────────────────────────────── */
body.v2 main .grid {
  gap: 0 !important;
  border-top: 1px solid var(--upzo-faint);
  padding-top: 1.5rem;
  margin-top: 1rem;
}
body.v2 main .grid > div {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  border-right: 1px solid var(--upzo-faint) !important;
  box-sizing: border-box !important;
}
body.v2 main .grid > div:first-child {
  padding-left: 0 !important;
}
body.v2 main .grid > div:last-child {
  border-right: none !important;
  padding-right: 0 !important;
}

/* ─────────────────────────────────────────
   SECTIONS
───────────────────────────────────────── */
body.v2 main section {
  border-bottom: 1px solid var(--upzo-faint);
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
}

/* ─────────────────────────────────────────
   CTA BUTTONS
───────────────────────────────────────── */
body.v2 a.cta-primary,
body.v2 a.cta-primary:visited {
  display: inline-block;
  font-family: var(--upzo-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--upzo-text) !important;
  color: var(--upzo-bg) !important;
  border: none !important;
  padding: 12px 24px !important;
  cursor: pointer;
  transition: opacity 0.15s;
}
body.v2 a.cta-primary:hover {
  opacity: 0.72;
  color: var(--upzo-bg) !important;
}

body.v2 main section > footer {
  border: none;
  background: none;
  padding: 1rem 0 0;
}
body.v2 main section > footer a[role="button"],
body.v2 main section > footer a[role="button"]:visited {
  display: inline-block;
  font-family: var(--upzo-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--upzo-text) !important;
  color: var(--upzo-bg) !important;
  border: none !important;
  padding: 12px 24px !important;
  transition: opacity 0.15s;
}
body.v2 main section > footer a[role="button"]:hover {
  opacity: 0.72;
  color: var(--upzo-bg) !important;
}

/* ─────────────────────────────────────────
   STATUS CLASSES
───────────────────────────────────────── */
body.v2 .subdued { color: var(--upzo-muted) !important; }
body.v2 .ok      { color: var(--upzo-green) !important; }
body.v2 .error   { color: #9b2335 !important; }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
body.v2 footer.full_footer {
  background-color: var(--upzo-bg) !important;
  border-top: 1px solid var(--upzo-faint) !important;
  color: var(--upzo-muted) !important;
}
body.v2 footer.full_footer small,
body.v2 footer.full_footer address {
  font-size: 11px !important;
  color: var(--upzo-muted) !important;
  line-height: 1.8;
  font-style: normal;
}
body.v2 footer.full_footer .grid {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.v2 footer.full_footer .grid > div {
  border-right: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
body.v2 ul.nav-vertical-compact {
  list-style: none !important;
  padding: 0 !important;
  display: grid;
  gap: 0.4rem;
}
body.v2 ul.nav-vertical-compact li {
  border: none !important;
  padding: 0 !important;
  font-size: 11px;
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 576px) {
  body.v2 main .grid > div {
    border-right: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    border-bottom: 1px solid var(--upzo-faint);
    padding-bottom: 1.5rem;
  }
}

/* ─────────────────────────────────────────
   PATCH — bare link sizing and list bullets
───────────────────────────────────────── */

/* Explicit font-size on all links so Pico's default never wins */
body.v2 main a,
body.v2 main a:visited {
  font-size: 12px !important;
  font-family: var(--upzo-mono) !important;
}

body.v2 footer a,
body.v2 footer a:visited {
  font-size: 11px !important;
  font-family: var(--upzo-mono) !important;
}

/* CTA buttons keep their own sizing */
body.v2 a.cta-primary,
body.v2 a[role="button"] {
  font-size: 11px !important;
}

/* Kill bullets — target Pico's ::before pseudo on li */
body.v2 main ul li::before,
body.v2 main ul li::marker {
  content: none !important;
  display: none !important;
}