/* ---------------------------------------------------------------
   KLYK Management marketing site.

   Family DNA, kept: near-black blue-cast chrome, Space Grotesk
   display over Inter body, Krona One wordmark, one vivid accent.
   The accent is amber (#f5a524), per docs/13-brand-and-surfaces.

   Where this site departs from klyk.digital and klyk.care, and why:
   both of those are dark throughout. This one is not, because the
   product is not. The platform keeps the family's dark ground for
   chrome (sign-in, sidebar, headers) and works on a light surface,
   for the plain reason that staff are on it for a whole shift, on a
   phone in daylight. The site says that by being built the same way:
   dark chrome at the top and bottom, warm paper in between.

   The mechanism is the app's mechanism. Semantic tokens (--ground,
   --text, --accent-text) are remapped by [data-ground="dark"], the
   same trick as data-surface on the platform's <html>. Components
   never name a palette colour, so they work on either ground.

   Retheming still means editing the :root block only.
   --------------------------------------------------------------- */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* The wordmark face: Krona One subset to the four glyphs the logo
   uses (K, L, Y and the full stop), 1.7KB. Logo only, never body. */
@font-face {
  font-family: "Krona One";
  src: url("fonts/krona-one-kly.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -- family chrome: shared with klyk.digital and klyk.care ----- */
  --dark: #05070d;
  --dark-raised: #0b101c;
  --dark-card: #0d1424;
  --dark-ink: #e6edf7;
  --dark-muted: #96a2b8;

  /* -- the working surface: warm, because hospitality is ---------
     Deliberately not the cool greys of the other two sites. Linen
     and lamplight rather than screen white.                       */
  --paper: #f8f5f0;
  --paper-raised: #fffefb;
  --paper-sunk: #f1ece3;
  --paper-ink: #17130c;
  --paper-muted: #6b6053;

  /* -- the one accent -------------------------------------------
     accent-deep is the amber that still passes AA as text on
     paper (5.3:1); the bright one is for dark grounds only.       */
  --accent: #f5a524;
  --accent-bright: #fbbf24;
  --accent-deep: #96560a;
  --accent-ink: #1a0f00;
  --glow: rgba(245, 165, 36, 0.25);

  /* -- the other two surfaces, used once, on the surfaces panel -- */
  --team: #a78bfa;
  --team-deep: #6d28d9;
  --portal: #d9b98a;
  --portal-deep: #7c5a2a;

  /* -- semantic tokens: paper is the default ground -------------- */
  --ground: var(--paper);
  --ground-raised: var(--paper-raised);
  --ground-sunk: var(--paper-sunk);
  --text: var(--paper-ink);
  --text-muted: var(--paper-muted);
  --accent-text: var(--accent-deep);
  --rule: rgba(23, 19, 12, 0.12);
  --rule-strong: rgba(23, 19, 12, 0.24);
  --shadow: 0 1px 2px rgba(23, 19, 12, 0.04), 0 12px 32px rgba(23, 19, 12, 0.06);

  /* -- type ------------------------------------------------------ */
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --logo: "Krona One", "Space Grotesk", system-ui, sans-serif;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(1.9rem, 1.55rem + 2vw, 3rem);
  --step-4: clamp(2.4rem, 1.85rem + 3.4vw, 4.15rem);

  --radius: 12px;
  --radius-sm: 8px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* The dark chrome. Everything inside inherits the remapped tokens,
   so the same card, list and button markup works on both grounds. */
[data-ground="dark"] {
  --ground: var(--dark);
  --ground-raised: var(--dark-raised);
  --ground-sunk: var(--dark-card);
  --text: var(--dark-ink);
  --text-muted: var(--dark-muted);
  --accent-text: var(--accent-bright);
  --rule: rgba(230, 237, 247, 0.1);
  --rule-strong: rgba(230, 237, 247, 0.22);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.72;
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
main {
  flex: 1;
}
::selection {
  background: var(--accent);
  color: var(--accent-ink);
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
p {
  margin: 0 0 1em;
}
a {
  color: var(--accent-text);
}
img {
  max-width: 100%;
  height: auto;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 50;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-weight: 500;
  padding: 0.6em 1.2em;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------- Layout */
.wrap {
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow {
  max-width: 58rem;
}
.section {
  background: var(--ground);
  color: var(--text);
  padding-block: clamp(3.75rem, 8vw, 7rem);
}
.section--tight {
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
}
.section--sunk {
  background: var(--ground-sunk);
  border-block: 1px solid var(--rule);
}

/* Section heads are left aligned, where the other family sites
   centre everything. Short amber rule above the eyebrow, not
   under the title. */
.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section__title {
  font-size: var(--step-3);
  margin-bottom: 0.35em;
}
.lede {
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.6;
  margin: 0;
}
.rule {
  width: 2.5rem;
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  margin: 0 0 1.35rem;
}
.section-head--center .rule {
  margin-inline: auto;
}
.eyebrow {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 0.9rem;
}

/* ------------------------------------------------------ Buttons */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  padding: 0.8em 1.8em;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.25s ease, transform 0.2s ease;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover {
  background: var(--accent-bright);
  box-shadow: 0 0 30px var(--glow);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover {
    transform: none;
  }
}

/* ------------------------------------------------------- Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--dark) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  color: var(--text);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}
/* Typographic wordmark: KLYK and the dot in Krona One, the product
   word quiet in the display face. */
.brand {
  font-family: var(--logo);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
/* The dot is a rendered circle, never Krona's full stop glyph,
   which is subtly squarish at these sizes. Em sized so it scales. */
.brand__dot {
  display: inline-block;
  width: 0.17em;
  height: 0.17em;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 0.1em 0 0.12em;
}
.brand__product {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.92em;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2rem);
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.nav a {
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--text);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.header-cta {
  padding: 0.6em 1.35em;
  font-size: var(--step--1);
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem 0.4rem;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle__bar + .nav-toggle__bar {
  margin-top: 5px;
}
.site-header[data-open] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header[data-open] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.site-header[data-open] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 860px) {
  .nav-toggle {
    display: block;
  }
  /* Kept rendered so it can animate: hidden state is faded and
     nudged up, opening slides it down. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--dark-raised);
    border-bottom: 1px solid var(--rule);
    padding: 0.25rem 0 0.75rem;
    opacity: 0;
    transform: translateY(-0.6rem);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.26s ease,
      visibility 0s linear 0.26s;
  }
  .site-header[data-open] .nav {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.22s ease, transform 0.26s ease, visibility 0s;
  }
  .nav a {
    padding: 0.9rem var(--gutter);
  }
  @media (prefers-reduced-motion: reduce) {
    .nav {
      transition: none;
      transform: none;
    }
  }
}
@media (max-width: 400px) {
  .brand {
    font-size: 0.92rem;
  }
  .header-cta {
    padding: 0.5em 0.9em;
    font-size: 0.72rem;
  }
}

/* --------------------------------------------------------- Hero */
/* Warm light on a dark ground: lamplight in a room rather than the
   drifting colour field the other family sites use. Two very slow,
   low amplitude washes, softness baked into the gradient stops so
   nothing is blurred at runtime, grain against banding. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ground);
  color: var(--text);
  border-bottom: 1px solid var(--rule);
}
.hero__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__lamp {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform;
}
.hero__lamp--a {
  width: 78vmax;
  top: -44vmax;
  right: -20vmax;
  background: radial-gradient(
    circle,
    rgba(245, 165, 36, 0.3) 0%,
    rgba(245, 165, 36, 0) 60%
  );
  animation: lamp-a 46s ease-in-out infinite alternate;
}
.hero__lamp--b {
  width: 62vmax;
  bottom: -38vmax;
  left: -16vmax;
  background: radial-gradient(
    circle,
    rgba(124, 68, 8, 0.55) 0%,
    rgba(124, 68, 8, 0) 62%
  );
  animation: lamp-b 62s ease-in-out infinite alternate;
}
@keyframes lamp-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-7vw, 5vh, 0) scale(1.12);
  }
}
@keyframes lamp-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.08);
  }
  to {
    transform: translate3d(6vw, -4vh, 0) scale(0.95);
  }
}
.hero[data-paused] .hero__lamp {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .hero__lamp {
    animation: none !important;
  }
}
.hero__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.05;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
/* Asymmetric: copy left, the product to the right. The other
   family sites centre their heroes. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.25rem);
  align-items: center;
}
.hero h1 {
  font-size: var(--step-4);
  letter-spacing: -0.03em;
  margin-bottom: 0.4em;
}
.hero__sub {
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 34ch;
  color: var(--text-muted);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}
.hero__note {
  margin: 1.75rem 0 0;
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 48ch;
}
@media (max-width: 940px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
  .hero__sub,
  .hero__note {
    max-width: 52ch;
  }
}
/* Sub page hero: same ground and light, static, shorter. */
.hero--page .hero__inner {
  padding-block: clamp(3rem, 7vw, 5rem);
  max-width: 50rem;
}
.hero--page .hero__light {
  background: radial-gradient(
      48rem 26rem at 88% -20%,
      rgba(245, 165, 36, 0.18),
      transparent 64%
    ),
    radial-gradient(36rem 22rem at 0% 120%, rgba(124, 68, 8, 0.32), transparent 68%);
}
.hero--page h1 {
  font-size: var(--step-3);
}
.hero--page .hero__sub {
  max-width: 54ch;
}

/* ----------------------------------------------- Product surface */
/* A small honest rendering of the platform: the family's dark
   chrome down the side, the working surface light. It is the whole
   design argument of this site in one component. */
.app {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--dark-raised);
  border: 1px solid rgba(230, 237, 247, 0.14);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 30px 60px rgba(0, 0, 0, 0.45);
  font-size: clamp(0.62rem, 0.52rem + 0.4vw, 0.78rem);
  line-height: 1.5;
}
.app__bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.1em;
  background: var(--dark);
  border-bottom: 1px solid rgba(230, 237, 247, 0.1);
}
.app__mark {
  font-family: var(--logo);
  font-size: 0.95em;
  color: var(--dark-ink);
  letter-spacing: 0.02em;
}
.app__venue {
  font-family: var(--display);
  font-weight: 500;
  color: var(--dark-muted);
  letter-spacing: 0.04em;
}
.app__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--display);
  font-size: 0.85em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-muted);
}
.app__pulse {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--glow);
  animation: pulse 3.2s ease-out infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.5);
  }
  70%,
  100% {
    box-shadow: 0 0 0 0.75em rgba(245, 165, 36, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .app__pulse {
    animation: none;
  }
}
.app__body {
  display: grid;
  grid-template-columns: 10.5em minmax(0, 1fr);
}
.app__side {
  background: var(--dark);
  border-right: 1px solid rgba(230, 237, 247, 0.1);
  padding: 0.9em 0;
}
.app__sideLabel {
  font-family: var(--display);
  font-size: 0.8em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(150, 162, 184, 0.75);
  padding: 0.5em 1.4em 0.4em;
}
.app__nav {
  list-style: none;
  margin: 0 0 0.5em;
  padding: 0;
  font-family: var(--display);
  font-weight: 500;
  color: var(--dark-muted);
}
.app__nav li {
  padding: 0.45em 1.4em;
  border-left: 2px solid transparent;
}
.app__nav li[data-on] {
  color: var(--dark-ink);
  border-left-color: var(--accent);
  background: rgba(245, 165, 36, 0.09);
}
/* The working surface. Light, because the people using it are on
   it all shift. */
.app__pane {
  background: var(--paper-raised);
  color: var(--paper-ink);
  padding: 1.1em 1.25em 1.35em;
}
.app__paneHead {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin-bottom: 0.9em;
}
.app__paneTitle {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25em;
  letter-spacing: -0.01em;
}
.app__paneMeta {
  margin-left: auto;
  font-family: var(--display);
  color: var(--paper-muted);
  font-variant-numeric: tabular-nums;
}
.app__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.app__row {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9em;
  padding: 0.62em 0;
  border-top: 1px solid rgba(23, 19, 12, 0.1);
}
.app__row:last-child {
  border-bottom: 1px solid rgba(23, 19, 12, 0.1);
}
.app__date {
  font-family: var(--display);
  font-weight: 500;
  color: var(--paper-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.app__who {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app__who small {
  display: block;
  font-weight: 400;
  color: var(--paper-muted);
  font-size: 0.88em;
}
/* Status pills carry the platform's derived payment states. */
.pill {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.88em;
  letter-spacing: 0.04em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill--ok {
  background: rgba(4, 120, 87, 0.12);
  color: #04613f;
  border-color: rgba(4, 120, 87, 0.25);
}
.pill--due {
  background: rgba(245, 165, 36, 0.16);
  color: var(--accent-deep);
  border-color: rgba(150, 86, 10, 0.3);
}
.pill--late {
  background: rgba(179, 38, 30, 0.1);
  color: #9a2019;
  border-color: rgba(179, 38, 30, 0.25);
}
.app__foot {
  margin-top: 0.9em;
  font-family: var(--display);
  font-size: 0.9em;
  color: var(--paper-muted);
  display: flex;
  gap: 1.2em;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.app__foot b {
  color: var(--paper-ink);
  font-weight: 600;
}
.figure {
  margin: 0;
}
.figure__cap {
  margin: 0.9rem 0 0;
  font-size: var(--step--1);
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 480px) {
  .app__body {
    grid-template-columns: 1fr;
  }
  .app__side {
    display: flex;
    gap: 0.2em;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(230, 237, 247, 0.1);
    padding: 0.5em 0.6em;
  }
  .app__sideLabel {
    display: none;
  }
  .app__nav {
    display: flex;
    margin: 0;
  }
  .app__nav li {
    padding: 0.3em 0.7em;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .app__nav li[data-on] {
    border-left: 0;
    border-bottom-color: var(--accent);
  }
  .app__nav li:nth-child(n + 4) {
    display: none;
  }
}

/* ------------------------------------------------- The day, on a clock */
/* Hospitality runs on the clock, so this section is one. Times in
   tabular numerals down a hairline, the work beside them. */
.clock {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 46rem;
}
.clock__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  position: relative;
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.clock__row:last-child {
  padding-bottom: 0;
}
/* The hairline runs behind the dots, stopping at the last row. */
.clock__row::before {
  content: "";
  position: absolute;
  left: calc(5.5rem + clamp(1rem, 3vw, 2rem) / 2 - 0.5px);
  top: 0.85em;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.clock__row:last-child::before {
  display: none;
}
.clock__row::after {
  content: "";
  position: absolute;
  left: calc(5.5rem + clamp(1rem, 3vw, 2rem) / 2 - 3.5px);
  top: calc(0.85em - 3px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.clock__time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text);
}
.clock__body h3 {
  font-size: var(--step-1);
  margin-bottom: 0.3em;
}
.clock__body p {
  margin: 0;
  color: var(--text-muted);
}
.clock__who {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.35rem;
}
@media (max-width: 560px) {
  .clock__row {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 1rem;
  }
  .clock__row::before {
    left: calc(3.6rem + 0.5rem - 0.5px);
  }
  .clock__row::after {
    left: calc(3.6rem + 0.5rem - 3.5px);
  }
  .clock__time {
    font-size: var(--step-0);
  }
}

/* --------------------------------------------------------- Ledger */
/* Ruled rows with a status column: the module map, and anything
   else that is really a list with facts against it. */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.ledger__row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
  padding: 1.05rem 0.25rem;
  border-bottom: 1px solid var(--rule);
}
.ledger__num {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.ledger__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  color: var(--text);
}
.ledger__name small {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-top: 0.2rem;
}
.ledger__status {
  justify-self: end;
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--text-muted);
}
.ledger__status[data-state="live"] {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.ledger__status[data-state="build"] {
  color: var(--text);
  border-color: var(--rule-strong);
}
@media (max-width: 620px) {
  .ledger__row {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }
  .ledger__status {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.55rem;
  }
}

/* ---------------------------------------------------------- Cards */
.cards {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.cards--two {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
.card {
  position: relative;
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--shadow);
  transition: border-color 0.3s ease, transform 0.18s ease-out;
}
.card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  margin-bottom: 1.15rem;
}
.card h3 {
  font-size: var(--step-1);
  margin-bottom: 0.4em;
}
.card p {
  color: var(--text-muted);
  margin: 0;
}
.card p + .points {
  margin-top: 1rem;
}

/* Square accent bullets, the family list style */
.points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.points li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
  color: var(--text);
}
.points li:last-child {
  margin-bottom: 0;
}
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--accent);
}
.points--muted li {
  color: var(--text-muted);
}

/* ------------------------------------------------ Three surfaces */
/* The one place the site shows a colour other than amber: each
   surface wears its own accent, which is exactly what the platform
   does at runtime. */
.surfaces {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
}
.surface {
  --sur: var(--accent);
  --sur-ink: var(--accent-deep);
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.surface[data-surface="team"] {
  --sur: var(--team);
  --sur-ink: var(--team-deep);
}
.surface[data-surface="portal"] {
  --sur: var(--portal);
  --sur-ink: var(--portal-deep);
}
/* A band of the surface's own colour along the top edge. */
.surface::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--sur);
}
.surface__who {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sur-ink);
  margin: 0.4rem 0 0.7rem;
}
.surface h3 {
  font-size: var(--step-1);
  margin-bottom: 0.4em;
}
.surface p {
  color: var(--text-muted);
  margin: 0 0 1rem;
}
.surface__at {
  margin-top: auto;
  font-family: var(--display);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-top: 1px solid var(--rule);
  padding-top: 0.8rem;
  word-break: break-word;
}
.surface__at b {
  color: var(--text);
  font-weight: 600;
}

/* ---------------------------------------------------------- Steps */
.steps {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 1.9rem);
}
.step__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-2);
  color: var(--accent-text);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.step h3 {
  font-size: var(--step-1);
  margin-bottom: 0.45em;
}
.step p {
  margin: 0;
  color: var(--text-muted);
}

/* ---------------------------------------------------------- Stats */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.stat {
  border-top: 2px solid var(--accent);
  padding-top: 0.9rem;
}
.stat__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.5;
  margin-top: 0.3rem;
}

