/* Auditwyse public site. Tokens, rules and the reasons for them live in design.md
   next to this file. The product console has its own system in ../DESIGN.md;
   nothing here is meant for it. */

:root {
  color-scheme: light;

  --forest:          #0D3E2F;
  --forest-deep:     #072A1F;
  --foliage:         #1E4D3D;
  --gold:            #F9B217;
  --gold-deep:       #E89C05;
  --ivory:           #FCF9F1;
  --ivory-sunken:    #F6F3EB;
  --stone:           #DCDAD2;
  --stone-strong:    #C9C6BB;
  --slate:           #3B463E;
  --espresso:        #1C1A17;
  --on-forest:       #F6F3EB;
  --on-forest-muted: #A9B8AF;
  --on-gold:         #0D3E2F;
  --uncovered:       #9B2C2C;

  --display: Domine, Clarendon, Recoleta, Georgia, serif;
  --sans: 'Plus Jakarta Sans', Inter, 'DM Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --fs-meta: 12px; --fs-ui: 14px; --fs-body: 16px;
  --fs-section: 20px; --fs-h2: 40px; --fs-h1: 60px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --pill: 999px;

  --nav-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1152px; margin: 0 auto; padding: 0 var(--s5); }

/* ------------------------------------------------------------------- type */

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; max-width: 72ch; text-wrap: pretty; }

h1 {
  font-family: var(--display);
  font-size: var(--fs-h1);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 18ch;
}

h2 {
  font-family: var(--display);
  font-size: var(--fs-h2);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3 { font-size: var(--fs-section); line-height: 1.3; font-weight: 700; }

.lede { color: var(--slate); font-size: 18px; }

.meta {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: var(--forest); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* -------------------------------------------------------- capsule navbar */

.site-head {
  position: fixed;
  top: 20px;
  left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 var(--s4);
}

/* Real glass, not a tinted rectangle. The tint is thin enough that the hero's
   glow reads through it; the backdrop filter blurs and saturates what is behind
   so the colour bleeds into the capsule; the inset highlights are the lit top
   edge and shaded bottom edge of a physical slab; the sheen is a specular
   streak from an upper-left light. On ivory pages the tint is thicker, because
   there is no glow to pick up and thin forest over ivory turns to mud. */
.site-head .wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 1024px;
  min-height: var(--nav-h);
  padding: var(--s2) var(--s2) var(--s2) var(--s5);
  /* All five items, wordmark to button, are direct flex children (the nav
     and actions wrappers use display:contents), so space-between puts one
     equal gap between every neighbouring pair. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  background: rgba(13, 62, 47, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.08);
  backdrop-filter: blur(22px) saturate(1.7) brightness(1.08);
  border: 1px solid rgba(246, 243, 235, 0.18);
  border-radius: var(--pill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 24px rgba(255, 255, 255, 0.04),
    0 24px 60px -24px rgba(7, 42, 31, 0.7);
}
.site-head .wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 38%, transparent 55%, rgba(249, 178, 23, 0.06) 100%);
  pointer-events: none;
}
.site-head .wrap { transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }

/* nav.js samples what sits behind each item and behind the capsule as a
   whole. Over a light background the slab turns to ivory glass and the text
   to forest; each item still decides its own colour, so a capsule that
   straddles a light card and a dark panel gets forest on one side and ivory
   on the other. */
.site-head.over-light .wrap {
  background: rgba(252, 249, 241, 0.55);
  border-color: rgba(13, 62, 47, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(13, 62, 47, 0.12),
    0 24px 60px -24px rgba(13, 62, 47, 0.35);
}
.site-head a.on-light, .site-head a.on-light:hover { color: var(--forest); }
.site-head a.on-light .by { color: var(--foliage); }
.site-head a.on-dark { color: var(--on-forest-muted); }
.site-head a.wordmark.on-dark, .site-head a.on-dark:hover { color: var(--on-forest); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--on-forest);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.wordmark .mark { width: 26px; height: 26px; margin-right: 2px; }

.wordmark .by {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--on-forest-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-nav { display: contents; }

.site-nav a {
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--on-forest-muted);
  text-decoration: none;
  transition: color 160ms ease;
}
.site-nav a:hover { color: var(--on-forest); }

.nav-actions { display: contents; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s5);
  border-radius: var(--pill);
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease,
              color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--gold);
  color: var(--on-gold);
  border-color: var(--gold);
  box-shadow: 0 10px 30px -10px rgba(249, 178, 23, 0.55);
}
.btn-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-1px); }

