/* ================================================================
   Optomize Public Site
   AI-powered optimisation for profitability and sustainability
   ================================================================ */

/* -- Reset -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* -- Tokens -- */
:root {
  /* Palette extracted from Optomize octopus logo gradient */
  --bg: #0C0A18;              /* Near-black with purple undertone */
  --bg-alt: #110F20;          /* Slightly lighter for alternating sections */
  --bg-card: #1A1730;         /* Card surfaces */
  --bg-surface: #221F3A;      /* Elevated surfaces */
  --text: #FFFFFF;
  --text-soft: #B8B4D0;       /* Soft lavender */
  --text-muted: #706C95;      /* Muted purple-grey */
  --accent: #22DFE5;          /* Bright cyan from logo top */
  --accent-hover: #50E8EC;    /* Lighter cyan on hover */
  --accent-soft: rgba(34, 223, 229, 0.10);
  --purple: #482FC0;          /* Deep purple from logo tentacles */
  --purple-soft: rgba(72, 47, 192, 0.12);
  --mid-blue: #3351C2;        /* Mid blue from logo body */
  --warm: #FF9920;
  --warm-soft: rgba(255, 153, 32, 0.12);
  --line: #252245;            /* Purple-tinted border */
  --white: #FFFFFF;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --max-w: 960px;
  --max-w-narrow: 680px;
}

/* -- Base -- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

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

/* -- Layout -- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--max-w-narrow); }

/* -- Navigation -- */
.nav {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* THE NAV BRAND, rebuilt 2026-10-27. It was a 1024x1024 STACKED logo on OPAQUE
   BLACK, squeezed into a 40px-tall bar: a hard black square on the #0C0A18 nav with
   an eight-pixel wordmark inside it that nobody could read. The mark is now keyed out
   to transparency and the word is live Inter text, which stays crisp at every size and
   matches the brand guide's own typography rule.
   width:auto is load-bearing. The img carries width and height attributes so the
   browser reserves its box, and without this the presentational width wins against
   the CSS height and the mark renders stretched. */
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--white);
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
}
.nav-brand:hover { color: var(--accent); }
.nav-mark { height: 30px; width: auto; display: block; }
.nav-logo {
  height: 40px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  font-size: 14px;
  color: var(--text-soft);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); font-weight: 600; }
.nav-links a.nav-signin {
  padding: 6px 16px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-weight: 600;
  color: var(--accent);
}
.nav-links a.nav-signin:hover {
  background: var(--accent-soft);
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text);
}

