/* =============================================================================
   avras.io: the AVRAS marketing site (multi-page)
   =============================================================================
   Seven static pages (/, /how-it-works/, /reports/, /dashboard/, /about/,
   /contact/, /404.html) share this one stylesheet. No build step on the
   server; Caddy serves the files as they are.

   CSP. This origin sends `script-src 'none'`, `style-src 'self'
   https://fonts.googleapis.com`, `img-src 'self' data:` and
   `form-action 'none'`. So every style lives in this file: no style=""
   attributes, no <style> blocks, nothing that needs script, no forms. The
   phone menu is a native <details> element. Bump the ?v= query on every page
   when this file changes.

   The system ("institutional"):
   - Colour. Brand Indigo #2F2274 carries the page headers and the one dark
     band per page; Purple #7E49C9 is the primary button fill only (links use
     purple-dark). Brand green, blue, yellow and magenta are fills, never text.
     Ink #1A1A2E is the darkest colour; running text is ink-700. Three
     backgrounds: white, the light neutral band, and indigo.
   - Type. Inter for text, Inter Tight 650 with tight tracking for display.
     Six sizes: display 40-60 | h2 30-40 | 21 (h3, lede) | 18 body | 16 small
     | 13 (sample-data captions and the Sample stamp only).
   - Space. Multiples of 8px. A 12-column grid in a 1248px container with
     24px gutters (16px page gutter on phones). 4px corners.
   - Pictures. Photographs are stock (4px corners). Real AVRAS frames sit in
     a dark tablet bezel. Drawn samples are one white document with an
     indigo top rule, always marked Sample.
   - Accessibility (design/DESIGN_SYSTEM.md): 4.5:1 text, 3:1 UI, 2px focus
     outline, 44px targets, 13px floor, reflow to 320px with no sideways
     scroll, no fixed-height text boxes, motion only on hover/focus and none
     under prefers-reduced-motion.
   ============================================================================= */

:root {
  --indigo: #2F2274;
  --indigo-deep: #241A5C;
  --purple: #7E49C9;
  --purple-dark: #5B33A0;
  --purple-50: #F5F0FC;
  --purple-100: #E8DCF7;
  --green: #88BA66;
  --green-text: #4E7A33;
  --blue: #4D8BE3;
  --yellow: #E9CA58;

  --ink: #1A1A2E;
  --ink-700: #35354A;
  --ink-600: #4A4A5E;
  --line: #CFCFD9;
  --line-soft: #E4E4EA;
  --band: #F3F2F7;
  --white: #FFFFFF;

  --on-dark: #FFFFFF;
  --on-dark-muted: #D3CEEF;
  --on-dark-line: #5A4E9E;

  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);
  --fs-lg: 1.3125rem;
  --fs-body: 1.125rem;
  --fs-sm: 1rem;
  --fs-xs: 0.8125rem;

  --radius: 4px;
  --gutter: 24px;
  --section: 104px;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: 24px;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; }
table { border-collapse: collapse; }

:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--white); }

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

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--white);
  padding: 12px 16px; border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: 1248px; margin-inline: auto; padding-inline: var(--gutter); }

/* Spacing helpers (8px steps). */
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }

/* ---------- Type ---------- */

.display, .h2, .h3 { font-family: var(--font-display); color: inherit; }
.display { font-size: var(--fs-display); font-weight: 650; line-height: 1.04; letter-spacing: -0.03em; }
.h2 { font-size: var(--fs-h2); font-weight: 650; line-height: 1.1; letter-spacing: -0.024em; }
.h3 { font-size: var(--fs-lg); font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; }

.display, .h2, .h3, .next__title, .audience__title { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

.lede, .statement { font-size: var(--fs-lg); line-height: 1.5; color: var(--ink-700); }
.body { color: var(--ink-700); }

.on-dark { color: var(--on-dark); }
.on-dark .lede, .on-dark .body { color: var(--on-dark-muted); }

/* A small label above a section title. */
.eyebrow { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-dark); }
.on-dark .eyebrow { color: var(--on-dark-muted); }

