/* =========================================================
   b-oss website — shared styles
   Pulls from the app's design tokens: green-800 top bar,
   Helvetica, clean white surfaces, subtle borders.
   ========================================================= */

:root {
  --green-900: #143729;
  --green-800: #1f4d3a;
  --green-700: #2a6347;
  --green-100: #eef2ee;
  --green-50: #f6f8f6;
  --ink: #111111;
  --ink-2: #2a2a2a;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --line: #e5e7eb;
  --line-2: #eeeeee;
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-soft: 0 1px 2px rgba(15, 23, 32, 0.04), 0 8px 24px rgba(15, 23, 32, 0.06);
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Links inside running text: the green is too close to the body colour to tell them apart without
   an underline (WCAG 1.4.1). Navigation, cards, buttons, the footer and the contents list are
   recognisable by position and keep the plain style. */
.prose a:not(.btn),
.block > p a:not(.btn),
.lead a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose a:not(.btn):hover,
.block > p a:not(.btn):hover,
.lead a:hover {
  color: var(--green-700);
  text-decoration-thickness: 2px;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Top bar (matches the app) ---------- */
.topbar {
  height: 56px;
  background: var(--green-800);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.brand:hover {
  text-decoration: none;
}
.brand img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  padding: 8px 14px;
  border-radius: 7px;
  transition:
    background 120ms,
    color 120ms;
}
.nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}
.nav a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Page container ---------- */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}
.page.narrow {
  max-width: 720px;
}

/* ---------- Hero ---------- */
.hero {
  padding: 44px 0 28px;
  text-align: center;
}
.hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  margin: 0 auto 14px;
  display: block;
}
.hero h1 {
  margin: 0 0 8px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.hero .lead {
  margin: 0 auto;
  max-width: 620px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- Section ---------- */
section.block {
  padding: 32px 0;
  border-top: 1px solid var(--line-2);
}
section.block:first-of-type {
  border-top: none;
}

.section-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 10px;
}
.section-title {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.section-lead {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  max-width: 640px;
}

/* ---------- App card (homepage) ---------- */
.app-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--line-2);
}
.app-card-meta {
  min-width: 0;
}
.app-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.app-card-head img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}
.app-card-head h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.app-card-head .tagline {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.app-card p.summary {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 7px;
}
.feature-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--ink-2);
}
.feature-list .tick {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--green-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.7l4.5-5' stroke='%231f4d3a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  margin-top: 2px;
}

/* ---------- Shot (app screenshot placeholder) ---------- */
.shot {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-alt);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 16 / 10;
  position: relative;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}
.shot.placeholder {
  background-image: repeating-linear-gradient(135deg, #f3f5f3 0 12px, #fafbfa 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot.placeholder .label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  background: #fff;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 120ms,
    border-color 120ms,
    color 120ms;
}
.btn:hover {
  background: var(--green-50);
  border-color: rgba(31, 77, 58, 0.25);
  text-decoration: none;
}
.btn.primary {
  background: var(--green-800);
  border-color: var(--green-800);
  color: #fff;
}
.btn.primary:hover {
  background: var(--green-700);
  border-color: var(--green-700);
}
.btn.disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- App page: three big links ---------- */
.tri-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 8px 0 20px;
}
.tri-link {
  flex: 0 0 calc((100% - 32px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  transition:
    transform 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 160ms,
    box-shadow 160ms,
    background 160ms;
}
.tri-link:hover {
  border-color: rgba(31, 77, 58, 0.3);
  background: var(--green-50);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
  text-decoration: none;
}
.tri-link .ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--green-100);
  color: var(--green-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.tri-link h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tri-link p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ---------- Form ---------- */
.form {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
}
.form-row {
  display: grid;
  gap: 6px;
}
.form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.form-row .hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.input,
.textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 120ms,
    box-shadow 120ms;
}
.textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}
.input:focus,
.textarea:focus {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(31, 77, 58, 0.12);
}
.form-status {
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 8px;
  display: none;
}
.form-status.ok {
  display: block;
  background: #eaf6ef;
  color: #1b6b46;
  border: 1px solid #cfe7d8;
}
.form-status.err {
  display: block;
  background: #fdf1f0;
  color: #8a2b2b;
  border: 1px solid #f3d3d0;
}
.form-status.sending {
  display: block;
  background: var(--green-50);
  color: var(--ink-2);
  border: 1px solid var(--line);
}

