/*
 * minspor.no in Spor's own design system (packages/ui/theme/spor-paper.css): warm paper, ink,
 * the teacher's red pen, the yellow marker, the AI's pencil and the green trail. The page is a
 * route: one drawn trail runs down it, and every section is a stop. Light only, like the paper.
 * Atkinson Hyperlegible Next (SIL OFL, fonter/OFL.txt) is served from this site; nothing is
 * fetched from anywhere else.
 */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonter/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonter/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #faf9f6;
  --card: #ffffff;
  --rule: #d5e1ec;
  --ink: #22397f;
  --ink-deep: #182a5e;
  --text: #1d2125;
  --text-subtle: #4f5754;
  --pen: #c4122f;
  --marker: #f6d43c;
  --pencil: #4f5754;
  --trail: #2b6e63;
  --trail-soft: #e3f1ee;
  --margin: #e7a1ad;
  --shadow-card: 0 1px 0 rgb(0 0 0 / 5%), 0 18px 30px -20px rgb(20 30 60 / 55%);
  --shadow-sheet: 0 2px 0 rgb(0 0 0 / 4%), 0 30px 60px -30px rgb(20 30 60 / 50%);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
html {
  background: var(--paper);
}
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip {
  position: absolute;
  left: -999rem;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 1rem;
  background: var(--card);
  z-index: 3;
}
.wrap {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
h1,
h2,
h3 {
  color: var(--text);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  margin: 0 0 1rem;
}
h3 {
  font-size: 1.3rem;
  font-weight: 750;
  margin: 0 0 0.4rem;
}
p {
  margin: 0 0 1rem;
}
.lede {
  font-size: 1.25rem;
  color: var(--text-subtle);
  max-width: 40rem;
}
.center {
  text-align: center;
}
.center .lede {
  margin-inline: auto;
}

/* The marker: a highlighter stroke behind words, as in the app's "this is in the material". */
mark {
  color: inherit;
  background: linear-gradient(
    100deg,
    transparent 0.2em,
    color-mix(in srgb, var(--marker) 80%, transparent) 0.3em,
    color-mix(in srgb, var(--marker) 70%, transparent) 96%,
    transparent
  );
  background-size: 100% 0.55em;
  background-position: 0 88%;
  background-repeat: no-repeat;
  padding: 0 0.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The pencil: the AI's voice, and the hand-written notes on this page. */
.pencil {
  display: inline-block;
  color: var(--pencil);
  border: 1.5px dashed var(--pencil);
  border-radius: 0.6rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--card);
}

/* Bar: a sheet's top edge, not a coloured band. */
.bar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.bar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
}
.wordmark {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
  text-decoration: none;
}
.wordmark svg,
.mark-svg {
  width: 1.6rem;
  height: 1.8rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}
.bar nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bar nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.bar nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.bar nav .pill {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: #ffffff;
}
.bar nav .pill:hover {
  color: #ffffff;
  background: var(--ink-deep);
}

/* Buttons */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.button {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--ink);
}
.button.ink {
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 10px 20px -12px rgb(34 57 127 / 80%);
}
.button.ink:hover {
  background: var(--ink-deep);
}
.button.line {
  color: var(--ink);
  background: var(--card);
}

/* ---- Hero: a sheet of dotted paper with the product taped to it ---- */
.hero {
  position: relative;
  padding-block: 3.5rem 5rem;
  background-image: radial-gradient(var(--rule) 1.6px, transparent 1.9px);
  background-size: 22px 22px;
  background-position: center top;
  overflow: hidden;
}
.hero::after {
  /* The dots fade into plain paper below. */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 8rem;
  background: linear-gradient(transparent, var(--paper));
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  z-index: 1;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0.75rem 0 1.25rem;
  max-width: 16ch;
}
.hero .note {
  color: var(--text-subtle);
  font-size: 1rem;
  margin-top: 1.25rem;
}
.stage {
  position: relative;
  margin-top: 3rem;
}
@media (min-width: 64rem) {
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 3rem;
    align-items: center;
  }
  .hero .wrap > :not(.stage) {
    grid-column: 1;
  }
  .stage {
    grid-column: 2;
    grid-row: 1 / span 6;
    margin: 0;
  }
}

