/* Studiplan landing page.
   White surface, near-black text and hairlines, one blue that means "act here".
   The light-blue pill in the headline is a tint of that same blue.
   Pictures of the app are real screenshots; they alone carry a soft shadow. */

/* Inter, stored with the page (see fonts/OFL.txt). One file holds every weight from 400 to 800,
   and the optical sizes from text to display, which the browser picks by font size. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-opsz-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* The system font, resized to the width and height of Inter, so the page barely moves when Inter arrives. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Segoe UI"), local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

:root {
  --white: #ffffff;
  --black: #111111;      /* text, icons */
  --grey-text: #525252;  /* secondary text */
  --grey-band: #f7f7f7;  /* section bands, quiet fills */
  --grey-fill: #f0f0f0;  /* the not-yet-available button */
  --line: #e5e5e5;       /* hairline borders */
  --line-strong: #d4d4d4;
  --blue: #1d4ed8;       /* primary action, links, focus */
  --blue-dark: #1e40af;  /* hover, and the text in the pill */
  --blue-tint: #dbe6ff;  /* the pill */
  --radius: 8px;         /* buttons, small frames */
  --radius-large: 12px;  /* cards, screenshots, the window */
  --font: "Inter", "Inter Fallback", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* One shadow for every picture of the app: close, middle and far. */
  --shot-shadow:
    0 1px 2px rgba(17, 17, 17, 0.05),
    0 10px 24px -10px rgba(17, 17, 17, 0.14),
    0 32px 64px -32px rgba(17, 17, 17, 0.28);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
}

::selection {
  background: var(--blue);
  color: var(--white);
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

strong {
  font-weight: 600;
  color: var(--black);
}

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 2rem;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* A screenshot: scales with its column, with a hairline, one radius and the shared shadow. */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-large);
  background: var(--white);
  box-shadow: var(--shot-shadow);
}

/* Links and focus */

a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--blue-dark);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Buttons */

.button {
  display: inline-block;
  padding: 0.8125rem 1.625rem;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

a.button:hover {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
  color: var(--white);
}

a.button:focus-visible {
  border-radius: var(--radius);
}

/* Not a link, and it must not look like one. */
.button--pending {
  border-color: var(--line-strong);
  background: var(--grey-fill);
  color: var(--grey-text);
  cursor: default;
}

/* Windows or Mac. Both buttons and both notes lie in the same place, and the one that does not
   apply is only made invisible: switching never moves anything. */
.platform-stack {
  display: grid;
  justify-items: center;
}

.platform-stack > * {
  grid-area: 1 / 1;
}

/* Both notes start at the same height, whichever shows. */
.platform-stack > .action-note,
.platform-stack > .action-note + .action-note {
  margin-top: 0.875rem;
}

.is-off {
  visibility: hidden;
}

/* The download and, joined to its right side, the part that opens the menu: one control. */
.split {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

/* Both states of the main part are equally wide, so the menu part always sits against it. */
.split > .platform-stack {
  justify-items: stretch;
}

.split-more {
  display: grid;
  place-items: center;
  width: 3.125rem;
  padding: 0;
  position: relative;
  border: 1px solid var(--blue);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--blue);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

/* Where the two parts meet: a short, faint line that stops before the edges, not a hard divide. */
.split-more::before {
  content: "";
  position: absolute;
  top: 26%;
  bottom: 26%;
  left: 0;
  width: 1px;
  background: currentColor;
  opacity: 0.28;
}

.split--small .split-more {
  width: 2.125rem;
}

.split--small .split-more .icon {
  width: 1rem;
  height: 1rem;
}

.platform-stack--start {
  justify-items: start;
}

.split-more[hidden] {
  display: none;
}

.split-more:hover,
.split-more[aria-expanded="true"] {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
}

.split-more .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2.2;
  transition: transform 0.15s ease-out;
}

.split-more[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

/* With the menu part showing, only the outer corners are round. */
.split--live .button {
  border-radius: var(--radius) 0 0 var(--radius);
}

/* Mac is chosen and not ready: both parts go grey together. */
.split[data-chosen="mac"] .split-more,
.split[data-chosen="mac"] .split-more:hover {
  border-color: var(--line-strong);
  background: var(--grey-fill);
  color: var(--grey-text);
}

.split[data-chosen="mac"] .split-more[aria-expanded="true"] {
  background: var(--line);
}

/* The menu floats over the page: the one other place with a shadow. */
.menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 5;
  display: grid;
  gap: 0.125rem;
  min-width: 13.5rem;
  padding: 0.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 28px -12px rgba(17, 17, 17, 0.28), 0 2px 6px rgba(17, 17, 17, 0.06);
  text-align: left;
}

.menu[hidden] {
  display: none;
}

.menu button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.5rem;
  padding: 0 0.75rem 0 0.625rem;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--black);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.menu button:hover,