.text-link { color: var(--purple-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }

/* An underlined link with an arrow that hands off to another page. */
.more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--purple-dark); font-weight: 600; text-decoration: none;
}
.more span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.more:hover span { text-decoration-thickness: 2px; }
.more svg { flex: none; transition: transform 160ms ease; }
.more:hover svg, .more:focus-visible svg { transform: translateX(3px); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
  text-decoration: none; text-align: center;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn--lg { min-height: 52px; padding: 14px 28px; font-size: var(--fs-body); }
.btn--primary { background: var(--purple); color: var(--white); }
.btn--primary:hover { background: var(--purple-dark); }
.btn--light { background: var(--white); color: var(--indigo); }
.btn--light:hover { background: var(--purple-100); }
.btn--outline-light { border-color: var(--on-dark-muted); color: var(--white); }
.btn--outline-light:hover { background: var(--indigo-deep); border-color: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Header and phone menu ---------- */

.site-header { position: relative; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line-soft); }
.bar { display: flex; align-items: center; gap: 40px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.brand__logo { width: 112px; height: auto; }
.site-header .brand__logo { width: 158px; }

.nav { display: flex; align-self: stretch; gap: 4px; }
.nav__link {
  display: flex; align-items: center; padding: 8px 12px 0;
  border-block: 3px solid transparent;
  color: var(--ink-700); font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--indigo); }

.bar__actions { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.signin { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-700); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.signin:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* The <details> menu: its summary sits in the header row; its panel drops
   over the page from the bottom of the header. */
.menu { display: none; }
.menu__button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; list-style: none;
}
.menu__button::-webkit-details-marker { display: none; }
.menu__close { display: none; }
.menu[open] .menu__open { display: none; }
.menu[open] .menu__close { display: block; }
.menu[open] .menu__button { border-color: var(--ink); }
.menu__panel {
  position: absolute; top: 100%; left: 0; right: 0;
  padding: 8px var(--gutter) 24px;
  background: var(--white);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 32px rgba(26, 26, 46, 0.12);
}
.menu__link {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink); font-weight: 500; text-decoration: none;
}
.menu__link[aria-current="page"] { font-weight: 700; color: var(--indigo); box-shadow: inset 3px 0 0 var(--indigo); padding-left: 16px; }
.menu__panel .btn { width: 100%; margin-top: 24px; }
/* The header keeps its own "Request a demo" button from 375px up, so the panel only needs one below that. */
@media (min-width: 375px) { .menu__panel .btn { display: none; } }

@media (max-width: 1023px) {
  .nav, .signin { display: none; }
  .menu { display: block; }
  .bar { gap: 12px; }
  .bar__actions { gap: 12px; }
}
@media (max-width: 479px) {
  .bar, .bar__actions { gap: 8px; }
  .brand__logo { width: 88px; }
  .site-header .brand__logo { width: 112px; }
  .bar__actions .btn { padding-inline: 12px; white-space: nowrap; }
  .menu__button { gap: 6px; padding-inline: 10px; }
}
/* Below 375px the header keeps only the logo and Menu; the menu panel has the demo button. */
@media (max-width: 374px) {
  .bar__actions .btn { display: none; }
}

/* ---------- Sections and the 12-column grid ---------- */