/* A screenshot as a sheet on the desk: white edge, soft shadow, two strips of tape. */
.sheet {
  position: relative;
  background: var(--card);
  padding: 0.6rem;
  border-radius: 0.35rem;
  box-shadow: var(--shadow-sheet);
}
.sheet img {
  border-radius: 0.2rem;
  border: 1px solid var(--rule);
}
.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  width: 6.5rem;
  height: 1.6rem;
  background: color-mix(in srgb, var(--marker) 45%, rgb(255 255 255 / 60%));
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}
.sheet::before {
  top: -0.7rem;
  left: 1.5rem;
  transform: rotate(-4deg);
}
.sheet::after {
  top: -0.6rem;
  right: 1.5rem;
  transform: rotate(5deg);
}
.stage .sheet {
  transform: rotate(-1.2deg);
}
.phone {
  border: 0.5rem solid #1d2125;
  border-radius: 1.9rem;
  overflow: hidden;
  background: #1d2125;
  box-shadow: var(--shadow-sheet);
}
.stage .phone {
  position: absolute;
  right: -0.5rem;
  bottom: -2.5rem;
  width: min(13.5rem, 30%);
  transform: rotate(3deg);
}

/* Notes in pencil around the product, with drawn arrows. */
.aside-note {
  position: absolute;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  max-width: 15rem;
  font-size: 0.95rem;
  line-height: 1.3;
  font-weight: 650;
  color: var(--text);
  background: var(--card);
  border-radius: 0.8rem;
  padding: 0.6rem 0.85rem;
  box-shadow: var(--shadow-card);
}
.aside-note small {
  display: block;
  font-weight: 500;
  color: var(--text-subtle);
}
.aside-note .badge {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.35rem;
  border-radius: 0.6rem;
  font-weight: 800;
  font-size: 0.9rem;
}
.badge.trail {
  background: var(--trail-soft);
  color: var(--trail);
}
.badge.pencil {
  color: var(--pencil);
  border: 1.5px dashed var(--pencil);
  background: var(--card);
}
.badge.marker {
  background: color-mix(in srgb, var(--marker) 55%, white);
  color: #4a3a00;
}
.aside-note.one {
  left: -2.5rem;
  top: 58%;
  transform: rotate(-2deg);
}
.aside-note.two {
  left: 22%;
  bottom: -3.5rem;
  transform: rotate(1.5deg);
}
.aside-note.three {
  left: 34%;
  top: -2.6rem;
  transform: rotate(-1deg);
}
.stamp {
  position: absolute;
  right: 22%;
  top: 18%;
  display: grid;
  place-items: center;
  width: 6.5rem;
  height: 6.5rem;
  border: 3px solid var(--pen);
  border-radius: 50%;
  color: var(--pen);
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: rotate(-12deg);
  background: rgb(255 255 255 / 70%);
}
@media (max-width: 64rem) {
  .aside-note,
  .stamp {
    display: none;
  }
}
@media (max-width: 40rem) {
  .stage .phone {
    display: none;
  }
}

/* ---- The route: one trail down the page, each section a stop ---- */
.route {
  position: relative;
}
@media (min-width: 64rem) {
  .route::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(1rem, calc(50% - 37rem - 2.5rem));
    width: 3px;
    background: repeating-linear-gradient(var(--trail) 0 14px, transparent 14px 24px);
    opacity: 0.5;
  }
}
.stop {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--trail);
  margin: 0 0 0.9rem;
}
.stop b {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--trail);
  color: #ffffff;
  font-size: 0.95rem;
  box-shadow:
    0 0 0 5px var(--paper),
    0 0 0 7px color-mix(in srgb, var(--trail) 35%, transparent);
}
section.block {
  padding-block: 5.5rem;
}

/* Trust strip, as a line of ticks in the teacher's ink. */
.strip {
  border-block: 1px solid var(--rule);
  background: var(--card);
}
.strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2.2rem;
  margin: 0;
  padding: 1.1rem 0;
  list-style: none;
  font-weight: 650;
}
.strip li::before {
  content: "✓";
  color: var(--trail);
  font-weight: 800;
  margin-right: 0.45rem;
}