.menu button:focus-visible {
  background: var(--grey-fill);
}

.menu button:focus-visible {
  outline-offset: -2px;
  border-radius: 5px;
}

.menu button span {
  margin-left: auto;
  padding-left: 1rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--grey-text);
}

/* The check shows on the chosen system only; the other keeps its place empty. */
.menu .icon {
  visibility: hidden;
  width: 1rem;
  height: 1rem;
  stroke-width: 2.2;
}

.menu [aria-checked="true"] .icon {
  visibility: visible;
}

.button--small {
  white-space: nowrap;
  padding: 0.4375rem 0.9375rem;
  font-size: 0.875rem;
}

/* Top bar */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.top-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 4rem;
}

.name {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--black);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.name:hover {
  color: var(--black);
}

.mark {
  width: 2.2rem;
  height: auto;
}

.top-nav {
  display: flex;
  white-space: nowrap;
  gap: 1.75rem;
  margin-left: auto;
  font-size: 0.9375rem;
  font-weight: 500;
}

.top-nav a {
  color: var(--black);
  text-decoration: none;
}

.top-nav a:hover {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Hero */

.hero {
  padding-block: 5.5rem 0;
  text-align: center;
}

h1 {
  max-width: 15em;
  margin-inline: auto;
  font-size: clamp(2rem, 1.1rem + 3.9vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* The headline is two blocks, so where its lines break never depends on the pill:
   "Turn your study materials", and under it one row, "into" and the pill, centred as a unit. */
/* The pill's blue layer is wider than the pill; it must never widen the page. */
h1 {
  overflow-x: hidden;
  overflow-x: clip;
}

.h1-top {
  display: block;
  text-wrap: balance;
}

.keep {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3em;
  white-space: nowrap;
}

/* The pill. As plain HTML it shows its first word, as wide as that word.
   demo.js then brings it to life, one word at a time. At each change the row is laid out at once
   for the new word, and the script plays the difference back as movement (transform and clip-path
   only, no layout while it moves): "into" and the pill glide to their new places while the pill's
   right edge travels to the new width, so the row stays centred the whole way. */
.rotator {
  --pill-time: 0.52s;
  --pill-ease: cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-grid;
  position: relative;
  box-sizing: content-box; /* its width is the word's width; the padding comes on top */
  padding: 0.02em 0.42em 0.1em;
  overflow: hidden;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue-dark);
  white-space: nowrap;
}

.rotator span {
  display: none;
}

.rotator span:first-child {
  display: block;
}

/* Live: the blue is painted by a layer as wide as the longest word, and the pill is cut to the
   width of the word that shows. That way it can be seen wider than its box while it shrinks. */
.rotator--live {
  width: var(--pill-width);
  overflow: visible;
  background: none;
  isolation: isolate;
  clip-path: inset(0 0 0 0 round 999px);
}

.rotator--live::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: calc(var(--pill-max) + 0.84em);
  border-radius: 999px;
  background: var(--blue-tint);
}

/* An empty line box: it gives the pill its height and its baseline while the words float over it. */
.rotator--live::before {
  content: "\200b";
}

.rotator--live span,
.rotator--live span:first-child {
  display: block;
  position: absolute;
  top: 0.02em;
  left: 0.42em;
  opacity: 0;
  transform: translateX(-1.1em);
  /* Leaving: gone quickly, so two words are never read at once. */
  transition: transform var(--pill-time) var(--pill-ease), opacity 0.2s ease-out;
}

.rotator--live span.is-in {
  opacity: 1;
  transform: translateX(0);
  /* Arriving: a moment after the other has started to go. */
  transition: transform var(--pill-time) var(--pill-ease), opacity 0.36s ease-out 0.1s;
}

.rotator--live span.is-out {
  transform: translateX(1.1em);
}

/* Put back on the left, ready for its next turn, without being seen to travel there. */
.rotator--live span.is-waiting {
  transition: none;
}

/* The whole phrase, shown instead of the pill when motion is switched off. */
.still {
  display: none;
}

/* The second half of the page's one message, said with weight rather than size. */
.claim {
  margin-top: 1.125rem;
  font-size: clamp(1.375rem, 1rem + 1.7vw, 2.125rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.lede {
  max-width: 38rem;
  margin: 1.25rem auto 0;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--grey-text);
  text-wrap: balance;
}

.action {
  margin-top: 2.25rem;
}

.action-note {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  color: var(--grey-text);
  text-wrap: balance;
}

.action-note + .action-note {
  margin-top: 0.125rem;
}

/* The demo is shown as the app's screen itself: rounded, a hairline, a wide soft shadow.
   On a wide display it is wider than the column of text above it. */
.screen {
  --screen-width: min(100vw - 4rem, 84rem);
  width: var(--screen-width);
  margin-top: 4.5rem;
  margin-inline: calc((100% - var(--screen-width)) / 2);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-large);
  background: var(--white);
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.05),
    0 16px 36px -14px rgba(17, 17, 17, 0.16),
    0 48px 96px -40px rgba(17, 17, 17, 0.32);
}

