/* ChemLevel marketing site — same token system as the platform blueprint:
   industrial teal + amber on a cool graphite paper, Oswald/IBM Plex type. */

:root {
  --bg: #EDF1F0;
  --surface: #FFFFFF;
  --surface-2: #E4EAE8;
  --ink: #0F1719;
  --ink-soft: #4B5A5A;
  --ink-faint: #7C8B8A;
  --line: #C4CFCC;
  --line-soft: #D8E0DD;
  --accent: #146B72;
  --accent-ink: #FFFFFF;
  --accent-soft: #DCEBEA;
  --amber: #B15E1B;
  --amber-soft: #F3E3D2;
  --red: #B0392E;
  --red-soft: #F5DEDA;
  --green: #3C7A4E;
  --green-soft: #DEEBDF;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(15, 23, 25, 0.06), 0 8px 24px -12px rgba(15, 23, 25, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C1315;
    --surface: #121B1C;
    --surface-2: #1A2526;
    --ink: #E8EFED;
    --ink-soft: #A9BAB8;
    --ink-faint: #71827F;
    --line: #2B3A3A;
    --line-soft: #223030;
    --accent: #55BFC4;
    --accent-ink: #05191A;
    --accent-soft: #16302F;
    --amber: #E5A15A;
    --amber-soft: #33261A;
    --red: #E08277;
    --red-soft: #38201E;
    --green: #8FC79E;
    --green-soft: #1B2F20;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; }

h1, h2, h3, .display {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Oswald", sans-serif;
  font-size: 19px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand-word { white-space: nowrap; }
.brand-word span { color: var(--accent); }
.brand-mark-icon { display: block; color: var(--accent-ink); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-nav a:not(.btn) {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
}
.site-nav a:not(.btn):hover { color: var(--ink); }
.nav-links { display: flex; gap: 26px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink); position: relative; transition: 0.2s;
}
.nav-toggle span::before { position: absolute; top: -6px; width: 20px; height: 2px; background: var(--ink); }
.nav-toggle span::after { position: absolute; top: 6px; width: 20px; height: 2px; background: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  padding: 76px 0 90px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
.hero h1 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.98;
}
.hero .sub {
  font-size: 17.5px;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: 22px;
  line-height: 1.65;
}
.hero-form {
  display: flex;
  gap: 10px;
  margin-top: 32px;
  max-width: 440px;
  flex-wrap: wrap;
}
.hero-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 14.5px;
  font-family: inherit;
}
.hero-form input[type="email"]:focus,
input:focus-visible, button:focus-visible, a:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hero-note { font-size: 12.5px; color: var(--ink-faint); margin-top: 12px; }

/* ---------- Platforms ----------
   Four devices, and what is actually true of each one today. The browser
   version is live; the three native builds are not, and a row of logos with
   no qualifier would send somebody to an App Store that has nothing in it.
   So availability is stated per platform rather than implied by the icons
   being there at all. */
.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}
.platform {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.platform svg { flex: none; color: var(--ink-faint); }
.platform .pf-name { font-weight: 600; color: var(--ink); }
/* The status carries the meaning, so it is not left to color alone --
   "Available" and "In development" say it in words. */
.platform .pf-state { color: var(--ink-faint); }
.platform.is-live { border-color: var(--accent-soft); background: var(--accent-soft); }
.platform.is-live svg,
.platform.is-live .pf-name,
.platform.is-live .pf-state { color: var(--accent); }
.platform.is-live .pf-name { font-weight: 700; }
@media (max-width: 720px) {
  .platforms { gap: 8px; }
  .platform { padding: 6px 10px 6px 9px; font-size: 12px; }
}
.form-status { font-size: 13px; margin-top: 10px; min-height: 18px; }
.form-status.ok { color: var(--green); }
.form-status.err { color: var(--red); }

/* ---------- Hero demo card ---------- */
.demo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.demo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.demo-card-head .site-pill {
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}
.demo-card-head .site-pill::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.demo-card-head .live-tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.demo-rows { padding: 6px 10px; }
/* Grid, not flex, on purpose: a flex .dr-name{flex:1} absorbs whatever
   space the pill/due text in THAT row doesn't use, so the pill's left
   edge lands at a different x per row once the pill/due text length
   differs ("ORDER SOON" vs "HEALTHY", "4d" vs "34d") — exactly the
   misalignment this was reported for. Fixed-width grid tracks pin the
   pill and due columns to the same x on every row regardless of their
   text length. */
.demo-row {
  display: grid;
  grid-template-columns: 1fr 100px 84px;
  align-items: center;
  gap: 14px;
  padding: 15px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.demo-row:last-child { border-bottom: none; }
.demo-row .dr-name { min-width: 0; }
.demo-row .dr-name .n { font-size: 14px; font-weight: 600; }
.demo-row .dr-name .s { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.demo-row .dr-bar {
  width: 64px; height: 6px; border-radius: 4px;
  background: var(--surface-2); overflow: hidden;
  display: none;
}
.demo-row .dr-bar i { display: block; height: 100%; }
.demo-row .dr-due { text-align: right; }
.demo-row .dr-due .d { font-family: "IBM Plex Mono", monospace; font-size: 15px; font-weight: 600; }
.demo-row .dr-due .l { font-size: 10px; color: var(--ink-faint); letter-spacing: 0.04em; }
.status-pill {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  justify-self: center;
}
.status-pill.red { background: var(--red-soft); color: var(--red); }
.status-pill.amber { background: var(--amber-soft); color: var(--amber); }
.status-pill.green { background: var(--green-soft); color: var(--green); }
.demo-card-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-faint);
  background: var(--surface-2);
}
.demo-card-foot b { color: var(--accent); font-weight: 600; }

/* ---------- Section shell ---------- */
section { padding: 84px 0; }
.section-head { max-width: 62ch; margin-bottom: 48px; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); }
.section-head p { font-size: 15.5px; color: var(--ink-soft); margin-top: 14px; }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
}
.pillar .num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.pillar h3 {
  font-size: 17px;
  margin-top: 14px;
  text-transform: none;
  letter-spacing: normal;
}
.pillar p {
  font-size: 13.8px;
  color: var(--ink-soft);
  margin-top: 10px;
  line-height: 1.6;
}