.section { padding-block: var(--section); }
.section--band { background: var(--band); }
.section--dark { background: var(--indigo); }
.section--tight { padding-block: 64px; }
.section--end { padding-block: 80px; border-top: 1px solid var(--line-soft); }
.section--band + .section--end, .section--dark + .section--end { border-top: 0; }
.section__title { max-width: 22em; margin-bottom: 48px; }
.section__head { max-width: 40em; margin-bottom: 48px; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.grid > * { grid-column: 1 / -1; min-width: 0; }
.grid--center { align-items: center; }

@media (min-width: 1024px) {
  .c-1-4 { grid-column: 1 / 5; }
  .c-1-5 { grid-column: 1 / 6; }
  .c-1-6 { grid-column: 1 / 7; }
  .c-1-7 { grid-column: 1 / 8; }
  .c-1-8 { grid-column: 1 / 9; }
  .c-1-9 { grid-column: 1 / 10; }
  .c-5-13 { grid-column: 5 / 13; }
  .c-6-13 { grid-column: 6 / 13; }
  .c-7-13 { grid-column: 7 / 13; }
  .c-8-13 { grid-column: 8 / 13; }
  .c-9-13 { grid-column: 9 / 13; }
}

/* Text first in the DOM (and on phones); picture on the left from 1024 up. */
@media (min-width: 1024px) {
  .split > .split__text, .split > .split__media { grid-row: 1; }
}

/* ---------- Pictures ---------- */

.photo { border-radius: var(--radius); overflow: hidden; }
.photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* A real frame of the AVRAS virtual office, in a dark tablet bezel. */
.device { background: var(--ink); border-radius: 14px; padding: 10px; }
.device__img { width: 100%; border-radius: 4px; }
.device--on-dark { background: #17113F; box-shadow: 0 0 0 1px var(--on-dark-line); }
.device--screen { box-shadow: 0 16px 40px rgba(26, 26, 46, 0.16); }
.device { position: relative; }
.device__stamp {
  position: absolute; top: 20px; right: 20px;
  padding: 2px 8px; background: var(--white); border: 1px solid var(--purple-dark); border-radius: 2px;
  color: var(--purple-dark); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
}

/* ---------- Home: hero ---------- */

.hero { position: relative; overflow: hidden; background: var(--indigo); }
.hero__text { padding-block: 112px 128px; }
.hero .display { max-width: 11ch; }
.hero .lede { margin-top: 24px; max-width: 30em; }
.hero .actions { margin-top: 40px; }
.hero__media { position: relative; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 40%; }
.hero__device { position: absolute; width: 44%; max-width: 360px; box-shadow: 0 24px 48px rgba(12, 8, 40, 0.35); }
@media (min-width: 1024px) {
  .hero__media { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; }
  .hero__text { padding-right: 48px; }
  .hero__device { left: -48px; bottom: 56px; }
}
@media (max-width: 1023px) {
  .hero__text { padding-block: 56px 56px; }
  .hero__img { aspect-ratio: 3 / 2; }
  .hero__device { left: var(--gutter); bottom: 16px; width: 46%; padding: 6px; border-radius: 10px; }
}
/* On phones the photograph does the work on its own; the frames follow in the next section. */
@media (max-width: 599px) {
  .hero .device { display: none; }
  .hero__img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
}

.trustbar { background: var(--indigo-deep); font-size: var(--fs-sm); }
.trustbar__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 32px; padding-block: 4px; color: var(--on-dark-muted); }
.trustbar p { padding-block: 10px; }
.trustbar a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; color: var(--white); text-underline-offset: 3px; }
@media (max-width: 1199px) { .trustbar__inner { justify-content: flex-start; } }

/* ---------- Inner-page header ---------- */

.page-head { position: relative; overflow: hidden; background: var(--indigo); }
.page-head__text { padding-block: 40px 88px; }
.page-head__text--solo { padding-top: 88px; }
.page-head .display { max-width: 15ch; }
.page-head .lede { margin-top: 24px; max-width: 32em; }
.page-head__media { position: relative; }
.page-head__img { width: 100%; height: 100%; object-fit: cover; }
.page-head__img--group { object-position: 80% 40%; }
/* Between 1024 and 1279 the photo column is too narrow for both faces; keep the headset wearer. */
@media (min-width: 1024px) and (max-width: 1279px) { .page-head__img--group { object-position: 50% 40%; } }
@media (min-width: 1280px) and (max-width: 1439px) { .page-head__img--group { object-position: 68% 40%; } }
.page-head__img--student { object-position: 62% 35%; }
.page-head__img--woman { object-position: 60% 35%; }
.page-head__note { margin-top: 16px; color: var(--on-dark-muted); }
.page-head__note a { color: var(--white); text-underline-offset: 3px; }
.page-head--plain .display { max-width: 18ch; }
.page-head__note a { overflow-wrap: anywhere; }

@media (min-width: 1024px) {
  .page-head__text { padding-right: 32px; }
  .page-head__media { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; }
  /* Reports: the sample report sits in the band and overlaps the next section. */
  .page-head--doc { overflow: visible; z-index: 1; }
  .page-head--doc .grid { align-items: start; }
  .page-head--doc .page-head__text { align-self: center; }
  .page-head__doc { padding-top: 40px; margin-bottom: -120px; }
  .section--after-doc { padding-top: calc(var(--section) + 64px); }
  .page-head--doc.on-dark .specimen__caption { color: var(--ink-600); }
}
@media (max-width: 1023px) {
  .page-head__text { padding-block: 32px 56px; }
  .page-head__text--solo { padding-top: 56px; }
  .page-head__img { aspect-ratio: 16 / 9; }
  .page-head__doc { padding-bottom: 56px; }
  .page-head--doc .page-head__text { padding-bottom: 0; }
}

/* Header photographs dissolve into the indigo band: a mask fades the edge that meets the text
   (left beside it, top once it stacks below) over the section's indigo. Eased stops that rise
   quickly, so there is no visible line and the people near the edge stay clear. --fade is how
   far into the photo the fade reaches. The iPad frame on the home hero is not masked. */
