/* ==========================================================================
   Octavia — /for/<audience> landing pages

   Written to match the vocabulary already used across index.html and the
   features pages rather than inventing a second one:

     surfaces   bg-neutral-900/10 panels, border-white/5 hairlines
     hover      the border brightens to white/20 over 500ms; nothing moves
     icons      a neutral-800 tile with one muted accent colour per card
     type       Geist, font-medium, tight tracking, neutral-400 body copy
     accent     purple used sparingly, as a tint — never as a gradient

   Deliberately absent: gradient fills and gradient text, drifting background
   blooms, marquees, cursor spotlights. Motion is limited to the shell's own
   reveal-on-scroll fade and slow border transitions.

   Plain CSS because the site ships two Tailwind setups (purged build on
   index.html, runtime CDN elsewhere), so utilities are only as portable as
   the purge list. Everything is namespaced under .oc-a.
   ========================================================================== */

.oc-a {
  --a-bg: #050505;
  --a-panel: rgba(23, 23, 23, 0.4);
  --a-ink: #ffffff;
  --a-body: #a3a3a3;
  --a-dim: #737373;
  --a-line: rgba(255, 255, 255, 0.05);
  --a-line-hover: rgba(255, 255, 255, 0.2);
  --a-tile: #262626;
  --a-violet: #a78bfa;
  --a-display: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --a-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  display: block;
  background: var(--a-bg);
  font-family: var(--a-display);
  -webkit-font-smoothing: antialiased;
}

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

.oc-a-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1024px) { .oc-a-wrap { padding: 0 3rem; } }

/* --- Atoms ---------------------------------------------------------------- */

.oc-a-pill {
  display: inline-block;
  margin: 0 0 2rem;
  padding: 0.3rem 0.7rem;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 999px;
  color: #d8b4fe;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.oc-a-label {
  display: block;
  margin: 0 0 1.25rem;
  color: var(--a-dim);
  font-family: var(--a-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* --- Buttons -------------------------------------------------------------- */

.oc-a-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.oc-a-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.oc-a-btn-primary { background: var(--a-ink); color: #000; border: 1px solid var(--a-ink); }
.oc-a-btn-primary:hover { background: #e5e5e5; border-color: #e5e5e5; }

.oc-a-btn-ghost { background: transparent; color: var(--a-ink); border: 1px solid rgba(255, 255, 255, 0.12); }
.oc-a-btn-ghost:hover { border-color: var(--a-line-hover); }

/* --- Hero ----------------------------------------------------------------- */

.oc-a-hero { padding: 9rem 0 5rem; }

@media (min-width: 1024px) { .oc-a-hero { padding: 12rem 0 6rem; } }

.oc-a-hero h1 {
  max-width: 16ch;
  margin: 0 0 2rem;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--a-ink);
}

/* The second clause sits back rather than lighting up — the contrast does the
   work that a gradient was doing before. */
.oc-a-hero h1 em { font-style: normal; display: block; color: #525252; }

.oc-a-lede {
  max-width: 54ch;
  margin: 0 0 2.5rem;
  color: var(--a-body);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.7;
  font-weight: 300;
}

.oc-a-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.oc-a-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--a-dim);
  font-size: 0.8125rem;
  font-weight: 300;
}

.oc-a-trust iconify-icon { color: #525252; }

/* --- Stat row ------------------------------------------------------------- */

.oc-a-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--a-line);
}

@media (min-width: 900px) { .oc-a-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.oc-a-stat { padding: 2.25rem 1.5rem 2.25rem 0; }

@media (min-width: 900px) {
  .oc-a-stat + .oc-a-stat { padding-left: 2rem; border-left: 1px solid var(--a-line); }
}

.oc-a-stat b {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--a-ink);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.oc-a-stat span { color: var(--a-dim); font-size: 0.8125rem; font-weight: 300; }

/* --- Sections ------------------------------------------------------------- */

.oc-a-sec { padding: 6rem 0; border-top: 1px solid var(--a-line); }

@media (max-width: 640px) { .oc-a-sec { padding: 4.5rem 0; } }

.oc-a-sec h2 {
  max-width: 22ch;
  margin: 0 0 1.25rem;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--a-ink);
}

.oc-a-sec-lede {
  max-width: 56ch;
  margin: 0 0 3.5rem;
  color: var(--a-body);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
}

/* --- Obstacles ------------------------------------------------------------ */

.oc-a-pains { counter-reset: ocapain; }

.oc-a-pain {
  counter-increment: ocapain;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--a-line);
}