.btn-lg { min-height: 52px; padding: 0 var(--s6); font-size: var(--fs-body); }

/* Outlined pill: on forest it borrows the ivory at low alpha, on ivory it uses
   the control-boundary stone so the edge clears 3:1. */
.btn-ghost {
  background: transparent;
  color: var(--on-forest);
  border-color: rgba(246, 243, 235, 0.22);
}
.btn-ghost:hover { background: rgba(246, 243, 235, 0.07); border-color: rgba(246, 243, 235, 0.4); }

.btn-secondary {
  background: var(--ivory);
  color: var(--espresso);
  border-color: var(--stone-strong);
}
.btn-secondary:hover { border-color: var(--slate); }

/* ------------------------------------------------------------------- bands */

.band { padding: var(--s9) 0; }
.band-sunken { background: var(--ivory-sunken); border-top: 1px solid var(--stone); }

.band-dark { background: var(--forest); color: var(--on-forest); position: relative; overflow: hidden; }
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--on-forest); }
.band-dark .lede, .band-dark .meta { color: var(--on-forest-muted); }

/* The one glow per dark band. Forest to gold, heavily blurred, low alpha. */
.glow {
  position: absolute;
  left: 50%; top: 16%;
  width: 760px; height: 380px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(249, 178, 23, 0.28), rgba(30, 77, 61, 0.4) 55%, transparent);
  filter: blur(110px);
  pointer-events: none;
}
/* A second, smaller gold source high on the right, so the capsule has a
   distinct light to catch on that side rather than one even wash. */
.hero .glow::after {
  content: "";
  position: absolute;
  right: -30%; top: -40%;
  width: 55%; height: 80%;
  border-radius: 50%;
  background: rgba(249, 178, 23, 0.35);
}

.stack    { display: flex; flex-direction: column; gap: var(--s4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s5); }

.centre { text-align: center; }
.centre h1, .centre h2, .centre h3, .centre p { margin-inline: auto; }

/* -------------------------------------------------------------------- hero */

.hero { padding: calc(var(--nav-h) + 20px + var(--s9)) 0 var(--s8); }
.hero .wrap { position: relative; z-index: 1; }
.hero .lede { max-width: 60ch; margin-top: var(--s5); }

.hero-actions {
  margin-top: var(--s7);
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  justify-content: center;
}

.trust {
  margin-top: var(--s9);
  padding-top: var(--s7);
  border-top: 1px solid rgba(246, 243, 235, 0.12);
}
.trust ul {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s5) var(--s8);
}
.trust li {
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0.06em;
  color: var(--on-forest-muted);
}

/* --------------------------------------------------------------- showcase */

.tabs {
  margin-top: var(--s7);
  display: flex;
  justify-content: center;
}
.tabs [role="tablist"] {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s1);
  padding: 6px;
  background: var(--ivory-sunken);
  border: 1px solid var(--stone);
  border-radius: var(--pill);
}
.tabs [role="tab"] {
  min-height: 40px;
  padding: 0 var(--s5);
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--slate);
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.tabs [role="tab"]:hover { color: var(--espresso); }
.tabs [role="tab"][aria-selected="true"] { background: var(--forest); color: var(--on-forest); }

.showcase {
  margin-top: var(--s7);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s7);
  align-items: center;
  background: var(--ivory-sunken);
  border: 1px solid var(--stone);
  border-radius: var(--r-lg);
  padding: var(--s7);
  text-align: left;
}
.showcase[hidden] { display: none; }
.showcase .meta { color: var(--forest); }
.showcase h3 { font-size: 28px; margin-top: var(--s2); }
.showcase p { color: var(--slate); margin-top: var(--s4); }
.showcase .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s5);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
}
.showcase .more:hover { text-decoration: underline; }
.showcase .more svg { width: 16px; height: 16px; }