.hero__img, .page-head__img {
  --fade: 20%;
  --fade-stops: transparent 0%, rgb(0 0 0 / 0.2) calc(var(--fade) * 0.2), rgb(0 0 0 / 0.5) calc(var(--fade) * 0.4), rgb(0 0 0 / 0.78) calc(var(--fade) * 0.6), rgb(0 0 0 / 0.95) calc(var(--fade) * 0.8), #000 var(--fade);
  -webkit-mask-image: linear-gradient(to bottom, var(--fade-stops));
  mask-image: linear-gradient(to bottom, var(--fade-stops));
}
@media (min-width: 1024px) {
  .hero__img, .page-head__img {
    --fade: 28%;
    -webkit-mask-image: linear-gradient(to right, var(--fade-stops));
    mask-image: linear-gradient(to right, var(--fade-stops));
  }
}

.crumbs { margin-bottom: 48px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm); color: var(--on-dark-muted); }
.crumbs li { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.crumbs li + li::before { content: "/"; color: var(--on-dark-muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); text-underline-offset: 3px; }
@media (max-width: 1023px) { .crumbs { margin-bottom: 24px; } }

/* How it works: jump list of the five steps, inside the header. */
.jump { margin-top: 40px; max-width: 640px; }
.jump ol { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--on-dark-line); }
.jump li { border-bottom: 1px solid var(--on-dark-line); }
.jump a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding-block: 8px; color: var(--white); font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; text-decoration: none; }
.jump a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jump__num { flex: none; width: 16px; color: var(--on-dark-muted); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Home: audience ---------- */

.audience { padding-block: 56px; border-bottom: 1px solid var(--line-soft); }
.audience__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; max-width: 15em; }
.audience__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.audience__item { border-top: 1px solid var(--line); padding-top: 16px; font-weight: 600; line-height: 1.4; }
@media (max-width: 1023px) { .audience__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) {
  .audience__list { grid-template-columns: 1fr; gap: 0; }
  .audience__item { border-top: 1px solid var(--line); padding-block: 14px; }
}

/* ---------- Home: the session in brief ---------- */

.frames { position: relative; padding-bottom: 72px; }
.frames__main { width: 88%; }
.frames__inset { position: absolute; right: 0; bottom: 0; width: 50%; box-shadow: 0 16px 40px rgba(26, 26, 46, 0.22); }
@media (max-width: 479px) {
  .frames { padding-bottom: 48px; }
  .device { padding: 6px; border-radius: 10px; }
}

/* ---------- Ruled rows, spec sheets and point grids ---------- */

