/* ==========================================================================
   Profectify Apps — the public site

   COLOUR MEANS TWO DIFFERENT THINGS ON TWO SURFACES, AND THAT IS DELIBERATE.

   In the product, colour is DATA. tokens.css states the law: "Nothing else is
   coloured, so colour always means something." That is right for a report,
   which is read once, closely, on paper, by somebody deciding about a person.

   Here, colour is WAYFINDING between three products. This page is read in
   three seconds by a stranger deciding whether we are worth an email, and a
   site that sells three tools in one colour tells them nothing. So the four
   energies carry the whole system: Indikator is Fokus blue, PI is Gnist
   yellow, Trivsel is Anker green, the decision pages are Drivkraft red.

   The two surfaces never fight, because this file NEVER overwrites a token
   value from tokens.css. It adds its own namespace (--e-*, --fs-*, --sp-*,
   --r-*), and everything it restyles that the apps also use is scoped to
   .site-page — a class /eksempler/* never gets. Those pages embed a product's
   own report markup verbatim and need the institutional vocabulary intact.

   Marketing pages load:  tokens.css + site.css
   Sample pages load:     indikator.css + site.css + the product's stylesheet

   GEOMETRY IS THE DIFFERENTIATOR, NOT COLOUR. Everything except the wheel is
   a hard plate at 0 radius, and the only circles on the site are the wheel
   and the energy chips. Round means energy. Rounding the rest makes us any
   other SaaS site.
   ========================================================================== */

.site-page {
  /* ---- The four energies -------------------------------------------------
     Authoritative values, equal to Pi\Instrument::energyMeta(). A stylesheet
     cannot call PHP, so tests/platform/brand_colours_test.php is what makes
     the duplication safe. There were three of these palettes until recently. */
  --e-drive:  #E30613;  --e-drive-deep:  #B8000F;  --e-drive-wash:  #FDE7E8;
  --e-spark:  #FFD100;  --e-spark-deep:  #C79E00;  --e-spark-wash:  #FFF6D1;
  --e-anchor: #009640;  --e-anchor-deep: #00702F;  --e-anchor-wash: #E0F2E7;
  --e-focus:  #0057B8;  --e-focus-deep:  #004A9E;  --e-focus-wash:  #E1ECF9;

  /* Text that travels WITH a field, so a component never has to guess.
     Two of the four energies cannot carry text, and the numbers are the
     reason rather than a matter of taste:

       #FFD100 spark   1.46:1 on white, 11.30:1 on ink, 1.26:1 on paper
                       → a field and a chip. NEVER text. NEVER a link.
       #009640 anchor  3.86:1 on white, 4.28:1 on ink — fails BOTH ways
                       → a wheel sector, a chip, a 4px rail (3:1 suffices).
                         A green field that carries text uses --e-anchor-deep
                         (6.25:1 on white).
       #E30613 drive   4.88:1 on white — passes AA with no headroom, so a
                       text-bearing red field uses --e-drive-deep (6.90:1).
       #0057B8 focus   6.87:1 on white. */
  --on-drive: #ffffff;
  --on-spark: #16211f;
  --on-anchor: #ffffff;
  --on-focus: #ffffff;

  --ink-deep: #0B1210;

  /* ---- Scale -------------------------------------------------------------
     --t-base is 0.9375rem = 15px, which is right for a dense consultant screen
     and wrong for a page somebody reads once on a phone. Namespaced rather
     than overridden: setting --t-base on .site would re-type every embedded
     sample report, which is the single likeliest way to break /eksempler/*. */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.25rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.75rem;
  --fs-hero: clamp(2.5rem, 6vw, 4.125rem);

  --lh-tight: 1.05;
  --lh-head:  1.12;
  --lh-body:  1.6;

  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2.5rem;  --sp-7: 4rem;    --sp-8: 6rem;
  --sp-9: 9rem;

  --shell-max: 1200px;
  --gutter: var(--sp-5);
  --measure-md: 34ch;
  --measure-lg: 62ch;

  /* Round means energy. Everything else is a plate. */
  --r-field: 0;
  --r-control: 4px;
  --r-chip: 999px;

  /* The current page's colour spine. SiteController sets the body class. */
  --field: var(--ink-deep);
  --on-field: var(--paper);
  --field-quiet: rgba(247, 246, 242, 0.7);
}

