:root {
  --navy: #081420;
  --green: #3dba6f;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  /* STHeiti is the face of the design; it exists on Macs, everyone else gets the closest geometric sans. */
  --font: "STHeiti", "Heiti SC", "Avenir Next", "Avenir", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

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

html {
  /* Safari on iPhone and iPad must not enlarge text in wide blocks on its own:
     every kind of text keeps the size it is given. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--navy);
}

body {
  position: relative;
  margin: 0;
  min-height: 100svh;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

a {
  color: inherit;
  touch-action: manipulation;
}

/* Controls behave like an app's: no double-tap wait, and a long press does
   not select their labels. Content text stays selectable. */
button,
summary,
[role="button"] {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* On a touch screen Safari zooms into any field set smaller than 16px and
   stays zoomed; fields are 16px wherever a finger is the pointer. */
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* With viewport-fit=cover the page runs under the notch on a phone held
   sideways; the content keeps clear of it. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 6px;
  border-radius: 4px;
}

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

.site-footer {
  text-align: center;
  line-height: 1;
}

.site-footer a {
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* Landing
   Proportions come from the 1699 × 984 artboard, on which the PUTTOR lockup is
   573.56 wide: --w is that width, and everything else is a share of it. */

.landing {
  --w: clamp(min(360px, calc(100vw - 3rem), 62svh), min(33.76vw, 58.29svh), 720px);
}

@media (max-width: 600px) {
  .landing {
    --w: clamp(min(360px, calc(100vw - 3rem), 62svh), min(72vw, 58.29svh), calc(100vw - 3rem));
  }
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  /* Unequal padding lifts the group 1.75svh above centre, as on the artboard. */
  padding: calc(7svh + 3rem) 1.5rem calc(10.5svh + 3rem);
}

.hero__puttor {
  /* No wider than the hero's own side padding, or a narrow screen would
     scroll sideways. */
  --glow-room: min(48px, calc((100vw - var(--w)) / 2));
  display: block;
  /* Safari cuts a filter off at the edge of the element's own box, so the
     28 px glow gets room of its own: padding it can spread into, taken back by
     the same negative margin so the wordmark does not move. Without it the
     glow ends in a hard rectangle. */
  width: calc(var(--w) + 2 * var(--glow-room));
  margin: calc(-1 * var(--glow-room));
  padding: var(--glow-room);
  /* The wordmark is the way in, so hovering it has to look like something. */
  transition: transform 0.25s ease, filter 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .hero__puttor:hover {
    transform: scale(1.035);
    filter: drop-shadow(0 0 28px rgba(61, 186, 111, 0.45));
  }
}

.hero__puttor:active {
  transform: scale(0.995);
  filter: drop-shadow(0 0 14px rgba(61, 186, 111, 0.35));
}

.hero__puttor img {
  width: 100%;
}

.hero__kndr {
  width: calc(var(--w) * 0.6298);
  margin-top: calc(var(--w) * 0.1133);
}

.landing .site-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5.3svh;
  font-size: clamp(14px, calc(var(--w) * 0.03487), 22px);
}

/* Subpages */

.page {
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
}

.page-header__home {
  display: inline-block;
}

.page-header__home img {
  width: auto;
  height: 40px;
}

/* The two icons in the top right corner: the app's bar chart, which opens the
   analysis, and the graduation cap the tutorials will hang off. */

.corner-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: -0.6rem;
}

.corner-nav--floating {
  position: absolute;
  z-index: 2;
  top: 1.5rem;
  /* Pinned to the edge, so clear of a phone's notch held sideways too. */
  right: calc(clamp(1.25rem, 4vw, 3rem) + env(safe-area-inset-right, 0px));
}

.corner-nav__item {
  display: grid;
  place-items: center;
  /* A finger's worth of target around a small glyph. */
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--muted);
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.corner-nav__icon {
  width: 22px;
  height: 22px;
}

@media (hover: hover) and (pointer: fine) {
  a.corner-nav__item:hover {
    color: var(--green);
    background: rgba(61, 186, 111, 0.14);
  }
}

a.corner-nav__item:active {
  transform: scale(0.94);
}

a.corner-nav__item[aria-current="page"] {
  color: var(--green);
}

/* The language menu: a globe and the language's short name; the list opens
   below it and links to the same page in each language. */
.lang-menu {
  position: relative;
}

.lang-menu > summary {
  list-style: none;
  cursor: pointer;
}

.lang-menu > summary::-webkit-details-marker {
  display: none;
}

.corner-nav__item.lang-menu__button {
  display: flex;
  gap: 0.35rem;
  width: auto;
  padding: 0 0.65rem;
}

.lang-menu__code {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.lang-menu > summary:hover,
.lang-menu[open] > summary {
  color: var(--green);
  background: rgba(61, 186, 111, 0.14);
}

.lang-menu > summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.lang-menu__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  min-width: 11rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: #0f2233;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.lang-menu__list a {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  color: var(--white);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .lang-menu__list a:hover {
    background: rgba(61, 186, 111, 0.14);
    color: var(--green);
  }
}