/* ---------- Pricing ---------- */
/* Two plans, centered rather than stretched across the full section: at three
   columns' width a pair of cards reads as a row with something missing. */
.plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: stretch;
  max-width: 760px;
  margin: 0 auto;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.plan.plan-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
/* All three cards open with this, so their headings, prices and feature lists
   line up on the same baselines. The featured note used to sit in a block
   above the Team heading, which pushed that whole card down relative to the
   two beside it. */
.plan-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.plan-tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.plan h3 {
  font-size: 19px;
  text-transform: none;
  letter-spacing: normal;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 14px;
}
.plan-price .amt {
  font-size: 32px;
  font-weight: 600;
}
.plan-price .per {
  font-size: 13px;
  color: var(--ink-faint);
}
.plan-desc {
  font-size: 13.8px;
  color: var(--ink-soft);
  margin-top: 10px;
  line-height: 1.6;
}
.plan-features {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  flex: 1;
}
.plan-features li {
  font-size: 13.8px;
  color: var(--ink-soft);
  padding-left: 20px;
  position: relative;
}
.plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.plan .btn {
  margin-top: 24px;
  width: 100%;
}

/* ---------- App screenshots ---------- */
.app-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.app-shot { text-align: center; }
.app-shot .phone {
  max-width: 230px;
  margin: 0 auto;
  padding: 8px;
  background: #05090A;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
}
.app-shot .phone img { display: block; width: 100%; height: auto; border-radius: 20px; }
.app-shot figcaption { margin-top: 16px; font-size: 13.5px; color: var(--ink-soft); }
.app-shot figcaption b { color: var(--ink); font-weight: 600; }

