/* Generated by @litly/marketing from @litly/shared. Do not edit. */

/* Light only, because the app is: App.tsx sets Mantine's
   forceColorScheme="light". A site that followed the system preference would
   be a dark page handing off to a light product, which reads as two companies
   rather than as one considerate one. color-scheme is stated so the browser
   paints form controls and scrollbars to match rather than guessing. */
:root {
  color-scheme: light;
  --ink-0: #f5f5f0;
  --ink-1: #e5e5de;
  --ink-2: #d4d4cc;
  --ink-3: #a3a39a;
  --ink-4: #73736b;
  --ink-5: #52524b;
  --ink-6: #40403a;
  --ink-7: #262622;
  --ink-8: #171714;
  --ink-9: #000000;
  --page: #ffffff;
  --font: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 34rem;
  --wide: 52rem;
  /* Only ever used inside the illustration of the editor, where a hue is
     naming whose mark it is. See brand.ts. */
  --ai: #5a34d4;
}

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

html {
  /* Reserve it always, so moving between a short page and a long one does not
     shift the text sideways under the reader. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink-8);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  margin: 0 auto;
  max-width: var(--wide);
  padding: 0 1.25rem;
}

/* ------------------------------------------------------------------ chrome */

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 2;
  background: var(--page);
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--ink-9);
}

header {
  border-bottom: 1px solid var(--ink-2);
}

.nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  /* Centred rather than on a baseline: the wordmark is an image and has no
     baseline to share with the words beside it. */
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* The real wordmark, the same file the app's sidebar loads. A site that sets
   its own name in a font is a site that will drift from the product's
   lockup the first time either changes. */
.wordmark {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}

.wordmark img {
  height: 38px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}

.nav-actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.nav-row [aria-current='page'] {
  font-weight: 600;
  color: var(--ink-9);
}

/* Quiet, because it is a way back in rather than an invitation. */
.signin {
  white-space: nowrap;
}

/* Solid ink: the strongest emphasis this palette offers without borrowing a
   hue, and the only emphasised thing in the navigation. */
.cta {
  background: var(--ink-9);
  color: #ffffff;
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.cta:hover {
  background: var(--ink-7);
}

@media (max-width: 34rem) {
  /* The button survives; the section links wrap under the wordmark. Losing
     the way in and the way to ask is worse than losing a row of height. */
  .nav-links {
    order: 3;
    width: 100%;
    gap: 1rem;
    font-size: 0.9375rem;
  }
}

footer {
  margin-top: 5rem;
  border-top: 1px solid var(--ink-2);
  padding: 2rem 0 4rem;
  font-size: 0.9375rem;
}

.quiet {
  color: var(--ink-5);
}

/* -------------------------------------------------------------------- text */

main {
  padding-top: 2.5rem;
}

h1,
h2,
h3 {
  color: var(--ink-9);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: var(--measure);
}

h1 {
  font-size: 2.25rem;
  margin: 0 0 1.5rem;
}

h2 {
  font-size: 1.375rem;
  margin: 3rem 0 0.75rem;
}

h3 {
  font-size: 1.0625rem;
  margin: 2rem 0 0.5rem;
}

p,
ul,
ol {
  max-width: var(--measure);
}

/* The lead paragraph, when a page opens with one. */
h1 + p {
  font-size: 1.1875rem;
  color: var(--ink-6);
}

.dateline {
  margin: 0 0 2rem;
  color: var(--ink-5);
  font-size: 0.9375rem;
}

/* A link is the sentence it sits in, not a fourth voice. Underlined at rest
   rather than on hover: in a palette this hueless, distinguishing a link by
   colour alone is distinguishing it by a shade of grey, which is WCAG 1.4.1
   with extra steps. Same reasoning as the app's Anchor default. */
:where(a) {
  color: inherit;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--ink-9);
  outline-offset: 2px;
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--ink-1);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--ink-2);
  color: var(--ink-6);
  max-width: var(--measure);
}

hr {
  border: 0;
  border-top: 1px solid var(--ink-2);
  margin: 3rem 0;
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
}

table {
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 100%;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: 1px solid var(--ink-2);
}

th {
  color: var(--ink-9);
  white-space: nowrap;
}

/* --------------------------------------------------------- anchors and toc */