.lang-menu__list a[aria-current] {
  color: var(--green);
}

/* Nowhere to go yet — present, so the tutorials have a place to land. */
.corner-nav__item--soon {
  color: rgba(255, 255, 255, 0.34);
  cursor: default;
}

a.corner-nav__item:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.page .site-footer {
  padding: 2rem 1.5rem 5.3svh;
  font-size: 15px;
}

/* PUTTOR */

.store-button {
  display: inline-block;
  -webkit-user-select: none;
  user-select: none;
  padding: 0.85em 1.8em;
  border-radius: 999px;
  background: var(--green);
  color: var(--navy);
  font-weight: 400;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .store-button:hover {
    opacity: 0.85;
  }
}

.store-button:active {
  opacity: 0.7;
}

/* Legal text */

.legal {
  flex: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.legal h1 {
  margin: 0 0 2rem;
  color: var(--green);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
}

.legal h2 {
  margin: 2.75rem 0 0.75rem;
  color: var(--green);
  font-size: 1.25rem;
  font-weight: 400;
}

.legal p,
.legal ul {
  margin: 0 0 1rem;
  color: var(--muted);
}

.legal ul {
  padding-left: 1.25rem;
}

.legal a {
  color: var(--green);
  text-underline-offset: 3px;
}

/* Marks what still has to be filled in before going live. */
.todo {
  padding: 0 0.3em;
  border-radius: 3px;
  background: #ffd54a;
  color: var(--navy);
  font-weight: 400;
}
.hero-puttor {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 6vw, 5rem) 1.5rem clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}

.hero-puttor__logo {
  width: clamp(min(360px, calc(100vw - 3rem), 50svh), min(40vw, 50svh), 640px);
}

.hero-puttor__lead {
  max-width: 34rem;
  margin: clamp(2rem, 5vw, 3rem) 0 2rem;
  color: var(--white);
  font-size: clamp(1.125rem, 2.4vw, 1.4rem);
  line-height: 1.45;
}