/* ---------------------------------------------------------- Split */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split + .split {
  margin-top: clamp(3rem, 6vw, 5rem);
}
.split__copy h2 {
  font-size: var(--step-2);
}
.split__copy p {
  color: var(--text-muted);
}
.panel {
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--shadow);
}
.panel h3 {
  font-size: var(--step-0);
  font-family: var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 1rem;
}
.panel .points li {
  margin-bottom: 0.7rem;
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split--flip .split__copy {
    order: 1;
  }
  .split--flip .panel {
    order: 2;
  }
}

/* ----------------------------------------------------- Pull quote */
.quote {
  max-width: 44rem;
  margin: 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 3px solid var(--accent);
}
.quote p {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 0.9rem;
  text-wrap: balance;
}
.quote figcaption {
  font-size: var(--step--1);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------- CTA band */
.cta-band {
  background: radial-gradient(46rem 20rem at 50% 125%, var(--glow), transparent 70%),
    var(--ground);
}
.cta-band__inner {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}
.cta-band__title {
  font-size: var(--step-3);
}
.cta-band__line {
  color: var(--text-muted);
  margin: 0 0 1.9rem;
}
.cta-band__after {
  margin: 1.4rem 0 0;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* --------------------------------------------------------- Footer */
.site-footer {
  background: var(--ground-raised);
  color: var(--text);
  border-top: 1px solid var(--rule);
}
.footer-grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-block: clamp(2.75rem, 5vw, 4rem) 0;
}
.footer-brand {
  font-family: var(--logo);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 0.7rem;
}
.footer-brand__dot {
  display: inline-block;
  width: 0.17em;
  height: 0.17em;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 0.1em 0 0.12em;
}
.footer-brand__product {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.92em;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.footer-h {
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 0.85rem;
}
.footer-muted {
  color: var(--text-muted);
}
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-muted);
}
.footer-list li {
  padding: 0.18rem 0;
}
.footer-list a,
.footer-muted a {
  color: inherit;
}
.footer-list a:hover,
.footer-muted a:hover {
  color: var(--text);
}
.footer-base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 2.5rem;
  padding-block: 1.4rem 2rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
}
.footer-base p {
  margin: 0;
}