/* Per-page spine. One class, set from Pages::all()['…']['og'] via the body. */
.site-page--focus  { --field: var(--e-focus-deep);  --on-field: #fff; --field-quiet: rgba(255,255,255,0.78); }
.site-page--spark  { --field: var(--e-spark);       --on-field: var(--ink); --field-quiet: rgba(22,33,31,0.72); }
.site-page--anchor { --field: var(--e-anchor-deep); --on-field: #fff; --field-quiet: rgba(255,255,255,0.78); }
.site-page--drive  { --field: var(--e-drive-deep);  --on-field: #fff; --field-quiet: rgba(255,255,255,0.78); }
.site-page--ink    { --field: var(--ink-deep);      --on-field: var(--paper); --field-quiet: rgba(247,246,242,0.7); }
.site-page--paper { --field: var(--paper-raised); --on-field: var(--ink); --field-quiet: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Reset and base

   Marketing pages no longer load indikator.css, so everything it used to
   provide has to be here — including the reduced-motion kill switch, which is
   easy to forget precisely because nothing looks wrong when it is missing.
   -------------------------------------------------------------------------- */

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

body.site-page {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.site-page h1, .site-page h2, .site-page h3, .site-page h4 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  line-height: var(--lh-head);
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.site-page p, .site-page ul, .site-page ol { margin: 0; }
.site-page img, .site-page svg { max-width: 100%; }

.site-page a { color: var(--e-focus); text-decoration: none; }
.site-page a:hover { color: var(--e-focus-deep); text-decoration: underline; }
.site-page a:focus-visible,
.site-page button:focus-visible,
.site-page summary:focus-visible,
.site-page input:focus-visible,
.site-page select:focus-visible,
.site-page textarea:focus-visible {
  outline: 3px solid var(--e-focus);
  outline-offset: 2px;
}

.site-page .eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.site-page .muted { color: var(--ink-muted); }
.site-page .faint { color: var(--ink-faint); }
.site-page .small { font-size: var(--fs-sm); }
.site-page .subtitle { font-size: var(--fs-lg); }

.site-page .skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-deep);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-4);
  z-index: 100;
}
.site-page .skip:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.site-shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* Narrows the CONTENT, not the shell. Narrowing the shell re-centres it
   inside the 1200px column, which indents every page-hero a few dozen pixels
   to the right of the masthead above it. */
.site-shell--narrow > * { max-width: 78ch; }

/* --------------------------------------------------------------------------
   A plate: a saturated colour field. Text colour arrives with it, never
   guessed.

   Called .plate and not .field because .field is already the app's form-group
   class in indikator.css, which sample pages load — a colour rule named .field
   would repaint every form group inside an embedded report.
   -------------------------------------------------------------------------- */

.plate {
  background: var(--field);
  color: var(--on-field);
}
.plate .eyebrow,
.plate .muted,
.plate .faint { color: var(--field-quiet); }
.plate p a,
.plate li a { color: var(--on-field); text-decoration: underline; }
.plate p a:hover,
.plate li a:hover { color: var(--on-field); opacity: 0.75; }
/* Chrome — nav, brandmark, buttons, the switcher — is not prose: it takes the
   plate's own text colour and no underline. Written at .site-page .plate so it
   out-specifies `.site-page a`, which would otherwise paint a masthead link the
   Fokus blue meant for links in body copy. */
.site-page .plate .site-nav__link,
.site-page .plate .brandmark,
.site-page .plate .lang a,
.site-page .plate .sample-links a {
  color: var(--on-field);
  text-decoration: none;
}
.site-page .plate .site-nav__link:hover,
.site-page .plate .lang a:hover,
.site-page .plate .brandmark:hover { color: var(--on-field); text-decoration: none; }
.site-page .plate .btn { text-decoration: none; }

.plate--drive  { --field: var(--e-drive-deep);  --on-field: #fff; --field-quiet: rgba(255,255,255,0.78); }
.plate--spark  { --field: var(--e-spark);       --on-field: var(--ink); --field-quiet: rgba(22,33,31,0.72); }
.plate--anchor { --field: var(--e-anchor-deep); --on-field: #fff; --field-quiet: rgba(255,255,255,0.78); }
.plate--focus  { --field: var(--e-focus-deep);  --on-field: #fff; --field-quiet: rgba(255,255,255,0.78); }
.plate--ink    { --field: var(--ink-deep);      --on-field: var(--paper); --field-quiet: rgba(247,246,242,0.7); }

/* --------------------------------------------------------------------------
   The rail

   Four hard stops, no blending. One of only three places the four energies
   appear together — the others are the wheel and the energy row.
   -------------------------------------------------------------------------- */

.rail {
  height: 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Without this, Gnist yellow sits on the spark plate and the rail looks like
     three colours and a gap. Invisible on the ink plate; the whole reason the
     device survives on the other four. */
  border-bottom: 2px solid var(--ink-deep);
}
.rail i { display: block; }
.rail i:nth-child(1) { background: var(--e-drive); }
.rail i:nth-child(2) { background: var(--e-spark); }
.rail i:nth-child(3) { background: var(--e-anchor); }
.rail i:nth-child(4) { background: var(--e-focus); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.site-head__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.site-page .brandmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
  flex: none;
}
.site-page .brandmark:hover { text-decoration: none; opacity: 0.8; }
.site-page .brandmark__icon { width: 26px; height: 26px; flex: none; }

/* The dotless "ı" takes its dot from ::after. On the sales site the dot is an
   ENERGY square rather than petrol — the one place the wordmark carries the
   brand's colour language. See tokens.css for the original reasoning. */
.site-page .wordmark {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: inherit;
}
.site-page .wordmark__i { font-style: normal; position: relative; }
.site-page .wordmark__i::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.62em;
  width: 0.17em;
  height: 0.17em;
  transform: translateX(-50%);
  background: var(--e-spark);
}
.site-page .wordmark__soft { opacity: 0.55; }

.site-nav {
  display: flex;
  gap: var(--sp-5);
  margin-left: auto;
  flex-wrap: wrap;
}
.site-nav__link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
}
.site-nav__link:hover { opacity: 1; color: inherit; text-decoration: none; }
.site-nav__link--current { opacity: 1; font-weight: 700; border-bottom-color: currentColor; }

/* The language switcher. Plain links, per page, no JS, no cookie.
   Per PAGE and not to the front page: a switcher that always lands on / breaks
   the hreflang relationship the moment somebody follows it. */
.lang { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); flex: none; }
.lang a { color: inherit; opacity: 0.62; text-decoration: none; }
.lang a:hover { opacity: 1; color: inherit; }
.lang a[aria-current] { opacity: 1; font-weight: 600; }

/* Mobile menu. <details>/<summary> is a real disclosure widget with native
   keyboard handling and correct aria-expanded, and it works with zero JS. The
   checkbox hack does not: it announces as a checkbox. */
.nav-toggle { display: none; margin-left: auto; position: relative; }
.nav-toggle__summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid currentColor;
  border-radius: var(--r-control);
}
.nav-toggle__summary::-webkit-details-marker { display: none; }
.nav-toggle__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  min-width: 15rem;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--mist);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  z-index: 20;
}
.nav-toggle__panel a { color: var(--ink); opacity: 1; text-decoration: none; }
.nav-toggle__panel a:hover { color: var(--e-focus); }

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