/* Every heading is a link to itself. The mark only appears on hover or focus,
   so the page reads as prose and still hands over a permalink — which is the
   entire reason the FAQ exists in this shape. */
.anchor {
  text-decoration: none;
  margin-left: 0.4rem;
  color: var(--ink-3);
  opacity: 0;
}

h2:hover .anchor,
h3:hover .anchor,
.anchor:focus {
  opacity: 1;
}

.toc {
  margin: 0 0 3rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ink-2);
  border-radius: 6px;
  max-width: var(--measure);
}

.toc h2 {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-5);
}

.toc ol {
  margin: 0;
  padding-left: 1.25rem;
}

.toc ol ol {
  padding-left: 1rem;
  margin: 0.25rem 0 0.75rem;
}

.toc li {
  margin: 0.25rem 0;
}

/* ------------------------------------------------------------------- index */

/* The list of pages on the trust hub: a title and one line saying what is in
   it, so nobody opens four pages to find the one they wanted. */
.cards {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  max-width: var(--measure);
}

.cards li {
  padding: 1rem 0;
  border-top: 1px solid var(--ink-2);
}

.cards a {
  font-weight: 600;
  color: var(--ink-9);
}

.cards p {
  margin: 0.25rem 0 0;
  color: var(--ink-5);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------- mockups */

/*
 * Illustrations of the product, not screenshots — mockups.ts argues why.
 * Prose is drawn as bars, so there is no student writing on this site even in
 * invented form, and nothing here to go stale the way a screenshot does.
 */
.mk {
  margin: 2.5rem 0 3rem;
  max-width: var(--wide);
}

.mk-frame {
  border: 1px solid var(--ink-2);
  border-radius: 8px;
  overflow: hidden;
  background: var(--page);
}

.mk-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--ink-2);
  background: var(--ink-0);
}

.mk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-2);
}

.mk-tab {
  margin-left: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-6);
}

.mk-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  gap: 1.25rem;
  padding: 1.25rem;
}

.mk-body--single {
  grid-template-columns: minmax(0, 1fr);
}

.mk-doc {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Bars, not words. The point of the illustration is the shape of the surface,
   and inventing a child's paragraph to fill it would be putting student
   writing on a marketing page for no gain. */
.mk-line {
  display: block;
  height: 7px;
  border-radius: 3.5px;
  background: var(--ink-1);
}

.mk-h {
  display: block;
  height: 12px;
  width: 46%;
  border-radius: 4px;
  background: var(--ink-3);
  margin-bottom: 0.35rem;
}

/* The passage the coach has marked. The one hue on the site, doing the job it
   does in the product: saying whose mark this is. */
.mk-line--marked {
  background: color-mix(in srgb, var(--ai) 16%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ai) 45%, transparent);
}

.mk-margin {
  min-width: 0;
}

.mk-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--ai) 30%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ai) 6%, transparent);
}

.mk-who {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ai);
}

.mk-counts {
  display: flex;
  gap: 1.75rem;
  margin-bottom: 1.1rem;
}

.mk-count {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  color: var(--ink-5);
}

.mk-count b {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink-9);
  line-height: 1.1;
}

.mk-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.mk-rows li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--ink-1);
}

.mk-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-1);
  flex: none;
}

/* States told apart by weight rather than by colour, which is what the
   product does and the reason its palette is grey. */
.mk-pill {
  margin-left: auto;
  font-size: 0.6875rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--ink-2);
  color: var(--ink-5);
  white-space: nowrap;
}

.mk-pill--strong {
  border-color: var(--ink-9);
  color: var(--ink-9);
  font-weight: 600;
}

.mk figcaption {
  margin-top: 0.75rem;
  max-width: var(--measure);
  color: var(--ink-5);
  font-size: 0.9375rem;
}