/* Index cards, as the flashcards in the app: ruled, a red margin line on top. */
.index-card {
  position: relative;
  background-color: var(--card);
  background-image: repeating-linear-gradient(
    transparent 0 calc(1.9rem - 1px),
    color-mix(in srgb, var(--ink) 14%, transparent) calc(1.9rem - 1px) 1.9rem
  );
  background-position: 0 3.6rem;
  border-top: 4px solid var(--margin);
  border-radius: 3px;
  padding: 1.25rem 1.4rem 1.6rem;
  box-shadow: var(--shadow-card);
  line-height: 1.9rem;
}
.index-card h3 {
  line-height: 1.25;
  margin-bottom: 0.6rem;
}
.index-card p {
  margin: 0;
  color: var(--text-subtle);
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.75rem 1.5rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.cards > li:nth-child(3n + 1) {
  transform: rotate(-0.8deg);
}
.cards > li:nth-child(3n + 2) {
  transform: rotate(0.6deg);
}
.cards > li:nth-child(3n) {
  transform: rotate(-0.3deg);
}
@media (prefers-reduced-motion: no-preference) {
  .cards > li,
  .sheet,
  .prices > li {
    transition: transform 0.25s ease;
  }
  .cards > li:hover,
  .prices > li:hover {
    transform: rotate(0deg) translateY(-6px);
  }
}
.step-no {
  position: absolute;
  top: -1.1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.1rem;
}

/* Numbers written with the marker. */
.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.numbers b {
  display: inline-block;
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.numbers span {
  display: block;
  margin-top: 0.4rem;
  color: var(--text-subtle);
}

/* The route map: five stations joined by the trail. */
.map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}
.map::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 1.6rem;
  height: 4px;
  border-radius: 4px;
  background: var(--trail);
}
.map li {
  position: relative;
  text-align: center;
}
.map .station {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: var(--card);
  border: 4px solid var(--trail);
  color: var(--trail);
}
.map .station svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map h3 {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}
.map p {
  margin: 0;
  color: var(--text-subtle);
  font-size: 1rem;
}
@media (max-width: 48rem) {
  .map {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .map::before {
    left: 1.7rem;
    right: auto;
    top: 1rem;
    bottom: 1rem;
    width: 4px;
    height: auto;
  }
  .map li {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    column-gap: 1rem;
    text-align: start;
    align-items: center;
  }
  .map .station {
    margin: 0;
    grid-row: span 2;
  }
}
.subjects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.subjects li {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--rule);
  font-weight: 600;
}

/* Feature rows: words beside a taped sheet, with a pencil note. */
.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-block: 3rem;
}
@media (min-width: 60rem) {
  .feature {
    grid-template-columns: 5fr 7fr;
    gap: 4.5rem;
  }
  .feature.flip > :first-child {
    order: 2;
  }
  .feature .sheet {
    transform: rotate(0.8deg);
  }
  .feature.flip .sheet {
    transform: rotate(-0.8deg);
  }
}
.feature p {
  color: var(--text-subtle);
}
.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}
.ticks li {
  padding-left: 1.9rem;
  position: relative;
}
.ticks li::before {
  /* The teacher's tick, in red pen. */
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.45em;
  width: 0.9rem;
  height: 0.5rem;
  border-left: 3px solid var(--pen);
  border-bottom: 3px solid var(--pen);
  transform: rotate(-45deg);
}
.sheet-wrap {
  position: relative;
}
.sheet-wrap .pencil {
  position: absolute;
  right: 1rem;
  bottom: -1.1rem;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-card);
}

/* Pupils: the trail's green field. */
.pupils {
  background: var(--trail-soft);
  border-block: 1px solid color-mix(in srgb, var(--trail) 20%, transparent);
}
.phones {
  display: flex;
  gap: 1.75rem;
  justify-content: center;
}
.phones .phone {
  width: min(14rem, 45%);
}
.phones .phone:first-child {
  transform: rotate(-3deg) translateY(1rem);
}
.phones .phone:last-child {
  transform: rotate(3deg);
}