.ruled { border-top: 1px solid var(--line); }
.ruled__row { padding-block: 24px; border-bottom: 1px solid var(--line); }
.ruled__row .body { margin-top: 8px; }
/* A short line under a row title (how it works: our approach). */
.ruled__row .tagline { margin-top: 4px; font-weight: 600; color: var(--purple-dark); text-wrap: balance; }
.on-dark .ruled__row .tagline { color: #C9B6F2; } /* lavender, 7:1 on indigo, set apart from the white title */

/* How it works, our approach: the closing line signs off the band, and at desktop width the iPad
   stays beside the principles as they scroll past instead of floating in the middle of the column.
   It holds one picture per principle, stacked; each later one fades in as its row's top crosses the
   middle of the window, and fades back out on the way up. A browser without scroll-driven animations
   (or with reduced motion, whose rule below stops every animation) keeps the first picture. Below
   1024px the iPad is not beside the list, so each row shows its own picture instead. */
.approach-band__closing { font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; text-wrap: balance; }
@media (min-width: 1024px) {
  .approach-band__aside { align-self: start; position: sticky; top: 48px; }
  .approach-band__inline { display: none; }
}
@media (max-width: 1023px) { .approach-band__aside { display: none; } }
.approach-shots { position: relative; }
.approach-shots__next { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; }
@supports (timeline-scope: none) and (animation-timeline: view()) {
  .approach-band { timeline-scope: --approach-2, --approach-3, --approach-4; }
  .approach-band .ruled__row:nth-child(2) { view-timeline-name: --approach-2; }
  .approach-band .ruled__row:nth-child(3) { view-timeline-name: --approach-3; }
  .approach-band .ruled__row:nth-child(4) { view-timeline-name: --approach-4; }
  /* The shorthand resets the timeline and range, so they come after it. */
  .approach-shots__next { animation: approach-shot linear both; animation-range: cover 45vh cover 55vh; }
  .approach-shots__next:nth-child(2) { animation-timeline: --approach-2; }
  .approach-shots__next:nth-child(3) { animation-timeline: --approach-3; }
  .approach-shots__next:nth-child(4) { animation-timeline: --approach-4; }
}
@keyframes approach-shot { from { opacity: 0; } to { opacity: 1; } }
.ruled--dark { border-top-color: var(--on-dark-line); }
.ruled--dark .ruled__row { border-bottom-color: var(--on-dark-line); }

.spec { border-top: 1px solid var(--line); }
.spec__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.spec__title { font-weight: 600; line-height: 1.45; }
.spec__text { color: var(--ink-700); line-height: 1.5; }
@media (max-width: 479px) { .spec__row { grid-template-columns: 1fr; row-gap: 4px; } }

.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.points__item { border-top: 1px solid var(--line); padding-top: 24px; }
.points__item .body { margin-top: 8px; }
.points--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.points--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
@media (max-width: 1023px) { .points--four, .points--three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
@media (max-width: 639px) { .points, .points--four, .points--three { grid-template-columns: 1fr; gap: 32px; } }

/* A single centred statement (dashboard: your data stays yours). */
.statement-block { max-width: 720px; margin-inline: auto; text-align: center; }

/* ---------- The sample report (one drawn document) ---------- */

.specimen { position: relative; }
.doc {
  position: relative;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-top: 4px solid var(--indigo); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(26, 26, 46, 0.06), 0 16px 40px rgba(26, 26, 46, 0.08);
  font-size: var(--fs-sm); line-height: 1.5;
}
.doc--participant { border-top-color: var(--purple); }
.doc__say { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.specimen-narrow { max-width: 480px; }
@media (min-width: 1024px) { .specimen-narrow { margin-inline: auto; } }
.doc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line-soft); }
.doc__title { font-size: var(--fs-body); font-weight: 700; line-height: 1.35; }
.doc__muted { color: var(--ink-600); }
.doc__stamp { flex: none; padding: 2px 8px; border: 1px solid var(--purple-dark); border-radius: 2px; color: var(--purple-dark); font-size: var(--fs-xs); font-weight: 600; }
.doc__block { padding: 20px 24px; border-bottom: 1px solid var(--line-soft); }
.doc__block--last { border-bottom: 0; }
.doc__label { display: block; margin-bottom: 8px; color: var(--ink-600); font-weight: 600; text-align: left; caption-side: top; }
.doc__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.doc__name { font-weight: 600; color: var(--ink); }
.doc__score { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.doc__band { margin-left: 4px; font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; color: var(--green-text); }
.doc__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.doc__facts dt { color: var(--ink-600); }
.doc__facts dd { font-weight: 600; }
.doc__text { margin-top: 12px; color: var(--ink-700); }
.doc__table { width: 100%; }
.doc__table th, .doc__table td { padding-block: 10px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.doc__table thead th { border-top: 0; padding-top: 0; color: var(--ink-600); font-weight: 600; }
.doc__table tbody th { font-weight: 500; padding-right: 16px; }
.doc__table td, .doc__table thead th:last-child { text-align: right; white-space: nowrap; }
.doc__table caption + thead + tbody tr:first-child > *, .doc__table caption + thead.sr-only + tbody tr:first-child > *, .doc__table caption + tbody tr:first-child > * { border-top: 0; }
.fit { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.fit::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--green); }
.fit--good::before { background: transparent; box-shadow: inset 0 0 0 2px var(--green-text); }
.doc__na { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--ink-600); }
.doc__na::before { content: ""; flex: none; width: 40px; height: 12px; border: 1px solid var(--line); border-radius: 2px; background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 6px); }
/* A short list inside a sample (strengths, interests), one item per line with a small dot. */
.doc__list li { position: relative; padding-left: 16px; font-weight: 600; }
.doc__list li + li { margin-top: 4px; }
.doc__list li::before { content: ""; position: absolute; left: 0; top: calc(0.75em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--ink-600); }
/* A band on its own line beside a capability name, with no number before it. */
.doc__cap > .doc__band { margin-left: 0; }
.specimen__caption { margin-top: 16px; font-size: var(--fs-xs); color: var(--ink-600); }
.on-dark .specimen__caption { color: var(--on-dark-muted); }
.on-dark .doc { box-shadow: 0 24px 48px rgba(12, 8, 40, 0.35); }
@media (max-width: 479px) {
  .doc__head, .doc__block { padding-inline: 16px; }
}
@media (max-width: 359px) {
  .doc__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Home: the reports trio ---------- */

/* Education sample | what the reports deliver | workforce sample, in three
   equal columns from 1280 up (4 + 4 + 4 of the grid). Narrower than that a
   column is too tight for a sample, so from 640 to 1279 the two samples share
   a row and the list runs under them, its heading in the left 4 columns and
   the five items in the right 8. On phones it is one column in DOM order, each
   sample capped so it stays a document. From 640 up each sample is a subgrid
   of two rows, the document and its caption, so both documents end on one line
   and the captions line up; the shorter one shows blank page at its foot. From
   1280 the caption row is 1fr, so a taller list grows that row and leaves the
   documents at their own height. */
.trio { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
@media (max-width: 639px) { .trio .specimen { max-width: 480px; } }
@media (min-width: 640px) {
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "edu work" "edu work" "list list"; gap: 0 24px; }
  .trio__edu { grid-area: edu; }
  .trio__work { grid-area: work; }
  .trio__list { grid-area: list; }
  .trio__edu, .trio__work, .trio .specimen { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; }
  .trio .specimen { grid-row: 1 / -1; }
}
@media (min-width: 640px) and (max-width: 1279px) {
  .trio__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; margin-top: 48px; }
  .trio__list > .h3 { grid-column: 1 / 5; }
  .trio__list > .deliver { grid-column: 5 / 13; margin-top: 0; }
}
@media (min-width: 1280px) {
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; grid-template-areas: "edu list work" "edu list work"; }
}
/* One sentence of the section heading. It wraps inside only when it cannot fit
   a line on its own, so a line break falls between sentences. */