.site-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 var(--sp-6);
  border: 2px solid transparent;
  border-radius: var(--r-control);
  background: var(--ink-deep);
  color: var(--paper);
  font-family: var(--body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.site-page .btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.site-page .btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--mist-strong);
}
.site-page .btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.site-page .btn--sm { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.site-page .btn--block { width: 100%; }

/* On a saturated field the solid button inverts: the field's own text colour
   becomes the button face. On spark that means ink-on-yellow reversed to
   ink-face — never white on yellow, which is 1.46:1. */
.plate .btn {
  background: var(--on-field);
  color: var(--field);
  border-color: var(--on-field);
}
.plate .btn:hover { background: var(--on-field); color: var(--field); opacity: 0.88; }
.plate .btn--ghost {
  background: transparent;
  color: var(--on-field);
  border-color: var(--field-quiet);
}
.plate .btn--ghost:hover { background: transparent; color: var(--on-field); border-color: var(--on-field); }

.actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }

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

.hero { padding: var(--sp-8) 0; }
.hero--split .site-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  gap: var(--sp-7);
  align-items: center;
}
/* A grid item defaults to min-width: auto, and a percentage width on a REPLACED
   element (the wheel) still contributes its intrinsic viewBox width to
   min-content. So the track was sized to the SVG's 560px, the shell grew past
   the viewport, and every line of the headline beside it was cut off on a
   phone. minmax(0, 1fr) fixes the track; this fixes the item inside it. */