.hero-puttor__note {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Marketing bands */

/* One centred column for the whole band. Centring each child on its own
   margin-inline broke the moment a child set a margin shorthand of its own —
   on a wide screen the text then sat flush left while the grid stayed
   centred. The column does it once, for everything. */
.band {
  display: grid;
  grid-template-columns: minmax(0, 68rem);
  justify-content: center;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem;
}

.band > * {
  max-width: 100%;
}

.band--feature {
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* The coach's eyeglasses beside its text, running off the right edge. */
.band--coach {
  position: relative;
  overflow: hidden;
}

.coach-glasses {
  display: none;
}

@media (min-width: 1100px) {
  .coach-glasses {
    display: block;
    position: absolute;
    top: 50%;
    right: -7%;
    width: clamp(340px, 34vw, 580px);
    height: auto;
    color: var(--green);
    transform: translateY(-50%);
    pointer-events: none;
  }
}

/* The games tab's scope in the free space left of the drills, running off
   the left edge. The drills fill the whole content column, so it only
   appears where the margin beside them is wide enough to hold it. */
.band--games {
  position: relative;
  overflow: hidden;
}

.games-scope {
  display: none;
}

.drills + .band__lead {
  margin-top: 2rem;
}

@media (min-width: 1550px) {
  .games-scope {
    /* The margin left of the content, less a gap to the text. */
    --room: calc((100vw - 68rem) / 2 - 3rem);
    --size: min(520px, calc(var(--room) / 0.65));
    display: block;
    position: absolute;
    top: 50%;
    left: calc(var(--size) * -0.35);
    width: var(--size);
    height: auto;
    color: var(--green);
    transform: translateY(-50%);
    pointer-events: none;
  }
}

/* Digits raining down behind the statistics (assets/js/rain.js). */
.band--rain {
  position: relative;
  overflow: hidden;
}

.band--rain > * {
  position: relative;
  z-index: 1;
}

.band--rain > .rain {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  pointer-events: none;
}

.band--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--green);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.band__title {
  margin: 0 0 1rem;
  color: var(--white);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
}

.band--cta .band__title {
  color: var(--green);
}

.band__lead {
  max-width: 46rem;
  margin: 0 0 2.5rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.125rem);
}

.band__lead--tight {
  margin-bottom: 0;
}

/* Two paragraphs of one lead read as one text, not as two blocks. */
.band__lead:has(+ .band__lead) {
  margin-bottom: 1rem;
}

.band--cta .band__lead--tight {
  margin-top: 2rem;
}

.band__cta {
  margin: 2.5rem 0 0;
}

.text-link {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 186, 111, 0.4);
  padding-bottom: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover {
    border-bottom-color: var(--green);
  }
}

/* Cards, features, drills */

.cards,
.feature-grid,
.drills {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.card p {
  margin: 0 0 0.85rem;
  color: var(--muted);
}

.card p:last-child {
  margin-bottom: 0;
}

.card__title {
  margin: 0 0 0.9rem;
  color: var(--green);
  font-size: 1.2rem;
  font-weight: 400;
}

.feature h3,
.drill h3 {
  margin: 0 0 0.4rem;
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 400;
}

.feature p,
.drill p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.feature,
.drill {
  padding-left: 1rem;
  border-left: 2px solid rgba(61, 186, 111, 0.45);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.75rem 0 2.5rem;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 0.45em 0.95em;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9rem;
}

.soon {
  color: var(--green);
}

/* What comes with Pro and what is free, marked where it is described. */
.pro-tag,
.free-tag {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  font-size: 0.68em;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: 0.2em;
}

/* No fill: on dark, white letters in a white edge. */
.pro-tag {
  border: 1px solid var(--white);
  color: var(--white);
}

.free-tag {
  border: 1px solid var(--green);
  background: var(--green);
  color: var(--navy);
}

/* The three ways to enter a putt, one under the other. */
.cards--modes {
  grid-template-columns: 1fr;
}

/* Screenshots */

.shots {
  display: grid;
  gap: 1.75rem clamp(1rem, 3vw, 2.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2.5rem 0 0;
}

.shots--stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
}

.shot {
  margin: 0;
}

.shot img {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(14px, 3vw, 28px);
  background: rgba(255, 255, 255, 0.04);
}

.shot--wide {
  grid-column: 1 / -1;
}

.shot--wide img {
  border-radius: 16px;
}

.shot figcaption {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.shot figcaption strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--white);
  font-weight: 400;
}

.band__title .pro-tag {
  font-size: 0.36em;
  vertical-align: 0.55em;
}

/* The three modes on the left, what each input looks like on the right. */
.modes-layout {
  display: grid;
  gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* The metrics read one under the other, beside their screenshots. */
.modes-layout .feature-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.modes-layout .shots--stats {
  max-width: none;
  margin: 0;
}

/* The input levels, one at a time (assets/js/viewer.js): slope beside result,
   the level above them, the dots and arrows to the right. */
.viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem 1rem;
}

