/* Bucala brochure. Colours, type and spacing come from design/tokens.css. */

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

body {
  margin: 0;
  background: var(--bc-mist);
  color: var(--bc-ink);
  font-family: var(--bc-font-body);
  font-size: var(--bc-text-md);
  line-height: var(--bc-leading-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--bc-jacaranda); text-underline-offset: 0.18em; }
a:focus-visible, .button:focus-visible { outline: none; box-shadow: var(--bc-focus-ring); border-radius: 6px; }
code { font-family: var(--bc-font-mono); font-size: 0.9em; }
p code, td code, dd code { background: #E7E3FB; padding: 0.05em 0.3em; border-radius: 4px; }

.wrap { width: min(1120px, 100% - 2 * var(--bc-space-6)); margin-inline: auto; }
/* Narrow sections keep the page's left edge; only their text is limited. */
.narrow > * { max-width: 68ch; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--bc-space-4); top: var(--bc-space-4); background: var(--bc-ink); color: var(--bc-mist); padding: var(--bc-space-2) var(--bc-space-4); z-index: 10; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3, dt { font-family: var(--bc-font-display); line-height: var(--bc-leading-tight); }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--bc-space-6); max-width: 17ch; text-wrap: balance; }
h2 { font-size: clamp(1.6rem, 2.8vw, var(--bc-text-3xl)); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 var(--bc-space-3); }
h3 { font-size: var(--bc-text-lg); font-weight: 500; margin: 0 0 var(--bc-space-2); }