.phrase { display: inline-block; }

.deliver { display: grid; gap: 24px; margin-top: 24px; }
.deliver__item { position: relative; padding-left: 24px; }
.deliver__item::before { content: ""; position: absolute; left: 0; top: calc(0.7em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); }
.deliver__title { font-weight: 600; line-height: 1.4; }
.deliver__text { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-700); }

/* ---------- Home: who each report serves ---------- */

/* The one indigo band after the hero. Three columns on the 12-column grid
   (4 + 4 + 4, the same columns as the trio above). Each audience is led by a
   filled accent square, hung in the margin like the deliverables' dot so the
   title, subtitle and text share one edge; a hollow square would read as a
   checkbox. From 640 to 1023 each audience is a full-width row, the title and
   subtitle in the left 5 columns and the text in the right 7, so no audience
   sits alone on a row. The closing statement sits under a rule, one sentence
   to a line, a step smaller below 360 so its first line holds two words. */
.serves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.serves__item { position: relative; padding-left: 24px; }
.serves__title::before { content: ""; position: absolute; left: 0; top: calc(0.65em - 6px); width: 12px; height: 12px; border-radius: 2px; background: var(--green); }
.serves__item--blue .serves__title::before { background: var(--blue); }
.serves__item--yellow .serves__title::before { background: var(--yellow); }
.serves__sub { margin-top: 8px; font-weight: 600; line-height: 1.45; }
.serves__item .body { margin-top: 8px; }
.serves__close {
  margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--on-dark-line);
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 650; line-height: 1.15; letter-spacing: -0.024em;
}
.serves__close span { display: block; }
@media (min-width: 640px) and (max-width: 1023px) {
  .serves { grid-template-columns: minmax(0, 1fr); }
  .serves__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 24px; }
  .serves__item .body { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 639px) {
  .serves { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .serves__close { margin-top: 48px; padding-top: 40px; }
}
@media (max-width: 359px) { .serves__close { font-size: 1.625rem; } }

/* ---------- Home: company in brief ---------- */

.founders-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.founders-mini li { display: flex; align-items: flex-start; gap: 16px; }
.founders-mini img { flex: none; width: 72px; height: 72px; border-radius: var(--radius); object-fit: cover; }
.founders-mini__name { font-weight: 600; line-height: 1.4; }
.founders-mini__role { margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-600); }
@media (max-width: 639px) { .founders-mini { grid-template-columns: 1fr; } }