.hero--split .site-shell > *,
.split-figure > *,
.demo__grid > * { min-width: 0; }
.hero__title { font-size: var(--fs-hero); max-width: 17ch; margin: var(--sp-4) 0 var(--sp-5); }
.hero--page .hero__title { font-size: var(--fs-2xl); max-width: 20ch; }
.hero__lede { font-size: var(--fs-md); line-height: 1.55; max-width: 52ch; }
.hero .actions { margin-top: var(--sp-6); }
.hero--page { padding: var(--sp-7) 0 var(--sp-8); }

/* --------------------------------------------------------------------------
   Bands and section heads
   -------------------------------------------------------------------------- */

.band { padding: var(--sp-8) 0; }
.band--sunk { background: var(--paper-sunk); }
.band--tight { padding: var(--sp-7) 0; }
.band__head { max-width: var(--measure-lg); margin-bottom: var(--sp-6); }
.band__head h2 { font-size: var(--fs-xl); margin: var(--sp-4) 0 var(--sp-4); }
.band__head p { color: var(--ink-muted); font-size: var(--fs-md); }
.plate .band__head p { color: var(--field-quiet); }
.band__foot { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   Points grid — the six/four explainer blocks on every product page
   -------------------------------------------------------------------------- */

.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-6) var(--sp-5);
}
.points > div { display: flex; flex-direction: column; gap: var(--sp-2); }
.points h3 { font-size: var(--fs-lg); }
.points p:last-child { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.55; }
.plate .points p:last-child { color: var(--field-quiet); }

.energy-chip {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: var(--r-chip);
  margin-right: var(--sp-2);
  vertical-align: baseline;
}

/* The 4-up energy row. The second of three places all four colours meet. */
.energies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.energy {
  border-radius: var(--r-field);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 15rem;
}
.energy h3 { font-size: var(--fs-xl); }
.energy p { font-size: var(--fs-sm); line-height: 1.55; }
.energy .eyebrow { color: inherit; opacity: 0.72; }
.energy--drive  { background: var(--e-drive);       color: var(--on-drive); }
.energy--spark  { background: var(--e-spark);       color: var(--on-spark); }
.energy--anchor { background: var(--e-anchor-deep); color: var(--on-anchor); }
.energy--focus  { background: var(--e-focus);       color: var(--on-focus); }

/* --------------------------------------------------------------------------
   Product plates
   -------------------------------------------------------------------------- */