/* Simulated assessment panel. Forest-deep, mono, no real data. */
.term {
  background: var(--forest-deep);
  color: var(--on-forest-muted);
  border: 1px solid rgba(246, 243, 235, 0.1);
  border-radius: var(--r-md);
  padding: var(--s5);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 30px 60px -30px rgba(7, 42, 31, 0.7);
}
.term-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid rgba(246, 243, 235, 0.1);
}
.term-bar .dots { display: inline-flex; gap: 6px; margin-right: var(--s2); }
.term-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(246, 243, 235, 0.25); }
.term-bar .title { font-family: var(--sans); font-size: var(--fs-meta); color: var(--on-forest-muted); }
.term-bar .tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--pill);
  border: 1px solid rgba(249, 178, 23, 0.5);
  color: var(--gold);
}
.term ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.term li { display: flex; gap: var(--s3); align-items: baseline; }
.term .ok { color: #7FD1A8; }
.term .id { color: var(--gold); }
.term .neutral { color: var(--on-forest-muted); }
.term .live { color: var(--on-forest); }
.term .live .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 1.4s ease-in-out infinite; }
.term .out {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(246, 243, 235, 0.08);
  border-radius: var(--r-sm);
  color: var(--on-forest-muted);
}
.term .out q { color: var(--on-forest); quotes: '\201C' '\201D'; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---------------------------------------------------------------- pipeline */

.pipeline {
  margin-top: var(--s8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.pipeline li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s4); }

/* Connector between orbs: a hairline with a gold bead at the midpoint. */
.pipeline li:not(:last-child)::before,
.pipeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 54px;
  pointer-events: none;
}
.pipeline li:not(:last-child)::before {
  left: calc(50% + 62px);
  width: calc(100% - 124px + var(--s5));
  height: 1px;
  background: var(--stone-strong);
}
.pipeline li:not(:last-child)::after {
  left: calc(100% + var(--s5) / 2);
  width: 10px; height: 10px;
  margin: -4.5px 0 0 -5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--ivory-sunken), 0 0 12px rgba(249, 178, 23, 0.6);
}

/* Glass orbs. Each step sets its tint as an RGB triplet; the layers are the
   same for all four: a tinted body, a bright top-left specular, a soft bottom
   reflection, a frosted inner ring, and a thick lit rim. */
.pipeline li:nth-child(1) { --t: 59, 70, 62; }
.pipeline li:nth-child(2) { --t: 30, 77, 61; }
.pipeline li:nth-child(3) { --t: 13, 62, 47; }
.pipeline li:nth-child(4) { --t: 232, 156, 5; }

.orb {
  position: relative;
  width: 108px; height: 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgb(var(--t));
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 28%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(circle at 70% 88%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 50% 60%, rgba(var(--t), 0.28), rgba(var(--t), 0.55) 100%),
    linear-gradient(160deg, rgba(var(--t), 0.35), rgba(var(--t), 0.75));
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 0 0 7px rgba(255, 255, 255, 0.38),
    inset 0 -14px 24px rgba(var(--t), 0.35),
    inset 0 10px 18px rgba(255, 255, 255, 0.6),
    0 22px 40px -16px rgba(var(--t), 0.55),
    0 2px 6px rgba(var(--t), 0.2);
}
.orb::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(var(--t), 0.25), 0 0 0 1px rgba(var(--t), 0.18);
  pointer-events: none;
}
.orb::after {
  content: "";
  position: absolute;
  left: 22%; top: 9%;
  width: 44%; height: 24%;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.orb svg {
  position: relative;
  width: 40px; height: 40px;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8)) drop-shadow(0 4px 10px rgba(var(--t), 0.45));
}
.pipeline .pill {
  padding: 6px var(--s4);
  border-radius: var(--pill);
  background: var(--ivory);
  border: 1px solid var(--stone);
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--espresso);
}
.pipeline .pill::before { counter-increment: step; content: counter(step) ". "; color: var(--gold-deep); }
.pipeline p { font-size: var(--fs-ui); color: var(--slate); text-align: center; max-width: 26ch; }

/* -------------------------------------------------------------- comparison */