.panel { padding: 32px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--indigo); border-radius: var(--radius); }
.panel__title { font-weight: 700; line-height: 1.4; }
.panel__rule { margin-block: 24px; border: 0; border-top: 1px solid var(--line-soft); }
.play {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 8px;
  color: var(--purple-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.play svg { flex: none; }
@media (max-width: 479px) { .panel { padding: 24px; } }

/* ---------- Home: closing call to action with a photograph ---------- */

.cta-photo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--purple-50); border-top: 1px solid var(--purple-100); }
.cta-photo__img img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; object-position: 62% 45%; }
.cta-photo__body { align-self: center; max-width: 640px; padding: 96px 64px; }
.cta-photo__mail { margin-top: 24px; color: var(--ink-700); }
.cta-photo__mail a { overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .cta-photo { grid-template-columns: minmax(0, 1fr); }
  .cta-photo__img img { min-height: 0; aspect-ratio: 3 / 2; object-position: 50% 45%; }
  .cta-photo__body { padding: 56px var(--gutter) 72px; }
}

/* ---------- How it works: the five steps ---------- */

.steps { border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px;
  align-items: center; padding-block: 48px; border-bottom: 1px solid var(--line);
  scroll-margin-top: 16px;
}
.step__num { display: block; margin-bottom: 12px; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 650; line-height: 1; letter-spacing: -0.02em; color: var(--indigo); font-variant-numeric: tabular-nums; }
.step__body { grid-column: 1 / 7; max-width: 30em; }
.step__body .body { margin-top: 12px; }
.step__media { grid-column: 8 / 13; }
@media (max-width: 1023px) {
  .step { grid-template-columns: minmax(0, 1fr); padding-block: 40px; }
  .step__body, .step__media { grid-column: 1 / -1; }
  /* The 960px frames go soft when stretched wider than this. */
  .step__media { max-width: 560px; }
  .section--dark .device { max-width: 560px; }
}

/* iPad or headset. */
.devices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 639px) { .devices { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Page end: Next card + demo card ---------- */

.next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.next__card, .next__demo { display: flex; flex-direction: column; align-items: flex-start; padding: 48px; border-radius: var(--radius); border-top: 4px solid; }
.next__card { border: 1px solid var(--line); border-top: 4px solid var(--ink); color: var(--ink); text-decoration: none; transition: border-color 160ms ease; }
.next__card:hover { border-color: var(--indigo); }
.next__kicker { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-600); }
.next__title { display: block; margin-top: 8px; }
.next__text { display: block; margin-top: 16px; color: var(--ink-700); max-width: 30em; }
.next__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; min-height: 44px; color: var(--purple-dark); font-weight: 600; }
.next__go span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.next__card:hover .next__go span { text-decoration-thickness: 2px; }
.next__go svg { flex: none; transition: transform 160ms ease; }
.next__card:hover .next__go svg, .next__card:focus-visible .next__go svg { transform: translateX(3px); }
.next__demo { background: var(--indigo); border-top-color: var(--indigo-deep); }
.next__demo .next__kicker, .next__demo .next__text { color: var(--on-dark-muted); }
.next__demo .actions { margin-top: 24px; }
@media (max-width: 767px) {
  .next { grid-template-columns: 1fr; }
  .next__card, .next__demo { padding: 32px 24px; }
}

/* ---------- Reports: comparison table ---------- */

.compare { width: 100%; border-top: 2px solid var(--ink); }
.compare th, .compare td { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; }
.compare tbody th { width: 24%; font-weight: 600; }
.compare tbody td { color: var(--ink-700); }
@media (max-width: 767px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding-block: 16px 20px; border-bottom: 1px solid var(--line); }
  .compare tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 8px; border: 0; }
  .compare tbody td { padding: 0; border: 0; }
  .compare td::before { content: attr(data-col); content: attr(data-col) / ""; display: block; margin-bottom: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-600); }
}
@media (max-width: 419px) {
  .compare tr { grid-template-columns: 1fr; row-gap: 12px; }
}

/* ---------- Dashboard: the tour and the demo ---------- */

/* The header holds only text; the one large screen rises into its lower edge. */
.page-head--tour .display { max-width: 18ch; }
.page-head--tour .lede { max-width: 36em; }
.page-head--tour .page-head__text { padding-bottom: 200px; }
.tour { padding-top: 0; }
.tour__figure { position: relative; margin-top: -136px; }

/* Three quiet marks over the screenshot. Their boxes are percentages of the 1440x864
   frame (marketing-dashboard-1440.webp): move them if the screenshot is replaced. */
.tour__screen { position: relative; }
.tour__mark { position: absolute; border: 2px solid var(--purple); border-radius: 6px; box-shadow: 0 0 0 4px rgba(126, 73, 201, 0.16); }
.tour__mark--setup { left: 18.4%; top: 18.5%; width: 25.8%; height: 15.4%; }
.tour__mark--guide { left: 67.1%; top: 75.5%; width: 31.2%; height: 7.1%; }
.tour__mark--review { left: 45.4%; top: 18.5%; width: 25.8%; height: 15.4%; }
.tour__pin, .tour__num {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--indigo); color: var(--white);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.tour__pin { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--white), 0 4px 12px rgba(26, 26, 46, 0.2); }