/* -- Hero -- */
.hero {
  padding: 80px 0 60px;
  text-align: center;
}
.hero h1 {
  font-size: 44px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.hero h1 span {
  color: var(--accent);
}
.hero p {
  font-size: 18px;
  color: var(--text-soft);
  max-width: 580px;
  margin: 0 auto 12px;
  line-height: 1.6;
}
.hero .trust {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* -- Buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: var(--font);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary {
  background: var(--accent);
  color: var(--bg);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--bg); }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-secondary:hover { background: var(--bg-alt); border-color: var(--text-muted); color: var(--text); }

/* -- Sections -- */
.section {
  padding: 64px 0;
}
.section-alt {
  background: var(--bg-alt);
}
.section-deep {
  background: var(--bg-card);
}

.section-header {
  margin-bottom: 40px;
}
.section-header h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.section-header p {
  font-size: 16px;
  color: var(--text-soft);
  max-width: 60ch;
}
.section-header.center {
  text-align: center;
}
.section-header.center p {
  margin: 0 auto;
}

/* -- Eyebrow -- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 12px;
}

/* -- Steps -- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step {
  text-align: center;
  padding: 32px 24px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.step h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.step p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.6;
}

/* -- Feature cards -- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 24px;
  background: var(--bg-card);
  border-top: 3px solid var(--accent);
}
.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.feature-card .feature-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
  display: inline-block;
}
.feature-card p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.6;
}
.feature-card ul {
  list-style: none;
  margin-top: 12px;
}
.feature-card ul li {
  font-size: 14px;
  color: var(--text-soft);
  padding: 4px 0 4px 16px;
  position: relative;
}
.feature-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* -- Audience cards -- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.audience-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
}
.audience-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.audience-card p {
  font-size: 13px;
  color: var(--text-soft);
}

/* -- Comparison table -- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14px;
}
.compare-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--bg-card);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--line);
}
.compare-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--text-soft);
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .highlight {
  color: var(--accent);
  font-weight: 600;
}

/* -- Case snapshot -- */
.case-snapshot {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  background: var(--bg-card);
}
.case-snapshot h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.case-snapshot .case-result {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 16px;
}
.case-snapshot ul {
  list-style: none;
  margin-bottom: 16px;
}
.case-snapshot ul li {
  font-size: 14px;
  color: var(--text-soft);
  padding: 4px 0 4px 16px;
  position: relative;
}
.case-snapshot ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.case-snapshot .case-quote {
  font-size: 15px;
  font-style: italic;
  color: var(--text-soft);
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin-top: 16px;
}

/* -- Testimonials -- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testimonial {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  background: var(--bg-card);
}
.testimonial blockquote {
  font-size: 15px;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.65;
  margin-bottom: 12px;
}
.testimonial cite {
  font-style: normal;
  font-size: 13px;
  color: var(--text-muted);
}

/* -- HowLegit relationship -- */
.relationship {
  padding: 48px 0;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.relationship p {
  font-size: 15px;
  color: var(--text-soft);
  max-width: 60ch;
  margin: 0 auto 12px;
  line-height: 1.7;
}
.relationship .disclosure {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 20px;
}

/* -- CTA banner -- */
.cta-banner {
  text-align: center;
  padding: 64px 0;
}
.cta-banner h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
}
.cta-banner p {
  font-size: 16px;
  color: var(--text-soft);
  max-width: 48ch;
  margin: 0 auto 24px;
}

/* -- Footer -- */
.footer {
  padding: 40px 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer-brand {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.footer-tagline {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  list-style: none;
  margin-bottom: 20px;
}
.footer-links a {
  font-size: 13px;
  color: var(--text-soft);
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; color: var(--accent); }
.footer-disclosure {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto 8px;
  line-height: 1.6;
}
.footer-contact {
  font-size: 12px;
  color: var(--text-muted);
}

/* -- Page header (inner pages) -- */
.page-header {
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--line);
}
.page-header h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.page-header p {
  font-size: 16px;
  color: var(--text-soft);
  max-width: 56ch;
}

/* -- Content body (inner pages) -- */
.content {
  padding: 48px 0;
}
.content p {
  margin-bottom: 12px;
  max-width: 68ch;
}
.content h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 40px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
}
.content h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 24px 0 8px;
}
.content ul, .content ol {
  margin: 12px 0 12px 24px;
}
.content li {
  margin-bottom: 6px;
  font-size: 14px;
}

/* -- Team -- */
.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.team-member {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 24px;
  background: var(--bg-card);
}
.team-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
}
.team-member h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px;
}
.team-member .team-role {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 16px;
}
.team-member p {
  font-size: 14px;
  line-height: 1.65;
}

/* -- Form elements -- */
.form-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px;
  background: var(--bg-card);
}
.form-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.form-card p {
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 20px;
}

.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font);
  background: var(--bg-alt);
  color: var(--text);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 80px; }

/* -- Sector grid (about page) -- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sector-tag {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-soft);
  border: 1px solid var(--line);
  text-align: center;
}

/* -- Responsive -- */
@media (max-width: 768px) {
  .hero h1 { font-size: 28px; }
  .hero { padding: 48px 0 40px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }

  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 16px 24px;
    gap: 12px;
  }
  .nav-toggle { display: block; }
  .nav { position: relative; }

  .section { padding: 40px 0; }
  .page-header { padding: 40px 0 24px; }
  .content { padding: 32px 0; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 24px; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .section-header h2 { font-size: 22px; }
  .sector-grid { grid-template-columns: 1fr; }
}