.compare {
  margin-top: var(--s8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  text-align: left;
  position: relative;
  z-index: 1;
}
.compare-card {
  background: rgba(30, 77, 61, 0.55);
  border: 1px solid rgba(246, 243, 235, 0.1);
  border-radius: var(--r-lg);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.compare-card.win {
  border-color: rgba(249, 178, 23, 0.45);
  box-shadow: 0 0 60px -20px rgba(249, 178, 23, 0.35);
}
.compare-card .icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(246, 243, 235, 0.06);
  border: 1px solid rgba(246, 243, 235, 0.12);
  color: var(--on-forest-muted);
}
.compare-card.win .icon { background: rgba(249, 178, 23, 0.14); border-color: rgba(249, 178, 23, 0.4); color: var(--gold); }
.compare-card .icon svg { width: 24px; height: 24px; }
.compare-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }
.compare-card li { display: flex; gap: var(--s3); font-size: var(--fs-ui); color: var(--on-forest-muted); line-height: 1.6; }
.compare-card li::before { content: "\2022"; font-weight: 700; color: rgba(246, 243, 235, 0.35); }
.compare-card.win li::before { color: var(--gold); }
.compare-card b { color: var(--on-forest); font-weight: 600; }

/* ----------------------------------------------------------------- callout */

.callout {
  background: var(--ivory-sunken);
  border: 1px solid var(--stone);
  border-radius: var(--r-lg);
  padding: var(--s6);
  max-width: 72ch;
  margin-inline: auto;
}

/* -------------------------------------------------------------------- prose */

/* Legal pages: left-aligned running text, centred headings. */
.page-top { padding-top: calc(var(--nav-h) + 20px + var(--s8)); }
.prose { max-width: 72ch; margin-inline: auto; text-align: left; }
.prose h1 { font-size: var(--fs-h2); text-align: center; max-width: none; }
.prose h1 + .meta { text-align: center; }
.prose h2 { font-family: var(--sans); font-size: var(--fs-section); margin-top: var(--s7); }
.prose h3 { font-size: var(--fs-body); margin-top: var(--s5); }
.prose p, .prose li { color: var(--slate); }
.prose p { margin-top: var(--s3); }
.prose ul, .prose ol { margin: var(--s3) 0 0; padding-left: var(--s5); }
.prose li { margin-top: var(--s2); }

/* Unfilled legal details must be impossible to publish by accident. */
.fill {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--uncovered);
  background: var(--ivory-sunken);
  border: 1px dashed var(--stone-strong);
  border-radius: var(--r-sm);
  padding: 0 var(--s1);
}
.band-dark .fill { background: rgba(0, 0, 0, 0.25); color: #F0A29A; }

/* ------------------------------------------------------------------- footer */

.site-foot {
  background: var(--forest-deep);
  color: var(--on-forest-muted);
  padding: var(--s7) 0;
  font-size: var(--fs-ui);
}
.site-foot .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3) var(--s5);
  flex-wrap: wrap;
}
.foot-links { display: flex; gap: var(--s5); flex-wrap: wrap; }
.foot-links a { color: var(--on-forest-muted); text-decoration: none; transition: color 160ms ease; }
.foot-links a:hover { color: var(--on-forest); }

/* ------------------------------------------------------------ small screens */

@media (max-width: 900px) {
  :root { --fs-h1: 44px; --fs-h2: 32px; }
  .showcase { grid-template-columns: 1fr; padding: var(--s5); }
  .compare { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .pipeline li::before, .pipeline li::after { display: none; }
}

@media (max-width: 640px) {
  :root { --fs-h1: 36px; --fs-h2: 28px; }
  .site-nav, .wordmark .by { display: none; }
  .wordmark { white-space: nowrap; }
  .site-head .wrap { padding-left: var(--s4); }
  .nav-actions .btn { padding: 0 var(--s4); white-space: nowrap; }
  .tabs [role="tablist"] { border-radius: var(--r-lg); }
  .trust ul { gap: var(--s3) var(--s5); }
  .band { padding: var(--s8) 0; }
  .btn { min-height: 44px; }
  .foot-links a { padding: var(--s2) 0; display: inline-block; }
  .site-foot .wrap { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}