.tour__steps { margin-top: 56px; }
.tour__label { display: flex; align-items: center; gap: 12px; color: var(--purple-dark); font-weight: 600; }

/* The demo video, with its poster frame standing in under reduced motion. */
.demo__video { display: block; height: auto; aspect-ratio: 5 / 3; background: var(--ink); }
.demo__still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .demo__video { display: none; }
  .demo__still { display: block; }
}

@media (max-width: 1023px) {
  .page-head--tour .page-head__text { padding-bottom: 120px; }
  .tour__figure { margin-top: -80px; }
  .tour__steps { margin-top: 40px; }
}
@media (max-width: 639px) {
  .tour__mark { border-width: 1.5px; border-radius: 3px; box-shadow: none; }
  .tour__pin { width: 26px; height: 26px; box-shadow: 0 0 0 2px var(--white); }
  .tour__figure .device__stamp { top: 12px; right: 12px; }
}

/* ---------- About: founders ---------- */

.people { border-top: 1px solid var(--line); }
.person { display: grid; grid-template-columns: 168px minmax(0, 1fr); column-gap: 32px; align-items: start; padding-block: 32px; border-bottom: 1px solid var(--line); }
.person__photo { width: 168px; height: 168px; border-radius: var(--radius); object-fit: cover; background: var(--white); }
.person__role { margin-top: 4px; color: var(--ink-600); font-weight: 500; }
.person .body { max-width: 34em; }
@media (max-width: 639px) {
  .person { grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; }
  .person__photo { width: 96px; height: 96px; }
}
@media (max-width: 479px) {
  .person { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .person__photo { width: 120px; height: 120px; }
}

/* ---------- Contact ---------- */

.reach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.reach__item { border-top: 1px solid var(--line); padding-top: 24px; }
.reach__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--purple-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 1023px) { .reach { grid-template-columns: 1fr; } }

.faq-col { max-width: 760px; margin-inline: auto; }
.faq { border-top: 1px solid var(--line); }
.faq__item { padding-block: 24px; border-bottom: 1px solid var(--line); }
.faq__item .body { margin-top: 8px; }

/* Contact: closing request. */
.section--end.section--close { padding-top: 0; border-top: 0; }
.close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; max-width: 760px; margin-inline: auto; padding: 40px 48px; background: var(--purple-50); border: 1px solid var(--purple-100); border-radius: var(--radius); }
.close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.close__mail { color: var(--ink-700); }
.close__mail a { overflow-wrap: anywhere; }
@media (max-width: 639px) { .close { padding: 32px 24px; } .close__actions { width: 100%; } }

/* ---------- 404 ---------- */

.sitelist { border-top: 1px solid var(--line); }
.sitelist a {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) 24px; column-gap: 24px; align-items: center;
  min-height: 64px; padding-block: 16px; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.sitelist__name { font-weight: 600; }
.sitelist__desc { color: var(--ink-700); }
.sitelist svg { color: var(--purple-dark); transition: transform 160ms ease; }
.sitelist a:hover .sitelist__name { text-decoration: underline; text-underline-offset: 3px; }
.sitelist a:hover svg { transform: translateX(3px); }
@media (max-width: 639px) {
  .sitelist a { grid-template-columns: minmax(0, 1fr) 24px; }
  .sitelist__name { grid-column: 1; }
  .sitelist__desc { grid-column: 1; grid-row: 2; font-size: var(--fs-sm); }
  .sitelist svg { grid-column: 2; grid-row: 1 / 3; }
}

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

.site-footer { padding-block: 64px 40px; background: var(--band); border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.section--band + .site-footer { border-top-color: var(--line); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 32px; }
.footer__about { margin-top: 16px; max-width: 30em; color: var(--ink-700); }
.footer__heading { margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.footer__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-700); text-decoration: none; }
.footer__link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__base {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 48px; align-items: end;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--ink-600);
}
.footer__notes p + p { margin-top: 8px; }
@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__base { grid-template-columns: 1fr; }
}
@media (max-width: 479px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Small screens and motion ---------- */

@media (max-width: 639px) {
  :root { --gutter: 16px; --section: 64px; }
  .section--end { padding-block: 56px; }
  .btn--lg { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}