/* Owners: the folder of documents, as index cards on the desk. */
.owners .index-card h3 {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.owners .index-card svg {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: var(--trail);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.folder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.folder li {
  padding: 0.35rem 0.85rem;
  border-radius: 0.4rem;
  background: var(--card);
  border: 1px solid var(--rule);
  font-weight: 600;
  font-size: 0.98rem;
}
.folder li::before {
  content: "▤ ";
  color: var(--ink);
}

/* Price cards, and the guarantee as a red-pen stamp. */
.prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  margin: 3rem 0 1.75rem;
  padding: 0;
  list-style: none;
}
.prices .index-card {
  text-align: start;
}
.prices .level {
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.prices .now {
  font-size: 3rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0.4rem 0 0;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.prices .now small {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-subtle);
  letter-spacing: 0;
}
.prices .later {
  margin: 0.4rem 0 0;
}
.guarantee {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 54rem;
  margin: 3rem auto 0;
  padding: 2rem 2.25rem;
  text-align: start;
  background: var(--card);
  border-radius: 0.6rem;
  box-shadow: var(--shadow-card);
}
.guarantee .seal {
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  border: 4px double var(--pen);
  border-radius: 50%;
  color: var(--pen);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  transform: rotate(-10deg);
}
.guarantee .seal b {
  display: block;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
}
.guarantee h3 {
  font-size: 1.5rem;
}
.guarantee p {
  margin: 0;
  color: var(--text-subtle);
}
.included {
  color: var(--text-subtle);
  max-width: 46rem;
  margin-inline: auto;
}

/* Questions on ruled lines. */
.faq {
  max-width: 50rem;
  margin: 2.5rem auto 0;
  border-top: 1px solid var(--rule);
}
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0.25rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.15rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  color: var(--ink);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: "−";
}
.faq details p {
  margin: 0.75rem 0 0;
  color: var(--text-subtle);
}

/* The end of the trail. */
.finish {
  position: relative;
  margin-block: 2rem 5rem;
  padding: 3.5rem 2rem;
  border-radius: 1.5rem;
  background: var(--ink);
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}
.finish h2 {
  color: #ffffff;
}
.finish p {
  color: #dfe5f5;
  max-width: 36rem;
  margin: 0 auto 1.75rem;
}
.finish a.mail {
  color: #ffffff;
  font-weight: 700;
}
.finish .actions {
  justify-content: center;
}
.finish .button {
  background: var(--marker);
  border-color: var(--marker);
  color: #1d2125;
}
.finish .trail-art {
  position: absolute;
  inset: auto -4rem -6rem auto;
  width: 28rem;
  opacity: 0.22;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.4;
  stroke-linecap: round;
  pointer-events: none;
}

footer {
  border-top: 1px solid var(--rule);
  padding-block: 2rem 3rem;
  color: var(--text-subtle);
  font-size: 1rem;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Plain pages: one ruled sheet. */
.page {
  max-width: 46rem;
  margin: 3rem auto 4rem;
}
.page .index-card {
  line-height: 1.6;
  background-image: none;
  padding: 2.25rem 2.25rem 2.5rem;
}
.page h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin-top: 0;
}
.page h2 {
  font-size: 1.4rem;
  margin-top: 2rem;
}
.page p {
  color: var(--text);
}

[id] {
  scroll-margin-top: 5.5rem;
}
@media (max-width: 40rem) {
  .bar {
    position: static;
  }
  .guarantee {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (forced-colors: active) {
  .button,
  .bar nav .pill {
    border: 2px solid ButtonText;
  }
  .hero {
    background-image: none;
  }
}

/* ---- More content: question kinds, a week, access, integrity, sources, the road ---- */

/* Eleven question kinds as small labelled tiles. */
.types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  text-align: start;
  counter-reset: kind;
}
.types li {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 0.8rem;
  padding: 1.1rem 1.2rem 1.1rem 3.6rem;
  counter-increment: kind;
}
.types li::before {
  content: counter(kind);
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9rem;
}
.types h3 {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}
.types p {
  margin: 0;
  color: var(--text-subtle);
  font-size: 1rem;
}

/* A week as a row of days, joined by the trail. */
.week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.week::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1.15rem;
  border-top: 3px dashed color-mix(in srgb, var(--trail) 60%, transparent);
}
.week li {
  position: relative;
  background: var(--card);
  border-radius: 0.8rem;
  padding: 3.2rem 1.1rem 1.25rem;
  box-shadow: var(--shadow-card);
}
.week .day {
  position: absolute;
  top: 0;
  left: 1rem;
  margin: 0;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: var(--trail);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
}
.week h3 {
  font-size: 1.15rem;
}
.week p {
  margin: 0;
  color: var(--text-subtle);
  font-size: 1rem;
}
@media (max-width: 60rem) {
  .week {
    grid-template-columns: 1fr;
  }
  .week::before {
    left: 1.5rem;
    right: auto;
    top: 0;
    bottom: 0;
    border-top: 0;
    border-left: 3px dashed color-mix(in srgb, var(--trail) 60%, transparent);
  }
}

.langs {
  margin-top: 3.5rem;
}
.langs .subjects {
  margin-top: 1rem;
}

/* What Spor does beside what it never does. */
.versus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.versus .index-card {
  line-height: 1.6;
  background-image: none;
}
.versus .index-card.never {
  border-top-color: var(--pen);
}
.crosses {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}
.crosses li {
  position: relative;
  padding-left: 1.9rem;
}
.crosses li::before,
.crosses li::after {
  /* A red-pen cross: two strokes, no text. */
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.75em;
  width: 1rem;
  border-top: 3px solid var(--pen);
  transform: rotate(45deg);
}
.crosses li::after {
  transform: rotate(-45deg);
}

/* Open sources, as labels on a shelf. */
.sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  text-align: start;
}
.sources li {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--ink);
  border-radius: 0.5rem;
  padding: 1rem 1.2rem;
}
.sources h3 {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}
.sources p {
  margin: 0;
  color: var(--text-subtle);
  font-size: 1rem;
}