.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--sp-5); }
.app-card {
  background: var(--paper-raised);
  border: 1px solid var(--mist);
  border-radius: var(--r-field);
  display: flex;
  flex-direction: column;
}
.app-card__cap { height: 10px; }
.app-card--indikator { --cap: var(--e-focus); }
.app-card--pi { --cap: var(--e-spark); }
.app-card--trivsel { --cap: var(--e-anchor); }
.app-card__cap { background: var(--cap); }
.app-card__body {
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex-grow: 1;
}
.app-card h3 { font-size: var(--fs-xl); }
.app-card__tagline { color: var(--ink-muted); font-size: var(--fs-sm); }
.app-card ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.app-card li { display: flex; gap: var(--sp-3); }
.app-card li::before {
  content: '';
  flex: none;
  width: 3px;
  margin-top: 0.45em;
  height: 0.95em;
  background: var(--cap);
}
.app-card__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--sp-2); }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e-anchor-deep);
}
.status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--r-chip);
  background: var(--e-anchor);
}

/* --------------------------------------------------------------------------
   Comparison table

   Kept as a real <table> with a visually-hidden <caption> and scope attributes.
   Each product column is capped in its own energy, so the eye can find the
   column it wants without reading the header.
   -------------------------------------------------------------------------- */

.compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 62rem; }
.compare th, .compare td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--mist);
}
.compare thead th { border-bottom: none; padding-bottom: var(--sp-4); }
.compare thead th span { display: block; height: 6px; margin-bottom: var(--sp-4); }
.compare thead th:nth-child(2) span { background: var(--e-focus); }
.compare thead th:nth-child(3) span { background: var(--e-spark); }
.compare thead th:nth-child(4) span { background: var(--e-anchor); }
.compare thead h3 { font-size: var(--fs-lg); }
.compare tbody th {
  width: 11rem;
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.compare td { line-height: 1.5; }

.verdict {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.verdict--ja { background: var(--e-anchor-wash); color: var(--e-anchor-deep); }
.verdict--nej { background: var(--e-drive-wash); color: var(--e-drive-deep); }

/* --------------------------------------------------------------------------
   The honesty block

   It used to read as a warning banner: a clay left-rule on a clay wash. It is
   the most important block on the site and it should read as CONFIDENCE, not
   caution — so it is a full-bleed field with the four-colour rail on top, at
   the same visual weight as a selling point, because it is one.
   -------------------------------------------------------------------------- */

.honesty { padding: var(--sp-8) 0; }
.honesty h2 { font-size: var(--fs-2xl); margin: var(--sp-4) 0 var(--sp-6); }
.honesty__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--sp-6) var(--sp-7); }
.honesty__item { display: flex; flex-direction: column; gap: var(--sp-3); }
.honesty__item h3 { font-size: var(--fs-lg); }
.honesty__item p { font-size: var(--fs-sm); line-height: 1.62; color: var(--field-quiet); }
.honesty__tick { height: 4px; width: 3.5rem; }
.honesty__tick--drive { background: var(--e-drive); }
.honesty__tick--spark { background: var(--e-spark); }
.honesty__tick--anchor { background: var(--e-anchor); }
.honesty__tick--focus { background: var(--e-focus); }
.honesty__prose { max-width: 78ch; display: flex; flex-direction: column; gap: var(--sp-4); }
.honesty__prose p { font-size: var(--fs-sm); line-height: 1.62; color: var(--field-quiet); }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.steps { list-style: none; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: var(--sp-5); }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  max-width: 82ch;
}
.steps li::before {
  content: counter(step);
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1;
  color: var(--step-colour, var(--e-focus));
}
.steps--drive  { --step-colour: var(--e-drive); }
.steps--spark  { --step-colour: var(--e-spark-deep); }
.steps--anchor { --step-colour: var(--e-anchor-deep); }
.steps--focus  { --step-colour: var(--e-focus); }
.steps p { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-muted); }
.steps strong { color: var(--ink); font-weight: 600; }