.screen-note {
  max-width: 38rem;
  margin: 1.75rem auto 0;
  font-size: 0.9375rem;
  color: var(--grey-text);
  text-wrap: balance;
}

/* Sections */

.section {
  padding-block: 6.5rem;
}

.band {
  border-block: 1px solid var(--line);
  background: var(--grey-band);
}

h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.024em;
  text-align: center;
  text-wrap: balance;
}

.section-lede {
  max-width: 42rem;
  margin: 0.75rem auto 0;
  font-size: 1.125rem;
  color: var(--grey-text);
  text-align: center;
  text-wrap: balance;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

/* How it works: each step is a row, its picture on the left at the size it was taken. */

.steps {
  display: grid;
  gap: 4rem;
  margin-top: 4rem;
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 588px) minmax(0, 1fr);
  align-items: center;
  column-gap: 4.5rem;
}

.step h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.375rem;
  letter-spacing: -0.018em;
}

.step-number {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.step-text p {
  max-width: 24rem;
  margin-top: 0.625rem;
  color: var(--grey-text);
  text-wrap: pretty;
}

/* What you get */

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 4rem;
}

.feature {
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  background: var(--white);
}

.feature p {
  margin-top: 0.375rem;
  color: var(--grey-text);
  text-wrap: pretty;
}

.feature--quiz {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 588px);
  align-items: center;
  gap: 3rem;
}

.feature--quiz h3 {
  font-size: 1.375rem;
  letter-spacing: -0.018em;
}

.tree {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--grey-band);
  font-size: 0.875rem;
  line-height: 1.4;
}

.tree li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.1875rem;
  overflow-wrap: anywhere;
}

.tree .icon {
  color: var(--grey-text);
}

.tree .l1 {
  padding-left: 1.25rem;
}

.tree .l2 {
  padding-left: 2.5rem;
  font-weight: 600;
}

.tree .l3 {
  padding-left: 3.75rem;
}

.tree .l4 {
  padding-left: 5rem;
}

.feature--points {
  display: grid;
  align-content: space-evenly;
  gap: 1.75rem;
}

.feature--points li {
  display: flex;
  gap: 1.125rem;
}

.feature-icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.125rem;
}

/* The four AIs: one quiet table instead of four boxes. */

.providers {
  width: 100%;
  margin-top: 3.5rem;
  border-collapse: collapse;
  text-align: left;
}

.providers th,
.providers td {
  padding: 1.125rem 1.5rem 1.125rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-wrap: pretty;
}

.providers thead th {
  padding-block: 0 0.75rem;
  border-bottom-color: var(--black);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-text);
}

.providers tbody th {
  width: 20%;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  white-space: nowrap;
}

.providers td {
  width: 26.6%;
  color: var(--grey-text);
}

.providers th:last-child,
.providers td:last-child {
  padding-right: 0;
}

.providers-note {
  max-width: 40rem;
  margin: 2.25rem auto 0;
  color: var(--grey-text);
  text-align: center;
  text-wrap: balance;
}

/* Closing: the action again, and the install note */

.closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 4rem;
}

.closing h2,
.closing .section-lede {
  margin-inline: 0;
  text-align: left;
}

.closing .action-note {
  text-wrap: pretty;
}

.install {
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  background: var(--white);
}

.install p {
  margin-top: 0.625rem;
  font-size: 1rem;
  color: var(--grey-text);
  text-wrap: pretty;
}

.clicks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1rem 1.125rem;
}

.clicks li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.click-number {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-text);
}

.click-label {
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--black);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
}

.click-arrow {
  color: var(--grey-text);
}

/* Something to type or to compare: the one place for a monospace face. */
.code {
  margin: 0.625rem 0 0;
  padding: 0.75rem 0.875rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--grey-band);
  color: var(--black);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code code {
  font: inherit;
}

.install-next {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* A page of plain text: the privacy page. */

.doc {
  max-width: 46rem;
  padding-block: 4.5rem 5rem;
}

.doc h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: left;
}

.doc-lede {
  margin-top: 1.25rem;
  font-size: 1.1875rem;
  color: var(--grey-text);
  text-wrap: pretty;
}

.doc h2 {
  margin-top: 3rem;
  font-size: 1.375rem;
  letter-spacing: -0.018em;
  text-align: left;
}