/* The road to August 2027: stops on the trail, the last one the goal. */
.road {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.road::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 0.9rem;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--trail), var(--ink));
}
.road li {
  position: relative;
  padding-top: 2.6rem;
}
.road li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--card);
  border: 4px solid var(--trail);
}
.road li:last-child::before {
  background: var(--marker);
  border-color: var(--ink);
}
.road .when {
  margin: 0;
  font-weight: 700;
  color: var(--trail);
}
.road h3 {
  margin: 0.2rem 0 0.3rem;
}
.road p {
  color: var(--text-subtle);
  font-size: 1rem;
}
@media (max-width: 48rem) {
  .road {
    grid-template-columns: 1fr;
  }
  .road::before {
    left: 0.9rem;
    right: auto;
    top: 0;
    bottom: 0;
    width: 4px;
    height: auto;
  }
  .road li {
    padding: 0 0 0 3rem;
  }
}

/* ======== Many pages: the frame, and a second layer of life ======== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The menu as divider tabs in a binder: the page you are on is the tab pulled forward. */
.bar .wrap {
  gap: 0.5rem 1rem;
}
.bar nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.bar .tabs {
  gap: 0.25rem;
}
.bar .tabs a {
  display: block;
  padding: 0.45rem 0.9rem;
  border-radius: 0.6rem 0.6rem 0 0;
  border-bottom: 3px solid transparent;
  color: var(--text);
}
.bar .tabs a:hover {
  background: var(--card);
  text-decoration: none;
  border-bottom-color: var(--rule);
}
.bar .tabs a[aria-current="page"] {
  background: var(--card);
  color: var(--ink);
  border-bottom-color: var(--marker);
}
.bar-end {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.bar-end .lang {
  font-weight: 600;
  color: var(--text-subtle);
}
.bar-end .pill {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}
.bar-end .pill:hover {
  background: var(--ink-deep);
}
@media (max-width: 64rem) {
  .bar nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }
  .bar .tabs {
    flex-wrap: nowrap;
  }
  .bar .tabs a {
    white-space: nowrap;
  }
}

/* The marker strokes across the words once, as a teacher would. */
@media (prefers-reduced-motion: no-preference) {
  h1 mark,
  h2 mark {
    background-size: 0 0.55em;
    animation: marker 0.9s 0.35s cubic-bezier(0.3, 0.7, 0.2, 1) forwards;
  }
  @keyframes marker {
    to {
      background-size: 100% 0.55em;
    }
  }
}

/* The trail draws itself across the top of every page. */
.draw {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1rem;
  width: 100%;
  height: 38%;
  fill: none;
  stroke: var(--trail);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.45;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .draw path {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    animation: draw 2.4s 0.2s ease-out forwards;
  }
  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }
}

/* A subpage opens on dotted paper, with the crumbs as the first stop on the trail. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: 4rem 6rem;
  background-image: radial-gradient(var(--rule) 1.6px, transparent 1.9px);
  background-size: 22px 22px;
  border-bottom: 1px solid var(--rule);
}
.page-hero .wrap {
  position: relative;
  z-index: 1;
}
.page-hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  max-width: 20ch;
  margin: 1rem 0 1.25rem;
}
.page-hero .lede {
  font-size: 1.3rem;
  max-width: 44rem;
}
.crumbs {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  margin: 0;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--rule);
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--trail);
}
.crumbs a {
  color: var(--text-subtle);
}

/* Things settle onto the desk as they scroll into view. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cards > li,
    .types li,
    .week li,
    .sources li,
    .road li,
    .flow li,
    .sheet-wrap,
    .receipt,
    .numbers li,
    .map li {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    @keyframes settle {
      /* Movement only: text never fades, so its contrast holds at every moment. */
      from {
        translate: 0 2.5rem;
        scale: 0.96;
      }
    }
  }
}