.type-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.type-list li { display: flex; align-items: center; gap: var(--sp-4); border-bottom: 1px solid var(--mist); padding-bottom: var(--sp-3); }
.type-list strong { font-family: var(--display); font-size: var(--fs-lg); font-weight: 600; flex: none; min-width: 11rem; }
.type-list .faint { font-size: var(--fs-sm); }
.type-list .chips { display: flex; flex: none; }
.type-list .chips i { width: 15px; height: 15px; border-radius: var(--r-chip); display: block; }
.type-list .chips i + i { margin-left: -5px; }

.split-figure { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.stack-lg { display: flex; flex-direction: column; gap: var(--sp-6); }
.stack-lg h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--sp-5); }
.pricing-card {
  background: var(--paper-raised);
  border: 1px solid var(--mist);
  border-radius: var(--r-field);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.pricing-card h3 { font-size: var(--fs-lg); }
.pricing-card p { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.55; }
.pricing-card__tick { height: 4px; width: 2.75rem; background: var(--e-drive); }
.pricing-card__chips { display: flex; }
.pricing-card__chips i { width: 16px; height: 16px; border-radius: var(--r-chip); display: block; }
.pricing-card__chips i + i { margin-left: -5px; }
.pricing-card__chips i:nth-child(1) { background: var(--e-focus); }
.pricing-card__chips i:nth-child(2) { background: var(--e-spark); }
.pricing-card__chips i:nth-child(3) { background: var(--e-anchor); }

/* --------------------------------------------------------------------------
   Demo form
   -------------------------------------------------------------------------- */

.demo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: var(--sp-7); align-items: start; }
.demo__form {
  background: var(--paper-raised);
  color: var(--ink);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border-radius: var(--r-field);
}
.demo__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }

.site-page .field-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-page .label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.site-page .input,
.site-page .select,
.site-page .textarea {
  min-height: 50px;
  width: 100%;
  border: 2px solid var(--mist-strong);
  border-radius: var(--r-control);
  padding: 0 var(--sp-3);
  font-family: var(--body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper-raised);
}
.site-page .textarea { min-height: 7rem; padding: var(--sp-3); line-height: 1.5; resize: vertical; }
.site-page .input:focus, .site-page .select:focus, .site-page .textarea:focus { border-color: var(--e-focus); }

.site-page .flash {
  padding: var(--sp-4);
  border-left: 4px solid var(--e-focus);
  background: var(--e-focus-wash);
  color: var(--ink);
  font-size: var(--fs-sm);
}
.site-page .flash--error { border-left-color: var(--e-drive-deep); background: var(--e-drive-wash); }

.sample-links { display: flex; flex-direction: column; margin-top: var(--sp-6); }
.sample-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--field-quiet);
  color: var(--on-field);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
}
.sample-links a:hover { text-decoration: none; opacity: 0.72; color: var(--on-field); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-foot { background: var(--ink-deep); color: var(--paper); }
.site-foot__inner { padding: var(--sp-7) 0 var(--sp-6); }
.site-foot__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--sp-6) var(--sp-5); }
.site-foot h4 {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 var(--sp-4);
  opacity: 0.55;
}
.site-foot ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); }
.site-foot a { color: var(--paper); text-decoration: none; opacity: 0.82; }
.site-foot a:hover { color: var(--paper); opacity: 1; text-decoration: underline; }
.site-foot__tagline { font-size: var(--fs-sm); color: rgba(247, 246, 242, 0.6); max-width: 30ch; margin-top: var(--sp-4); }
.site-foot .lang { margin-top: var(--sp-5); }
.site-foot .lang a { opacity: 0.62; }
.site-foot .lang a[aria-current] { opacity: 1; }

/* --------------------------------------------------------------------------
   The instrument figures

   Deliberately stylised and never a real result: a marketing page showing a
   genuine profile would be a page showing somebody's personality data.
   -------------------------------------------------------------------------- */