.oc-a-pain:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 900px) {
  .oc-a-pain { grid-template-columns: 4rem 20rem 1fr; gap: 2rem; align-items: baseline; }
}

.oc-a-pain::before {
  content: '0' counter(ocapain);
  color: #525252;
  font-family: var(--a-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
}

.oc-a-pain h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--a-ink);
}

.oc-a-pain p {
  margin: 0;
  max-width: 50ch;
  color: var(--a-body);
  font-size: 0.9375rem;
  line-height: 1.75;
  font-weight: 300;
}

/* --- Capability bento ----------------------------------------------------- */

.oc-a-caps { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 700px) { .oc-a-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 1024px) {
  .oc-a-caps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .oc-a-cap:nth-child(1) { grid-column: span 3; }
  .oc-a-cap:nth-child(2) { grid-column: span 3; }
  .oc-a-cap:nth-child(3) { grid-column: span 2; }
  .oc-a-cap:nth-child(4) { grid-column: span 2; }
  .oc-a-cap:nth-child(5) { grid-column: span 2; }
  .oc-a-cap:nth-child(6) { grid-column: span 6; }
}

.oc-a-cap {
  padding: 2.5rem;
  background: var(--a-panel);
  border: 1px solid var(--a-line);
  border-radius: 1.5rem;
  transition: border-color 0.5s ease;
}

.oc-a-cap:hover { border-color: var(--a-line-hover); }

.oc-a-cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 2rem;
  background: var(--a-tile);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  transition: background-color 0.5s ease;
}