/* -- Form status and honeypot -- */
.form-status {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 12px;
  min-height: 21px;
}
.form-status-success { color: var(--accent); }
.form-status-error { color: var(--warm); }

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but fill positioned ones. aria-hidden and tabindex keep it
   away from screen readers and keyboard users. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -- Social proof strip (sits directly under the hero) -- */
.proof-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 28px 0;
}
.proof-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.proof-stat .num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.proof-stat .lbl {
  display: block;
  font-size: 13px;
  color: var(--text-soft);
  margin-top: 6px;
  line-height: 1.4;
}
.proof-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 22px;
  line-height: 1.6;
}

/* -- Media -- */
.media {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
}
.media img { display: block; width: 100%; height: auto; }
.media-caption {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}

/* Hero split: copy left, product visual right */
.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

/* Photo row */
.photo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.photo-row figure { margin: 0; }
.photo-row img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.photo-row figcaption {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .proof-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
  .photo-row { grid-template-columns: 1fr; }
  .photo-row img { height: 200px; }
}

/* .hero centres its content, which is right for a single-column hero and wrong
   for the split. Left-align inside the split only. */
.hero-split { text-align: left; }
.hero-split .hero-ctas { justify-content: flex-start; }
@media (max-width: 760px) {
  .hero-split { text-align: center; }
  .hero-split .hero-ctas { justify-content: center; }
  .hero-split .media { text-align: left; }
}

/* -- Spheres list (About) -- */
.spheres { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: sphere; }
.spheres li {
  position: relative;
  padding: 0 0 20px 52px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  counter-increment: sphere;
}
.spheres li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.spheres li::before {
  content: counter(sphere);
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 14px; font-weight: 700;
}
.spheres strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }
.spheres span { color: var(--text-soft); font-size: 15px; line-height: 1.65; }

/* -- Founder block -- */
.founder { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.founder img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; }
.founder-credit { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* -- Values -- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-card { border: 1px solid var(--line); border-radius: 10px; padding: 24px; background: var(--bg-card); }
.value-card h3 { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.value-card .motto { font-size: 14px; color: var(--accent); font-style: italic; margin-bottom: 12px; }
.value-card p { font-size: 14px; line-height: 1.65; color: var(--text-soft); margin: 0; }

@media (max-width: 760px) {
  .founder { grid-template-columns: 1fr; }
  .founder img { max-width: 220px; }
  .values { grid-template-columns: 1fr; }
}

/* .team is a fixed 2-column grid, which strands a single member against an
   empty column. auto-fit does not reliably collapse the empty track here, so
   use flex: one card fills the row, two sit side by side, more wrap. */
.team {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.team .team-member { flex: 1 1 300px; }

/* ── Showcase: alternating image + text rows ──────────────────────────────
   Replaces the uniform card grid. Cards of identical size and weight read as
   generated content; alternating rows give the page a rhythm and let a real
   product screenshot carry the argument instead of a paragraph about it. */
.showcase-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.showcase-row:last-child { border-bottom: 0; }
.showcase > .showcase-row:nth-child(even) .showcase-text { order: 2; }
.showcase > .showcase-row:nth-child(even) .showcase-media { order: 1; }

.showcase-text .eyebrow { margin-bottom: 10px; }
.showcase-text h3 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 14px;
}
.showcase-text p { font-size: 16px; line-height: 1.7; color: var(--text-soft); margin: 0 0 12px; }
.showcase-text p:last-child { margin-bottom: 0; }

.showcase-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-card);
}
.showcase-caption { font-size: 13px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }

/* Placeholder frame. Deliberately obvious: a dashed box that names what belongs
   there. These must all be replaced before optomize.io points here. */
.shot-pending {
  border: 2px dashed var(--line);
  border-radius: 10px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: var(--bg-alt);
}
.shot-pending .lbl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warm);
  font-weight: 600;
  margin-bottom: 8px;
}
.shot-pending .what { font-size: 15px; color: var(--text-soft); line-height: 1.5; max-width: 300px; }

/* Compact capability list, a different rhythm from the rows above it */
.caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.caps div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.caps strong { display: block; color: var(--text); font-size: 15.5px; margin-bottom: 4px; }
.caps span { color: var(--text-soft); font-size: 14.5px; line-height: 1.6; }