.doc ul {
  margin-top: 1rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.doc li {
  padding-left: 0.25rem;
  color: var(--grey-text);
  text-wrap: pretty;
}

.doc li + li {
  margin-top: 0.75rem;
}

.doc li::marker {
  color: var(--line-strong);
}

.doc h2 + p {
  margin-top: 1rem;
  color: var(--grey-text);
}

.doc-date {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--grey-text);
}

/* Bottom */

.doc + footer .bottom {
  border-top: 1px solid var(--line);
}

.bottom {
  padding-block: 2rem 3rem;
  font-size: 0.9375rem;
  color: var(--grey-text);
}

.bottom p + p {
  margin-top: 0.5rem;
}

.bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

/* Narrower screens */

@media (max-width: 72rem) {
  .screen {
    width: auto;
    margin-inline: 0;
  }
}

@media (max-width: 68rem) {
  .step {
    column-gap: 2.5rem;
  }

  .feature--quiz {
    gap: 2rem;
  }
}

@media (max-width: 56rem) {
  /* The bar gets tight: the links to parts of this page go, the way out to Discord stays. */
  .top-nav a[href^="#"] {
    display: none;
  }

  /* The picture first, then its words. */
  .step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }

  .step .sp-piece {
    max-width: 588px;
  }

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

  .feature--quiz {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .feature--quiz .sp-piece {
    max-width: 588px;
  }

  /* The table becomes four blocks, each cell under its own label. */
  .providers,
  .providers tbody,
  .providers tr,
  .providers th,
  .providers td {
    display: block;
    width: auto;
  }

  .providers thead {
    display: none;
  }

  .providers tr {
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--line);
  }

  .providers tr:first-child {
    border-top: 1px solid var(--black);
  }

  .providers tbody th,
  .providers td {
    padding: 0;
    border: 0;
  }

  .providers td {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
  }

  .providers td::before {
    content: attr(data-label);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.9;
  }

  .closing {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}

@media (max-width: 44rem) {
  .wrap {
    padding-inline: 1.25rem;
  }

  .top-row {
    gap: 1rem;
    min-height: 3.5rem;
  }

  .name {
    font-size: 1rem;
  }

  .top-nav {
    display: none;
  }

  .top .split,
  .top-row > .button {
    margin-left: auto;
  }

  .platform-stack--start {
    justify-items: stretch;
  }

  /* Fingers need room: the top-bar download and its menu part are 40px tall here. */
  .top .button {
    display: grid;
    align-items: center;
    min-height: 2.5rem;
  }

  .split--small .split-more {
    width: 2.5rem;
  }

  .top .button {
    padding-inline: 0.625rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .hero {
    padding-top: 3rem;
  }

  .lede {
    font-size: 1.125rem;
  }

  .platform-stack {
    justify-items: stretch;
  }


  .action .button {
    display: block;
    padding-inline: 0.5rem;
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  .screen {
    margin-top: 2.75rem;
  }

  .section {
    padding-block: 4rem;
  }

  .steps,
  .features,
  .providers {
    margin-top: 2.5rem;
  }

  .steps {
    gap: 3rem;
  }

  .feature,
  .install {
    padding: 1.25rem;
  }

  .tree .l1 {
    padding-left: 0.75rem;
  }

  .tree .l2 {
    padding-left: 1.5rem;
  }

  .tree .l3 {
    padding-left: 2.25rem;
  }

  .tree .l4 {
    padding-left: 3rem;
  }

  .providers td {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* No motion asked for: no pill, the whole phrase instead, and it may wrap like any other text. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button,
  .split-more,
  .split-more .icon {
    transition: none;
  }

  .rotator {
    display: none;
  }

  .still {
    display: inline;
  }

  .h1-top,
  .keep {
    display: inline;
    white-space: normal;
  }
}

/* The top bar's download is one button: no line between its two parts, one hover for the
   whole of it, and the arrow turns over while the pointer is on it or the menu is open. */
.split-more::before {
  display: none;
}

.split--live:not([data-chosen="mac"]):hover .button,
.split--live:not([data-chosen="mac"]):hover .split-more,
.split--live:not([data-chosen="mac"]) .split-more[aria-expanded="true"] {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
}

.split--live:hover .split-more .icon {
  transform: rotate(180deg);
}

/* A system that has no version yet: listed, not choosable. */
.menu button[aria-disabled="true"] {
  color: var(--grey-text);
  cursor: default;
}

.menu button[aria-disabled="true"]:hover {
  background: transparent;
}

.menu-note {
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.75rem 0.375rem;
  border-top: 1px solid var(--line);
  color: var(--grey-text);
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: normal;
}

/* While the menu is open the whole button stays in its hover look, so both parts let go together. */
.split--live:not([data-chosen="mac"]):has(.split-more[aria-expanded="true"]) .button {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
}