.figure { display: flex; flex-direction: column; gap: var(--sp-3); }
.figure__cap { display: flex; justify-content: space-between; gap: var(--sp-4); }
.figure__cap p { margin: 0; }
.figure svg { width: 100%; height: auto; display: block; }
.figure__note { font-size: var(--fs-xs); color: var(--field-quiet); }

.figure--inverse {
  background: var(--ink-deep);
  color: var(--paper);
  padding: var(--sp-6);
  border-radius: var(--r-field);
  /* The wheel reads --field for its hole and its sector separators, so setting
     it here is what makes the drawing sit on ink rather than punch a hole
     through to the yellow underneath. */
  --field: var(--ink-deep);
}
.figure--inverse .figure__note { color: rgba(247, 246, 242, 0.6); }

.figure--card {
  background: var(--paper-raised);
  border: 1px solid var(--mist);
  border-radius: var(--r-field);
  padding: var(--sp-5);
}
.figure--card .figure__note { color: var(--ink-faint); }

.wheel { width: 100%; height: auto; display: block; max-width: 100%; }

.wheel__key { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); }
.wheel__key li { display: flex; align-items: center; gap: var(--sp-2); }
.wheel__chip { width: 12px; height: 12px; border-radius: var(--r-chip); display: block; }

.mark { width: 2rem; height: 2rem; flex: none; display: block; }

/* --------------------------------------------------------------------------
   Sample report chrome

   NOT the marketing vocabulary. These pages embed a product's own report
   markup and its own stylesheet, and this container contract is load-bearing:
   do not change the max-width or the padding, and never set --t-base here.
   -------------------------------------------------------------------------- */

.sample-banner { border-bottom: 1px solid var(--mist); background: var(--paper-sunk); padding: var(--space-4) 0; }
.sample-banner__inner { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.sample-banner__text { font-size: var(--t-sm); color: var(--ink-muted); }
.sample-banner__actions { display: flex; gap: var(--space-3); margin-left: auto; flex-wrap: wrap; }

.site--sample .sample-report {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}
.site--sample .sample-report .page-head { margin-top: 0; }

/* --------------------------------------------------------------------------
   Motion

   Opt-in rather than a kill switch: the first paint is the final frame, so a
   reader who prefers no motion never has an invisible element rescued by an
   !important override. The reduce block below is the belt to that braces —
   marketing pages no longer load indikator.css, which used to carry it.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .wheel--hero .wheel__sector {
    transform-box: view-box;
    transform-origin: 50% 50%;
    opacity: 0;
    transform: scale(0.86) rotate(-6deg);
    animation: wheel-in 700ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  .wheel--hero .wheel__core { opacity: 0; animation: wheel-in 500ms var(--ease) 620ms both; }
  .wheel--hero .wheel__mark { opacity: 0; animation: wheel-in 400ms var(--ease) 820ms both; }
}

@keyframes wheel-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .site-page *, .site-page *::before, .site-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 62rem) {
  .site-page { --gutter: var(--sp-4); }
  .hero--split .site-shell,
  .demo__grid,
  .split-figure { grid-template-columns: minmax(0, 1fr); }
  .energies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-nav,
  .site-head .lang,
  .site-head__inner > .btn { display: none; }
  .nav-toggle { display: block; }
}

@media (max-width: 40rem) {
  .site-page { --fs-hero: clamp(2.125rem, 9vw, 2.75rem); }
  .hero { padding: var(--sp-7) 0; }
  .band { padding: var(--sp-7) 0; }
  .energies { grid-template-columns: minmax(0, 1fr); }
  .demo__row { grid-template-columns: minmax(0, 1fr); }
  .site-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .type-list li { flex-wrap: wrap; }
  .type-list strong { min-width: 0; }
  .steps li { grid-template-columns: 2.25rem minmax(0, 1fr); }
}