.viewer__heads {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  color: var(--green);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.viewer__frame {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  /* On a phone the pictures set the height; beside the modes they take theirs. */
  height: clamp(30rem, 145vw, 46rem);
}

.viewer__track {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  border-radius: 16px;
}

.viewer__track::-webkit-scrollbar {
  display: none;
}

.viewer__track:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

.viewer__slide {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.viewer__level {
  margin: 0;
  color: var(--white);
  font-size: 1.05rem;
  text-align: center;
}

.viewer__pair {
  display: grid;
  flex: 1;
  /* Pictures in one row, captions in the next: the longer caption sets the
     row for both, so the two phones stay the same height side by side. */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-auto-flow: column;
  gap: 0 clamp(0.75rem, 2vw, 1.5rem);
  min-height: 0;
}

.viewer__pair .shot {
  display: contents;
}

/* The phone takes whatever height is left over the caption, and keeps its shape. */
.shot__frame {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.viewer__pair .shot img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: clamp(12px, 2vw, 22px);
}

.viewer__pair .shot figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
}

.viewer__nav {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.viewer__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.viewer__arrow svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .viewer__arrow:hover {
    border-color: var(--green);
    background: rgba(61, 186, 111, 0.14);
    color: var(--green);
  }
}

.viewer__dots {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.25rem 0;
}

.viewer__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background-color 0.2s ease, height 0.2s ease;
}

.viewer__dot[aria-current="true"] {
  height: 22px;
  background: var(--green);
}

.viewer__arrow:focus-visible,
.viewer__dot:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.modes-layout--viewer + .chips {
  margin-top: 3rem;
}

@media (min-width: 1000px) {
  .modes-layout {
    grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
  }

  /* Beside the modes the pictures are exactly as tall as the three cards,
     so the section needs no scrolling of its own. */
  .modes-layout--viewer {
    align-items: stretch;
  }

  .modes-layout--viewer .viewer__frame {
    height: auto;
    min-height: 24rem;
  }

  .modes-layout .shots {
    gap: 1.5rem 1.25rem;
  }

  .modes-layout .shot figcaption {
    font-size: 0.85rem;
  }
}

/* On a phone the screenshots stand side by side and are swiped through
   sideways, instead of stacking into a page several screens long. The next
   one shows at the edge, so it is clear there is more. */
@media (max-width: 700px) {
  .modes-layout .shots--stats {
    display: flex;
    gap: 1rem;
    width: calc(100% + 3rem);
    max-width: none;
    margin: 0 -1.5rem;
    padding: 0 1.5rem 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.5rem;
    scrollbar-width: none;
  }

  .shots--stats::-webkit-scrollbar {
    display: none;
  }

  .shots--stats .shot {
    flex: 0 0 60%;
    scroll-snap-align: start;
  }

  .shots--stats .shot--wide {
    flex-basis: 88%;
  }

  /* The input levels turn sideways too: one swipe per level, the dots and
     arrows under the pictures. */
  .viewer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .viewer__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }

  .viewer__slide {
    flex: 0 0 100%;
  }

  .viewer__nav {
    grid-column: 1;
    grid-row: 3;
    flex-direction: row;
  }

  .viewer__dots {
    flex-direction: row;
    padding: 0 0.25rem;
  }

  .viewer__dot[aria-current="true"] {
    width: 22px;
    height: 10px;
  }

  /* The same arrows, pointing back and on instead of up and down. */
  .viewer__arrow svg {
    transform: rotate(-90deg);
  }

  .viewer__pair .shot figcaption {
    font-size: 0.78rem;
  }
}

/* Statistics reference page */

.doc {
  flex: 1;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 4rem;
}

.doc h1 {
  margin: 0 0 1rem;
  /* A long German word breaks rather than running off a phone. */
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--white);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
}

/* iPhone or Android: one page, the apps' texts as tabs. */
.platform-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0 2rem;
}