/* ---------- Floor section ---------- */
.floor-text { max-width: 640px; margin: 0 auto; }
.floor-text h2 { font-size: clamp(26px, 3.2vw, 36px); }
.floor-text p { font-size: 16px; color: var(--ink-soft); margin-top: 18px; max-width: 48ch; line-height: 1.7; }
.floor-points { margin-top: 24px; display: grid; gap: 12px; }
.floor-points .fp { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); }
.floor-points .fp b { color: var(--ink); font-weight: 600; }
.floor-points .fp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 8px; flex: none; }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  counter-reset: step;
}
.step { position: relative; padding-top: 8px; }
.step .step-num {
  font-family: "Oswald", sans-serif;
  font-size: 46px;
  color: var(--line);
  line-height: 1;
}
.step h3 { font-size: 17px; margin-top: 14px; text-transform: none; letter-spacing: normal; }
.step p { font-size: 14px; color: var(--ink-soft); margin-top: 8px; line-height: 1.6; }
.step .step-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-faint);
}
.how-link { margin-top: 40px; text-align: center; font-size: 14.5px; }
/* The pair reads as one block: the guide, then the arithmetic behind it. */
.how-link-second { margin-top: 10px; }
.plan-note { margin-top: 26px; font-size: 13.5px; color: var(--ink-soft); }
/* A second note under the plans: same treatment, closed up to the first, the
   way .how-link-second sits under .how-link. */
