/* lopobae.com. Colours are the Teras tokens (web/lib/teras.ts); logo colours stay in the logo (brand/README.md). */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --teras-background: #FBF6EA;
  --teras-card: #FFFFFF;
  --teras-text: #1F2A22;
  --teras-secondary-text: #5C5A50;
  --teras-action: #214E34;
  --teras-on-action: #FFFFFF;
  --teras-link: #1C6470;
  --teras-divider: #EDE6D3;
  --logo-navy: #1F4D77; --logo-teal: #5BAAB5; --logo-coral: #F37761; --logo-forest: #29563D;
  --logo-head: #F4E9D4; --logo-tile: #FFFCF8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --teras-background: #0E100D;
    --teras-card: #1A1D18;
    --teras-text: #F3EFE4;
    --teras-secondary-text: #B3AE9F;
    --teras-action: #7CC796;
    --teras-on-action: #0E100D;
    --teras-link: #7CCAD4;
    --teras-divider: #2C2F28;
  }
  /* Dark backgrounds use the monochrome logo (brand voice rules). */
  .wordmark path { fill: var(--teras-text); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--teras-background);
  color: var(--teras-text);
  font: 1.0625rem/1.6 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main, footer { max-width: 40rem; margin: 0 auto; padding: 0 1rem; }
.hero { padding: 4rem 0 2rem; text-align: center; }
.wordmark { width: min(14rem, 60vw); height: auto; }
.navy { fill: var(--logo-navy); } .teal { fill: var(--logo-teal); } .coral { fill: var(--logo-coral); }
.forest { fill: var(--logo-forest); } .head { fill: var(--logo-head); } .tile { fill: var(--logo-tile); }
h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.2; font-weight: 800; margin: 1.5rem 0 1rem; text-wrap: balance; }
h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 700; margin: 0 0 .75rem; }
.lead { font-size: 1.1875rem; color: var(--teras-secondary-text); margin: 0 auto; max-width: 32rem; }
.lead strong { color: var(--teras-action); }
section { padding: 2rem 0; border-top: 1px solid var(--teras-divider); }
p { margin: 0 0 1rem; }
.note { color: var(--teras-secondary-text); font-size: .9375rem; }
.launch { text-align: center; }
/* [hidden] must win until the script has a value, so display is set only when shown. */
.countdown { grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 1.25rem 0; }
.countdown:not([hidden]) { display: grid; }
.countdown div { background: var(--teras-card); border-radius: 1rem; padding: .875rem .25rem; }
.countdown span { display: block; font-size: clamp(1.75rem, 8vw, 2.5rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.countdown small { color: var(--teras-secondary-text); font-size: .875rem; }
.after { font-weight: 700; font-size: 1.1875rem; }
.loop { list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: step; }
.loop li { counter-increment: step; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: .75rem; padding: .625rem 0; }
.loop li::before {
  content: counter(step); grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; background: var(--teras-action); color: var(--teras-on-action);
}
.loop b { font-weight: 700; }
.loop span { color: var(--teras-secondary-text); }
.facts { margin: 0; padding: 1rem 1.25rem 1rem 2.25rem; background: var(--teras-card); border-radius: 1rem; }
.facts li + li { margin-top: .5rem; }
a { color: var(--teras-link); }
.button {
  display: inline-flex; align-items: center; min-height: 3rem; padding: .75rem 1.5rem; border-radius: 999px;
  background: var(--teras-action); color: var(--teras-on-action); font-weight: 700; text-decoration: none;
}
a:focus-visible { outline: 3px solid var(--teras-link); outline-offset: 3px; }
footer { padding: 2rem 1rem 3rem; border-top: 1px solid var(--teras-divider); color: var(--teras-secondary-text); font-size: .875rem; text-align: center; }
footer p { margin: .25rem 0; }
.mark { width: 3rem; height: 3rem; margin-bottom: .5rem; }