.platform-tabs [role="tab"] {
  padding: 0.45rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.platform-tabs [aria-selected="true"] {
  border-color: var(--green);
  color: var(--green);
}

/* One page, two languages: a switch at the top, a rule between them. */
.doc__langs {
  margin: 0 0 1.5rem;
  color: var(--muted);
}

.doc__translation {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.doc__lead {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.doc__note {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.doc__section {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

.doc__section h2 {
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--green);
  font-size: 1.35rem;
  font-weight: 400;
}

.stat-list {
  margin: 0;
}

.stat-list dt {
  margin-top: 1.4rem;
  color: var(--white);
}

.stat-list dt:first-child {
  margin-top: 0;
}

.stat-list dd {
  margin: 0.3rem 0 0;
  color: var(--muted);
}

.needs {
  color: rgba(61, 186, 111, 0.85);
}

.doc__back {
  margin-top: clamp(3rem, 7vw, 4rem);
}

/* Anchor navigation under the hero */

.hero-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
}

.hero-nav a {
  position: relative;
  padding: 0.35em 0;
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

@media (hover: hover) and (pointer: fine) {
  .hero-nav a:hover {
    border-bottom-color: var(--green);
  }
}

.hero-nav a:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: calc(-1 * clamp(1.25rem, 3vw, 2.25rem) / 2);
  transform: translateX(50%);
  color: rgba(255, 255, 255, 0.28);
}

.hero-puttor__note--wide {
  max-width: 34rem;
  margin-top: 1.25rem;
}

.band__cta--right {
  text-align: right;
}

/* Anchors land below the fixed-height header spacing */

html {
  scroll-behavior: smooth;
}

.band[id] {
  scroll-margin-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 600px) {
  /* Wrapped onto two lines a trailing separator reads as a missing item. */
  .hero-nav {
    gap: 0.4rem 1.4rem;
  }

  .hero-nav a:not(:last-child)::after {
    content: none;
  }
}

/* Hero and the first band belong together: half the usual gap between them. */
.hero-puttor + .band {
  padding-top: clamp(1.5rem, 4vw, 3rem);
}

/* The one card that has to be read even by someone only scrolling past: the
   page's own colours turned around, green ground and the deep blue as ink. */
.card--highlight {
  border-color: var(--green);
  background: var(--green);
  color: var(--navy);
}

.card--highlight .card__title,
.card--highlight p {
  color: var(--navy);
}

.card--highlight .card__title {
  font-weight: 500;
}

.card--highlight p {
  /* The blue carries a shade lighter than the heading, as the dark cards do. */
  color: #0d2338;
}

/* Flying through the hole in the O
   The wordmark's hole is transparent, so zooming the page into it ends on the
   navy behind it. The page it leads to comes out of the same zoom. */

body {
  overflow-x: hidden;
}

.warping main {
  transform-origin: var(--warp-x) var(--warp-y);
  animation: warp-through var(--warp-duration, 560ms) cubic-bezier(0.55, 0, 0.85, 0.5) forwards;
  will-change: transform, opacity;
}

.warping .site-footer,
.warping .corner-nav--floating {
  animation: warp-fade 240ms ease-out forwards;
}

@keyframes warp-through {
  from { transform: scale(1); opacity: 1; }
  60% { opacity: 1; }
  to { transform: scale(var(--warp-zoom, 60)); opacity: 0; }
}

@keyframes warp-fade {
  to { opacity: 0; }
}

/* Arriving out of the hole: the whole page grows back out of the point the
   hole sat on, so the two halves read as one move rather than a slide. The
   body is what moves, because its own coordinates are the screen's — on a
   page as tall as this one, scaling from its middle would throw the top
   in from above. */
.arriving body {
  transform-origin: var(--arrive-x, 50vw) var(--arrive-y, 45vh);
  animation: warp-arrive var(--arrive-duration, 400ms) cubic-bezier(0.16, 0.84, 0.44, 1) both;
  will-change: transform, opacity;
}

@keyframes warp-arrive {
  from { transform: scale(2.6); opacity: 0.3; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .warping main,
  .warping .site-footer,
  .warping .corner-nav--floating,
  .arriving body {
    animation: none;
  }
}