section { padding-block: var(--bc-space-16); }
.band { background: #FFFFFF; border-block: 1px solid var(--bc-line); }
.section-lede { color: var(--bc-slate); max-width: 62ch; margin: 0 0 var(--bc-space-8); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 5; background: rgba(245, 246, 250, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bc-line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-4); padding-block: var(--bc-space-3); }
.brand { display: flex; align-items: center; gap: var(--bc-space-2); text-decoration: none; color: var(--bc-ink); font-family: var(--bc-font-display); font-weight: 700; font-size: var(--bc-text-xl); letter-spacing: -0.02em; }
nav ul { display: flex; flex-wrap: wrap; gap: var(--bc-space-1) var(--bc-space-6); list-style: none; margin: 0; padding: 0; }
nav a { color: var(--bc-ink); text-decoration: none; font-weight: 500; font-size: var(--bc-text-sm); }
nav a:hover { color: var(--bc-jacaranda); }
.nav-cta { color: var(--bc-jacaranda) !important; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: var(--bc-space-3); margin-block: var(--bc-space-6) var(--bc-space-4); }
.button { display: inline-block; padding: 0.8em 1.3em; border-radius: var(--bc-radius); font-weight: 600; text-decoration: none; }
.button.primary { background: var(--bc-jacaranda); color: #FFFFFF; }
.button.primary:hover { background: #4A2EE0; }
.button.secondary { color: var(--bc-ink); box-shadow: inset 0 0 0 1.5px var(--bc-ink); }
.button.secondary:hover { background: #FFFFFF; }

/* Hero */
.hero { padding-block: var(--bc-space-16) var(--bc-space-12); }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--bc-space-12); align-items: center; }
/* Grid items may shrink below their content, so wide code scrolls inside its panel instead of widening the page. */
.hero-grid > *, .trust > *, .who > * { min-width: 0; }
.lede { font-size: var(--bc-text-lg); color: #2C3346; max-width: 52ch; margin: 0; }
.status-note { font-size: var(--bc-text-sm); color: var(--bc-slate); max-width: 52ch; margin: 0; }

.hero-panel { margin: 0; background: var(--bc-ink); color: var(--bc-mist); border-radius: var(--bc-radius-lg); padding: var(--bc-space-6); }
.code-file { margin: 0 0 var(--bc-space-2); font-family: var(--bc-font-mono); font-size: var(--bc-text-xs); color: #A3AAC0; }
.code pre { margin: 0; overflow-x: auto; font-family: var(--bc-font-mono); font-size: 0.82rem; line-height: 1.6; }
.c-dim { color: #A3AAC0; }
.c-add { display: inline-block; color: #FFFFFF; background: rgba(146, 120, 255, 0.24); box-shadow: inset 3px 0 0 #9278FF; padding: 0 0.4em; margin-inline: -0.4em; border-radius: 3px; }

/* The rail: the one moving element. A gold spark (the logo's settlement dot)
   travels from "Created" to "Settled". */
.rail { margin-block: var(--bc-space-8) var(--bc-space-4); }
.rail-line { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #9278FF, #9278FF) left / 100% 100% no-repeat, #1B2238; }
.spark { position: absolute; top: 50%; left: 100%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--bc-gold); box-shadow: 0 0 0 6px rgba(242, 179, 61, 0.18); }
.rail-stops { display: flex; justify-content: space-between; list-style: none; margin: var(--bc-space-3) 0 0; padding: 0; font-size: var(--bc-text-xs); color: #A3AAC0; }
.rail-stops li { max-width: 30%; }
.rail-stops li:nth-child(2) { text-align: center; }
.rail-stops .settled { text-align: right; color: var(--bc-gold); font-weight: 600; }
.hero-panel figcaption { font-size: var(--bc-text-sm); color: #C9CEDD; }

@media (prefers-reduced-motion: no-preference) {
  .rail-line { animation: rail-fill 2.4s cubic-bezier(0.6, 0, 0.2, 1) 0.4s both; }
  .spark { animation: spark-travel 2.4s cubic-bezier(0.6, 0, 0.2, 1) 0.4s both; }
  .rail-stops .settled { animation: settle 0.4s ease-out 2.7s both; }
}
@keyframes rail-fill { from { background-size: 0% 100%, auto; } to { background-size: 100% 100%, auto; } }
@keyframes spark-travel { from { left: 0%; } to { left: 100%; } }
@keyframes settle { from { opacity: 0.35; } to { opacity: 1; } }

/* Steps: a real sequence, so numbered. */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--bc-space-6); max-width: 760px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--bc-space-4); }
.steps li::before { content: counter(step); grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--bc-font-display); font-weight: 700; color: var(--bc-jacaranda); box-shadow: inset 0 0 0 2px var(--bc-jacaranda); }
.steps li:last-child::before { background: var(--bc-jacaranda); color: #FFFFFF; }
.steps p { margin: 0; color: #2C3346; max-width: 62ch; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--bc-text-md); }
th, td { text-align: left; padding: var(--bc-space-3) var(--bc-space-4) var(--bc-space-3) 0; border-bottom: 1px solid var(--bc-line); vertical-align: top; }
thead th { font-size: var(--bc-text-sm); color: var(--bc-slate); font-weight: 600; }
tbody th { font-weight: 600; white-space: nowrap; }
td { color: #2C3346; }
.prices td { font-variant-numeric: tabular-nums; }
.badge { display: inline-block; padding: 0.2em 0.7em; border-radius: 999px; font-size: var(--bc-text-sm); font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--bc-success-bg); color: var(--bc-fynbos); }
.badge.plan { background: var(--bc-pending-bg); color: var(--bc-slate); }

/* Audiences */
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bc-space-8); }
.who p { margin: 0; color: #2C3346; }
.who > div { padding-top: var(--bc-space-4); border-top: 3px solid var(--bc-jacaranda); }

/* Trust */
.trust { display: grid; grid-template-columns: 4fr 7fr; gap: var(--bc-space-12); }
.facts { margin: 0; display: grid; gap: var(--bc-space-6); }
.facts dt { font-size: var(--bc-text-lg); font-weight: 500; margin-bottom: var(--bc-space-1); }
.facts dd { margin: 0; color: #2C3346; max-width: 62ch; }

/* Start */
.start { background: var(--bc-ink); color: var(--bc-mist); }
.start a { color: #B7A8FF; }
.start p code { background: rgba(146, 120, 255, 0.22); color: #FFFFFF; }
.snippet { background: #1B2238; border-radius: var(--bc-radius); padding: var(--bc-space-4); overflow-x: auto; font-size: 0.85rem; line-height: 1.6; color: #E4E7F0; }
.small { font-size: var(--bc-text-sm); color: #C9CEDD; }

/* Footer */
.site-footer { background: var(--bc-ink); color: #A3AAC0; border-top: 1px solid #1B2238; padding-block: var(--bc-space-8) var(--bc-space-12); font-size: var(--bc-text-sm); }
.footer-row { display: grid; gap: var(--bc-space-3); }
.footer-row p { margin: 0; max-width: 80ch; }

@media (max-width: 860px) {
  .hero-grid, .trust { grid-template-columns: 1fr; gap: var(--bc-space-8); }
  .who { grid-template-columns: 1fr; gap: var(--bc-space-6); }
  nav ul { gap: var(--bc-space-1) var(--bc-space-4); }
  nav li:not(:last-child) { display: none; }
  section { padding-block: var(--bc-space-12); }
}

/* Small screens: each table row becomes a short block, so descriptions and
   status badges are never squeezed or cut off. */
@media (max-width: 640px) {
  table, tbody, tr, th, td { display: block; width: 100%; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr { padding-block: var(--bc-space-3); border-bottom: 1px solid var(--bc-line); }
  th, td { border-bottom: 0; padding: 0; }
  tbody th { white-space: normal; margin-bottom: var(--bc-space-1); }
  td + td { margin-top: var(--bc-space-2); }
}