.plan-note-second { margin-top: 10px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-band .wrap { text-align: center; padding: 76px 28px; }
.cta-band h2 { font-size: clamp(26px, 3.4vw, 38px); }
.cta-band p { font-size: 15.5px; color: var(--ink-soft); margin-top: 14px; max-width: 50ch; margin-left: auto; margin-right: auto; }
.cta-band .hero-form { margin-left: auto; margin-right: auto; justify-content: center; }
.cta-band .hero-note { text-align: center; }
.cta-band .form-status { text-align: center; }

/* ---------- Footer ---------- */
footer { padding: 56px 0 40px; }
.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.footer-brand { max-width: 280px; }
footer .brand { margin-bottom: 12px; }
footer .tagline { font-size: 13px; color: var(--ink-faint); line-height: 1.6; }
footer .copyright { font-size: 12px; color: var(--ink-faint); margin-top: 22px; }
.footer-cols { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-col { min-width: 128px; }
.footer-col-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-top: 10px;
}
.footer-col a:first-of-type { margin-top: 0; }
.footer-col a:hover { color: var(--accent); }

/* ---------- Interior page header (About/FAQ/Contact/Legal/Sitemap) ---------- */
.page-header { padding: 64px 0 46px; border-bottom: 1px solid var(--line-soft); }
.page-header h1 { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.05; }
.page-header p { font-size: 16.5px; color: var(--ink-soft); max-width: 60ch; margin-top: 16px; line-height: 1.65; }

/* ---------- Prose / legal content ---------- */
.prose { padding: 56px 0 96px; }
.prose .wrap { max-width: 760px; }
.prose .updated { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.04em; }
.prose h2 { font-size: 21px; text-transform: none; letter-spacing: normal; margin-top: 44px; }
.prose h2:first-of-type { margin-top: 28px; }
.prose h3 { font-size: 16px; text-transform: none; letter-spacing: normal; margin-top: 26px; }
.prose p { font-size: 15px; color: var(--ink-soft); margin-top: 14px; line-height: 1.75; }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 22px; color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.prose li { margin-top: 7px; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose .callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 28px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.prose .callout strong { color: var(--ink); }
.toc { margin-top: 24px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.toc-title { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 18px; font-size: 13.8px; }
.toc li { margin-top: 6px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------- Calculations explainer ---------- */
/* One card per derived figure. The card is doing hierarchy work the prose
   styles alone cannot: eighteen entries with the same four parts read as an
   undifferentiated wall unless each one is visibly a unit. */
.calc-note {
  margin-top: 22px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.calc-note h3 { margin-top: 0; font-size: 16.5px; }
.calc-note > p:first-of-type { color: var(--ink); }
.calc-uses { margin-top: 16px; }
.calc-uses-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Tighter than .prose ul: these are short input phrases, not sentences, and
   the prose line-height spaced a four-item list over half a screen. */
.calc-uses ul { margin-top: 8px; font-size: 14.2px; line-height: 1.6; }
.calc-uses li { margin-top: 4px; }
.calc-example {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14.2px;
  line-height: 1.7;
  color: var(--ink);
}
.calc-example span {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.calc-note .calc-caveat { font-size: 14.2px; color: var(--ink-faint); line-height: 1.7; }

/* ---------- FAQ ---------- */
.faq-group { margin-top: 44px; }
.faq-group:first-of-type { margin-top: 8px; }
.faq-group-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.faq-list { display: grid; gap: 10px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: "IBM Plex Mono", monospace;
  font-size: 19px;
  color: var(--accent);
  flex: none;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--line-soft); }
.faq-item .faq-a { padding: 16px 22px 20px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; }
.faq-item .faq-a p + p { margin-top: 10px; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.field { margin-bottom: 18px; }
.field:last-of-type { margin-bottom: 0; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 14.5px;
}
.field textarea { resize: vertical; min-height: 130px; }
.contact-form .btn { width: 100%; margin-top: 22px; }
.contact-info { display: grid; gap: 26px; }
.contact-info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.contact-info-item + .contact-info-item { margin-top: 20px; }
.contact-info-item .ci-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact-info-item .ci-value { font-size: 15px; margin-top: 6px; }
.contact-info-item .ci-value a { color: var(--ink); text-decoration: none; }
.contact-info-item .ci-value a:hover { color: var(--accent); }
.contact-info-item .ci-note { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }

/* ---------- Values grid (About) ---------- */
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 8px; }

/* ---------- Sitemap page ---------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; }
.sitemap-col-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.sitemap-col a { display: block; font-size: 14.5px; color: var(--ink-soft); text-decoration: none; padding: 7px 0; }
.sitemap-col a:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .app-shots { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; gap: 40px; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .plans { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .contact-grid { grid-template-columns: 1fr; }
  .sitemap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  section { padding: 60px 0; }
  .hero { padding: 44px 0 56px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .site-nav.open .nav-links {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 10px 20px; gap: 2px;
  }
  /* A 14px line is a 22px tap target with 16px of dead space around it. The
     padding turns each row into a 44px target that touches its neighbors,
     so a thumb lands on a link rather than between two. */
  .site-nav.open .nav-links a { padding: 11px 0; }
  .pillars { grid-template-columns: 1fr; }
  .demo-row .dr-bar { display: none; }
  .footer-grid { flex-direction: column; gap: 32px; }
  .footer-cols { gap: 28px; }
  .contact-grid { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .sitemap-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Guide ---------- */
.guide-step {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 34px;
  align-items: start;
  margin-top: 48px;
}
.guide-step:first-of-type { margin-top: 26px; }
.guide-step .phone {
  max-width: 236px;
  margin: 0;
  padding: 8px;
  background: #05090A;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
}
.guide-step .phone img { display: block; width: 100%; height: auto; border-radius: 20px; }
.guide-body h3 { margin-top: 0; }
/* One guide step sits between the h1 and the first numbered section, so its
   heading has to be an h2 or the outline skips a level for a screen reader.
   Sized to match the h3s in the steps that follow, so nothing moves visually. */
.guide-body h2 { margin-top: 0; font-size: 16px; text-transform: none; letter-spacing: normal; }
.guide-body p:first-of-type { margin-top: 10px; }
.guide-body ul { margin-top: 12px; }
.guide-reads {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.guide-reads dt {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-top: 10px;
}
.guide-reads dt:first-child { margin-top: 0; }
.guide-reads dd { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.65; }
@media (max-width: 760px) {
  .guide-step { grid-template-columns: 1fr; gap: 22px; }
  .guide-step .phone { max-width: 258px; margin: 0 auto; }
}