@media (max-width: 40rem) {
  /* The margin note stacks under the draft, which is what the product does at
     the same width. */
  .mk-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------- front page */

/*
 * The one page here that is laid out rather than written. home.ts is the
 * markup and pages.ts explains why it is not a markdown file; everything
 * below is ink and measure, the same two things the prose pages use, arranged
 * so a band can run the full width of the window while its contents keep a
 * readable line length.
 */
main.home {
  padding-top: 0;
}

/* Wider than the prose measure, because a row of four sits here. The trust
   pages keep 52rem: a records schedule read at 64rem is a worse document.

   The navigation and footer live outside the main element and so have to be
   widened with it, or the chrome sits inset from every band it frames. */
main.home .wrap,
body.home header .wrap,
body.home footer .wrap {
  max-width: 64rem;
}

.band {
  padding: 4.5rem 0 0;
}

.hero {
  padding: 5rem 0 0;
}

.hero h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin: 0 0 1.25rem;
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* The sentence under a heading. Wider than the prose measure and lighter than
   body text, so the eye takes the heading and this as one unit. */
.lead {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-6);
  max-width: 44rem;
  margin: 0 0 1.5rem;
}

.statement {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 22ch;
  margin: 0 0 1rem;
}

main.home h2 {
  margin-top: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  max-width: none;
  margin: 0;
}

/* The same solid ink as the navigation's, one size up. There is one call to
   action on this site and this is it in both places. */
.actions .cta {
  padding: 0.8rem 1.5rem;
  font-size: 1.0625rem;
}

.grid {
  display: grid;
  gap: 2.5rem 3rem;
  margin-top: 2rem;
}

.grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A single rule above the row, rather than a box around each cell. Four
   bordered cards would be four things; four columns under one line is one. */
.rule {
  border-top: 1px solid var(--ink-8);
  padding-top: 1.5rem;
  margin-top: 3rem;
}

.feature h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  max-width: none;
}

.feature p {
  margin: 0;
  color: var(--ink-5);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: none;
}

/* In the two-column grids the cells carry more than a line, so each gets its
   own rule and a little more room to breathe. */
.grid--two .feature {
  border-top: 1px solid var(--ink-2);
  padding-top: 1.25rem;
}

.grid--two .feature h3 {
  font-size: 1.1875rem;
}

.grid--two .feature p {
  font-size: 1rem;
  line-height: 1.6;
}

/* Prose beside a picture of the product. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

.split--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
}

.split-text h2 {
  margin: 0 0 1rem;
}

.split-text p {
  color: var(--ink-6);
  margin: 0 0 1rem;
}

.split-figure .mk {
  margin: 0;
}

/* Ink inverted, once, for the section a board reads. It is the strongest
   emphasis this palette offers and the page spends it here rather than on a
   hue, which would be claiming to be one of the product's voices. */
.board {
  background: var(--ink-8);
  color: var(--ink-1);
  margin-top: 5rem;
  padding: 4.5rem 0 5rem;
}

.board h2,
.board .eyebrow {
  color: var(--page);
}

.board .eyebrow {
  color: var(--ink-3);
}

.board .lead {
  color: var(--ink-2);
}

.board .feature {
  border-top-color: var(--ink-5);
}

.board .feature h3 {
  color: var(--page);
}

.board .feature p {
  color: var(--ink-3);
}

/* Links inside the inverted band. Underlined like every other link here; only
   the colour has to change, because inherit would resolve to the body's ink. */
.board a {
  color: var(--page);
}

/* Three states, one row each. The state column is fixed so the eye can run
   down it without reading the sentences beside it. */
.roadmap {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  max-width: none;
}

.roadmap li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 13rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.125rem 0;
  border-top: 1px solid var(--ink-2);
}

.roadmap li:last-child {
  border-bottom: 1px solid var(--ink-2);
}

.roadmap .state {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-5);
}

/* In progress is the only state that is going somewhere, so it is the only one
   in full ink. The other two are facts, not news. */
.roadmap li:nth-child(1) .state,
.roadmap li:nth-child(2) .state {
  color: var(--ink-8);
}

.roadmap .what {
  font-weight: 600;
  color: var(--ink-9);
}

.roadmap .detail {
  color: var(--ink-5);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.closing {
  border-top: 1px solid var(--ink-8);
  margin-top: 5rem;
  padding-top: 3rem;
}

@media (max-width: 60rem) {
  .grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The illustration goes under the prose it illustrates, in both directions,
     so the reading order stays text-then-picture on a narrow screen. */
  .split,
  .split--reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .split--reverse .split-figure {
    order: 2;
  }
}

@media (max-width: 40rem) {
  .grid--four,
  .grid--two {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  /* The state stops being a column and becomes a label above the row: three
     columns inside 20rem is three words a line. */
  .roadmap li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }
}