/* ---------- Prose (intro paragraphs, user guide) ---------- */
.prose {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}
.prose p {
  margin: 0 0 16px;
}
.prose h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 36px 0 12px;
  color: var(--ink);
}
.prose h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 28px 0 8px;
  color: var(--ink);
}
.prose ul,
.prose ol {
  padding-left: 22px;
  margin: 0 0 16px;
}
.prose li {
  margin: 4px 0;
}
.prose code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13.5px;
  background: var(--green-50);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}

/* ---------- Guide-specific prose extras ---------- */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.prose table th,
.prose table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  line-height: 1.5;
}
.prose table th {
  background: var(--green-50);
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.prose table tr:last-child td {
  border-bottom: none;
}
.prose table td:first-child {
  white-space: nowrap;
  font-weight: 500;
  color: var(--ink);
}

.prose blockquote {
  margin: 18px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--green-700);
  background: var(--green-50);
  border-radius: 0 8px 8px 0;
  color: var(--ink-2);
  font-size: 14.5px;
}
.prose blockquote p {
  margin: 0;
}
.prose blockquote strong {
  color: var(--green-900);
}

.prose figure {
  margin: 18px 0 24px;
  padding: 0;
}
.prose figure img {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  background: var(--bg-alt);
  cursor: pointer;
}

/* ---------- Image lightbox ---------- */
#img-lightbox {
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.45);
}
#img-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.72);
}
#img-lightbox img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 10px;
  object-fit: contain;
}
#img-lightbox .lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#img-lightbox .lightbox-close:hover {
  background: rgba(0, 0, 0, 0.8);
}
.prose figure figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}

/* TOC */
.toc {
  margin: 24px 0 36px;
  padding: 18px 22px;
  background: var(--green-50);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.toc-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 10px;
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
.toc ol li {
  counter-increment: toc;
  font-size: 14px;
  line-height: 1.6;
}
.toc ol li::before {
  content: counter(toc) '.';
  color: var(--muted);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.toc a {
  color: var(--ink-2);
}
.toc a:hover {
  color: var(--green-800);
}

@media (max-width: 640px) {
  .toc ol {
    grid-template-columns: 1fr;
  }
}

/* ---------- CTA band ---------- */
.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--green-50);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin: 8px 0 48px;
}
.cta-band p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

/* ---------- Footer ---------- */
.footer {
  margin-top: 48px;
  border-top: 1px solid var(--line-2);
  padding: 20px 0;
  color: var(--muted);
  font-size: 12.5px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer a {
  color: var(--muted);
}
.footer a:hover {
  color: var(--ink-2);
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .hero {
    padding: 32px 0 20px;
  }
  .hero h1 {
    font-size: 30px;
  }
  .app-card {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 0;
  }
  .tri-link {
    flex: 0 0 100%;
  }
  .cta-band {
    flex-direction: column;
    align-items: flex-start;
  }
  .section-title {
    font-size: 22px;
  }
}
@media (max-width: 520px) {
  .topbar {
    padding: 0 16px;
  }
  .page {
    padding: 0 16px;
  }
  .nav a {
    padding: 8px 10px;
    font-size: 13px;
  }
}
/* Six nav items: tighten further on the narrowest phones so the bar doesn't scroll sideways. */
@media (max-width: 420px) {
  .topbar {
    padding: 0 10px;
  }
  .nav {
    gap: 0;
  }
  .nav a {
    padding: 8px 6px;
    font-size: 12.5px;
  }
}

/* ---------- Phone screenshots (b-mobile) ---------- */
.phone-shots {
  list-style: none;
  margin: 28px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), 1fr);
  gap: 20px;
  max-width: 960px;
}
.phone-shots.single {
  display: flex;
  justify-content: center;
}
.phone-shots.single li {
  width: 100%;
  max-width: 250px;
}
.phone-shots figure {
  margin: 0;
  padding: 0;
}
.phone-shots img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  background: var(--bg-alt);
  cursor: default;
}
.phone-shots figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  font-style: normal;
}
@media (max-width: 720px) {
  .phone-shots {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Three shots stay in one row (small); a 2+1 wrap looks lopsided. */
  .phone-shots[style*='--n: 3'] {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}