/* ----------------------------------------------------- Error page */
.error-hero {
  min-height: 58vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.error-hero__code {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-4);
  color: var(--accent-text);
  letter-spacing: -0.03em;
  margin: 0;
}

/* ---------------------------------------------------------------
   Scroll reveal. Sections marked data-reveal fade and lift in the
   first time they enter the viewport (small observer in site.js).
   Without JS, or with reduced motion, everything is simply there.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
  html.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

/* The "now" marker on the clock, added by site.js in the visitor's
   own local time. Nothing is marked without JavaScript, which is the
   correct amount of nothing. */
.clock__row[data-now]::after {
  width: 11px;
  height: 11px;
  left: calc(5.5rem + clamp(1rem, 3vw, 2rem) / 2 - 5.5px);
  top: calc(0.85em - 5px);
  box-shadow: 0 0 0 4px var(--glow);
}
.clock__now {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
  padding: 0.15em 0.6em;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .clock__row[data-now]::after {
    left: calc(3.6rem + 0.5rem - 5.5px);
  }
}

/* ------------------------------------------------- Module detail rows */
/* The ledger opened up: same ruled rhythm, but with room for what each
   module actually does. Bullets run in two columns once there is width
   for them, so a seven point list does not become a scroll. */
.modlist {
  border-top: 1px solid var(--rule);
}
.modrow {
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--rule);
}
.modrow__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}
.modrow__num {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  width: 1.75rem;
  flex: none;
}
.modrow__name {
  font-size: var(--step-2);
  margin: 0;
  flex: 1 1 14rem;
}
.modrow__head .ledger__status {
  margin-left: auto;
}
.modrow__summary {
  color: var(--text-muted);
  margin: 0.55rem 0 1.1rem;
  max-width: 52rem;
}
@media (min-width: 620px) {
  .modrow__summary,
  .modrow .points {
    padding-left: 2.5rem;
  }
}
@media (min-width: 900px) {
  .modrow .points {
    columns: 2;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .modrow .points li {
    break-inside: avoid;
    margin-bottom: 0.6rem;
  }
}

/* A four step sequence should read as four, or as two rows of two, but
   never as three with one stranded underneath. */
@media (min-width: 640px) and (max-width: 1079px) {
  .steps--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .steps--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}