/* A page of the material, with the marked sentence the answer came from. */
.paper-demo {
  position: relative;
  padding: 1rem 1rem 2.5rem;
}
.page-sheet {
  position: relative;
  background-color: var(--card);
  background-image: linear-gradient(
    90deg,
    transparent 2.6rem,
    var(--margin) 2.6rem 2.7rem,
    transparent 2.7rem
  );
  padding: 2rem 2rem 2rem 3.6rem;
  border-radius: 0.3rem;
  box-shadow: var(--shadow-sheet);
  transform: rotate(-1.5deg);
}
.page-sheet .page-no {
  position: absolute;
  top: 0.8rem;
  right: 1.2rem;
  margin: 0;
  font-weight: 700;
  color: var(--text-subtle);
  font-size: 0.9rem;
}
.page-sheet .line {
  height: 0.7rem;
  margin: 0 0 1rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.page-sheet .line.short {
  width: 60%;
}
.page-sheet .line.hl {
  height: auto;
  background: none;
  font-weight: 650;
  line-height: 1.5;
}
.paper-demo .pencil {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: rotate(2deg);
  box-shadow: var(--shadow-card);
}

/* Pencil becomes ink: the suggestion, then the teacher's decision. */
.pencil-band {
  background: var(--card);
  border-block: 1px solid var(--rule);
}
.pencil-to-ink {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: 58rem;
  margin: 3rem auto 0;
}
.pencil-to-ink > div {
  padding: 1.4rem 1.5rem;
  border-radius: 0.8rem;
}
.pencil-to-ink p {
  margin: 0 0 0.5rem;
}
.pencil-to-ink .who {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pencil-to-ink .points {
  font-size: 1.8rem;
  font-weight: 800;
}
.suggestion {
  border: 2px dashed var(--pencil);
  color: var(--pencil);
  background: var(--paper);
  transform: rotate(-1deg);
}
.suggestion .source {
  font-size: 0.95rem;
}
.decided {
  border: 2px solid var(--ink);
  border-left-width: 6px;
  color: var(--text);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transform: rotate(0.8deg);
}
.decided .who,
.decided .points {
  color: var(--ink);
}
.pencil-to-ink .arrow {
  margin: 0;
  font-weight: 700;
  color: var(--trail);
  text-align: center;
}
.pencil-to-ink .arrow::after {
  content: "";
  display: block;
  width: 4rem;
  height: 0.9rem;
  margin: 0.4rem auto 0;
  background: var(--trail);
  clip-path: polygon(0 40%, 85% 40%, 85% 0, 100% 50%, 85% 100%, 85% 60%, 0 60%);
}
@media (max-width: 48rem) {
  .pencil-to-ink {
    grid-template-columns: 1fr;
  }
  .pencil-to-ink .arrow::after {
    transform: rotate(90deg);
  }
}

/* The folder's six documents, numbered like tabbed sheets. */
.docs .doc-no {
  position: absolute;
  top: -0.9rem;
  left: 1.2rem;
  margin: 0;
  padding: 0.1rem 0.7rem;
  border-radius: 0.3rem 0.3rem 0 0;
  background: var(--ink);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Where the data goes: three stations on the trail, and what it never reaches. */
.flow-band {
  background: var(--trail-soft);
  border-block: 1px solid color-mix(in srgb, var(--trail) 20%, transparent);
}
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.flow li {
  position: relative;
  background: var(--card);
  border-radius: 1rem;
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -2.3rem;
  top: 50%;
  width: 2rem;
  border-top: 4px dotted var(--trail);
}
.flow p {
  margin: 0;
  color: var(--text-subtle);
}
.never-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2.5rem 0 1rem;
  padding: 0;
  list-style: none;
}
.never-list li {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--pen);
  color: var(--pen);
  background: var(--card);
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
@media (max-width: 48rem) {
  .flow {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .flow li:not(:last-child)::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1.6rem;
    width: 0;
    height: 1.4rem;
    border-top: 0;
    border-left: 4px dotted var(--trail);
  }
}

/* Integrations and their honest status. */
.status-wrap {
  overflow-x: auto;
  margin-top: 2.5rem;
}
.status {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.status th,
.status td {
  text-align: start;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.status thead th {
  font-size: 0.95rem;
  color: var(--text-subtle);
}
.status .tag {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.tag.ready {
  background: var(--trail-soft);
  color: var(--trail);
}
.tag.work {
  background: color-mix(in srgb, var(--marker) 45%, white);
  color: #4a3a00;
}
.tag.plan {
  border: 1.5px dashed var(--pencil);
  color: var(--pencil);
}
@media (max-width: 40rem) {
  .status thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .status,
  .status tbody,
  .status tr,
  .status th,
  .status td {
    display: block;
  }
  .status tr {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .status th,
  .status td {
    padding: 0.15rem 0;
    border: 0;
  }
}

/* The price example as a till receipt with a torn edge. */
.receipt {
  position: relative;
  max-width: 26rem;
  margin-inline: auto;
  padding: 1.75rem 1.75rem 2.25rem;
  background: var(--card);
  font-variant-numeric: tabular-nums;
  transform: rotate(1.2deg);
  filter: drop-shadow(0 18px 24px rgb(20 30 60 / 22%));
  --tooth: 0.6rem;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% /
    calc(2 * var(--tooth)) 100% repeat-x;
}
.receipt-head {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px dashed var(--rule);
  font-weight: 800;
  text-align: center;
}
.receipt table {
  width: 100%;
  border-collapse: collapse;
}
.receipt th,
.receipt td {
  padding: 0.35rem 0;
  text-align: end;
}
.receipt th:first-child {
  text-align: start;
}
.receipt thead th {
  font-size: 0.9rem;
  color: var(--text-subtle);
}
.receipt tfoot th,
.receipt tfoot td {
  border-top: 2px dashed var(--rule);
  font-weight: 800;
  font-size: 1.2rem;
  padding-top: 0.75rem;
}
.receipt tfoot td {
  color: var(--ink);
}
.receipt tfoot tr.list th,
.receipt tfoot tr.list td {
  border-top: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-subtle);
  padding-top: 0.2rem;
}
.receipt-foot {
  margin: 1rem 0 0;
  text-align: center;
  color: var(--text-subtle);
  font-size: 0.95rem;
}
.road.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 48rem) {
  .road.three {
    grid-template-columns: 1fr;
  }
}

/* Contact choices. */
.contact .index-card {
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  background-image: none;
}
.contact .index-card > p {
  margin-bottom: 1.25rem;
}
.contact .index-card .button {
  margin-top: auto;
  align-self: flex-start;
}
.contact .index-card > .for {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--trail);
}
.notice {
  line-height: 1.6;
  background-image: none;
  border-top-color: var(--marker);
}
.notice h2 {
  font-size: 1.4rem;
}

/* Reading pages. */
.narrow {
  max-width: 48rem;
}
.big {
  font-size: 1.25rem;
  line-height: 1.7;
}
.more-row {
  text-align: center;
  margin-top: 2rem;
}
a.more {
  font-weight: 700;
}
.principles {
  counter-reset: principle;
}
.principles .index-card {
  counter-increment: principle;
}
.principles .index-card h3::before {
  content: counter(principle) ". ";
  color: var(--pen);
}

/* The footer: a deep ink sheet with the whole site on it. */
.foot {
  padding-block: 4rem 2rem;
  background: var(--ink-deep);
  color: #dfe5f5;
  border-top: 0;
}
.foot .wrap {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}
.foot .wordmark {
  color: #ffffff;
}
.foot .wordmark svg {
  stroke: var(--marker);
}
.foot h2 {
  font-size: 1rem;
  color: #ffffff;
  margin: 0 0 0.75rem;
  letter-spacing: 0.02em;
}
.foot ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot a {
  color: #ffffff;
}
.foot-brand p {
  margin-top: 0.75rem;
  max-width: 18rem;
}
.foot-legal {
  grid-column: 1 / -1;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 15%);
  font-size: 0.95rem;
}
@media (max-width: 48rem) {
  .foot .wrap {
    grid-template-columns: 1fr 1fr;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}
.finish {
  margin-bottom: 4rem;
}