/* One muted accent per card, following the index bento's mixed-tint approach. */
.oc-a-cap:nth-child(6n+1) .oc-a-cap-icon { color: #c4b5fd; }
.oc-a-cap:nth-child(6n+2) .oc-a-cap-icon { color: #fcd34d; }
.oc-a-cap:nth-child(6n+3) .oc-a-cap-icon { color: #6ee7b7; }
.oc-a-cap:nth-child(6n+4) .oc-a-cap-icon { color: #7dd3fc; }
.oc-a-cap:nth-child(6n+5) .oc-a-cap-icon { color: #fda4af; }
.oc-a-cap:nth-child(6n+6) .oc-a-cap-icon { color: #c4b5fd; }

.oc-a-cap h3 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--a-ink);
}

.oc-a-cap p {
  margin: 0;
  max-width: 52ch;
  color: var(--a-body);
  font-size: 0.875rem;
  line-height: 1.75;
  font-weight: 300;
}

/* --- Workflow ------------------------------------------------------------- */

.oc-a-steps { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }

@media (min-width: 860px) { .oc-a-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }

.oc-a-step { padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }

.oc-a-step b {
  display: block;
  margin-bottom: 0.85rem;
  color: #525252;
  font-family: var(--a-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
}

.oc-a-step h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 500; letter-spacing: -0.015em; color: var(--a-ink); }
.oc-a-step p { margin: 0; color: var(--a-body); font-size: 0.875rem; line-height: 1.7; font-weight: 300; }

/* --- Deliverables --------------------------------------------------------- */

.oc-a-outputs { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.oc-a-output {
  padding: 0.6rem 1.1rem;
  background: var(--a-panel);
  border: 1px solid var(--a-line);
  border-radius: 999px;
  color: #d4d4d4;
  font-size: 0.875rem;
  font-weight: 300;
  transition: border-color 0.5s ease;
}

.oc-a-output:hover { border-color: var(--a-line-hover); }

/* --- FAQ ------------------------------------------------------------------ */

.oc-a-faq { max-width: 60rem; }

.oc-a-faq details { border-top: 1px solid var(--a-line); }
.oc-a-faq details:last-of-type { border-bottom: 1px solid var(--a-line); }

.oc-a-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem 0;
  cursor: pointer;
  list-style: none;
  color: #e5e5e5;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.oc-a-faq summary::-webkit-details-marker { display: none; }
.oc-a-faq summary:hover { color: var(--a-ink); }

.oc-a-faq summary i {
  position: relative;
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
}

.oc-a-faq summary i::before,
.oc-a-faq summary i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #737373;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.oc-a-faq summary i::after { transform: rotate(90deg); }
.oc-a-faq details[open] summary i::after { opacity: 0; }
.oc-a-faq details[open] summary i::before { background: var(--a-violet); }

.oc-a-faq p {
  margin: 0;
  padding: 0 0 2rem;
  max-width: 72ch;
  color: var(--a-body);
  font-size: 0.9375rem;
  line-height: 1.8;
  font-weight: 300;
}

/* --- Related reading ------------------------------------------------------ */

.oc-a-reads { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 768px) { .oc-a-reads { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.oc-a-read {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  min-height: 9rem;
  padding: 2rem;
  background: var(--a-panel);
  border: 1px solid var(--a-line);
  border-radius: 1.5rem;
  color: #d4d4d4;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color 0.5s ease, color 0.5s ease;
}

.oc-a-read:hover { border-color: var(--a-line-hover); color: var(--a-ink); }
.oc-a-read iconify-icon { color: #525252; flex: 0 0 auto; transition: color 0.5s ease; }
.oc-a-read:hover iconify-icon { color: var(--a-violet); }

/* --- Sibling audiences ---------------------------------------------------- */

.oc-a-siblings { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.oc-a-sibling {
  padding: 0.6rem 1.1rem;
  background: var(--a-panel);
  border: 1px solid var(--a-line);
  border-radius: 999px;
  color: var(--a-body);
  font-size: 0.875rem;
  font-weight: 300;
  text-decoration: none;
  transition: border-color 0.5s ease, color 0.5s ease;
}

.oc-a-sibling:hover { border-color: var(--a-line-hover); color: var(--a-ink); }

.oc-a-sibling[aria-current='page'] {
  color: var(--a-ink);
  border-color: rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.08);
}

/* --- Closing panel -------------------------------------------------------- */

.oc-a-close { padding: 6rem 0 7rem; border-top: 1px solid var(--a-line); }

@media (max-width: 640px) { .oc-a-close { padding: 4.5rem 0 5.5rem; } }

.oc-a-close-panel {
  padding: 5rem 2rem;
  text-align: center;
  background: var(--a-panel);
  border: 1px solid var(--a-line);
  border-radius: 1.5rem;
}

@media (min-width: 768px) { .oc-a-close-panel { padding: 6rem 3rem; } }

.oc-a-close h2 {
  max-width: 20ch;
  margin: 0 auto 1.5rem;
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--a-ink);
}

.oc-a-close p {
  max-width: 48ch;
  margin: 0 auto 2.5rem;
  color: var(--a-body);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
}

.oc-a-close .oc-a-cta { justify-content: center; }

/* --- Focus ---------------------------------------------------------------- */

.oc-a a:focus-visible,
.oc-a summary:focus-visible {
  outline: 1px solid rgba(168, 85, 247, 0.8);
  outline-offset: 4px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .oc-a a, .oc-a-cap, .oc-a-read, .oc-a-output, .oc-a-sibling { transition: none !important; }
}