@media (max-width: 820px) {
  .showcase-row { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .showcase > .showcase-row:nth-child(even) .showcase-text { order: 1; }
  .showcase > .showcase-row:nth-child(even) .showcase-media { order: 2; }
  .caps { grid-template-columns: 1fr; }
}

/* ── Fork: the two ways in ────────────────────────────────────────────────── */
.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fork-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 28px 28px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}
.fork-card.is-primary { border-color: var(--accent); }
.fork-card .tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
  margin-bottom: 14px;
  align-self: flex-start;
}
.fork-card.is-primary .tag { background: var(--accent-soft); color: var(--accent); }
.fork-card.is-secondary .tag { background: var(--purple-soft); color: var(--text-soft); }
.fork-card h3 { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 10px; letter-spacing: -0.02em; }
.fork-card > p { font-size: 15.5px; line-height: 1.7; color: var(--text-soft); margin: 0 0 18px; }
.fork-card ul { list-style: none; padding: 0; margin: 0 0 22px; }
.fork-card li { font-size: 14.5px; color: var(--text-soft); padding: 7px 0 7px 22px; position: relative; line-height: 1.55; }
.fork-card li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.fork-price { font-size: 15px; color: var(--text); margin: 0 0 18px; }
.fork-price strong { color: var(--accent); }
.fork-card .btn { margin-top: auto; align-self: flex-start; }

/* ── Journey: the six steps, as a path rather than a wall of text ─────────── */
.journey { position: relative; max-width: 760px; }
.journey::before {
  content: "";
  position: absolute;
  left: 27px; top: 18px; bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--mid-blue) 55%, var(--purple) 100%);
  opacity: 0.35;
}
.j-step { position: relative; padding: 0 0 34px 74px; }
.j-step:last-child { padding-bottom: 0; }
.j-icon {
  position: absolute;
  left: 0; top: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.j-icon svg { width: 24px; height: 24px; }
.j-step h3 { font-size: 19px; font-weight: 700; color: var(--text); margin: 12px 0 7px; }
.j-step p { font-size: 15.5px; line-height: 1.7; color: var(--text-soft); margin: 0; }
.j-num {
  position: absolute; left: 44px; top: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Scroll reveal. Steps start hidden only once JS confirms it can reveal them,
   so the content stays visible if the script never runs. */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); }
.js-reveal .reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .reveal.in { transition: none; }
}

@media (max-width: 760px) {
  .fork { grid-template-columns: 1fr; }
  .journey::before { left: 21px; }
  .j-step { padding-left: 60px; }
  .j-icon { width: 44px; height: 44px; }
  .j-icon svg { width: 20px; height: 20px; }
  .j-num { left: 33px; }
}

/* ── Numbers band: scale made concrete ────────────────────────────────────── */
.numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.numbers div { background: var(--bg-card); padding: 26px 20px; text-align: center; }
.numbers .n {
  display: block;
  font-size: 30px; font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em; line-height: 1.1;
}
.numbers .l { display: block; font-size: 13.5px; color: var(--text-soft); margin-top: 7px; line-height: 1.45; }
.numbers-note { font-size: 13.5px; color: var(--text-muted); text-align: center; margin-top: 16px; line-height: 1.6; }

/* ── Quotes with a name against them ──────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote {
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 10px;
  padding: 26px 24px;
  background: var(--bg-card);
  display: flex; flex-direction: column;
}
.quote p { font-size: 15px; line-height: 1.7; color: var(--text-soft); margin: 0 0 18px; }
.quote .who { margin-top: auto; }
.quote .who strong { display: block; color: var(--text); font-size: 14.5px; }
.quote .who span { display: block; color: var(--text-muted); font-size: 13px; margin-top: 2px; }

@media (max-width: 900px) {
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; }
}

/* ── FAQ. <details> so it works with no JS and stays keyboard accessible ──── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 36px 20px 0;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px; font-weight: 400; color: var(--accent);
}
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.faq p { font-size: 15.5px; line-height: 1.7; color: var(--text-soft); margin: 0 0 18px; padding-right: 36px; }