/* One stylesheet for visor.cc.

   The look is the app's riding screen brought to a page: dark chips, thick
   rings whose colour is a state, squircle corners, B612. Sizes are in px
   because the design gives them in px and they are meant to be matched.

   Nothing is styled inline in the pages. The CSP in static/_headers says
   style-src 'self', which throws a style attribute away. */

/* B612 is the same face the app uses (visor/assets/fonts) and sets everything
   that reads as an instrument: headings, buttons, chips, labels. Atkinson
   Hyperlegible sets the running text. Both are served from here, and each
   one's licence sits beside it in fonts/. */

@font-face {
  font-family: "B612";
  src: url("/fonts/B612-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "B612";
  src: url("/fonts/B612-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* The palette. Dark is the site's own look and the default; site.js puts
   data-theme on <html> before the first paint, "dark" unless the reader has
   picked light with the toggle. */

:root {
  color-scheme: dark;

  --bg: #0a0a0a;
  --ink: #ffffff;
  --muted: #9ca3af;
  --chip: #1c1c1c;
  --ring: #404040;
  --go: #34c759;
  --onGo: #0a0a0a;
  --armed: #ffffff;
  --warn: #ff8d28;
  --warnInk: #ff8d28;
  --hair: rgba(255, 255, 255, 0.12);

  /* The logo's green and the ink that goes on it, for the masthead and the
     filled GloveButton. Not part of either palette: they are the same
     whichever one is up. */
  --brand: #30d158;
  --onBrand: #0a0a0a;

  --display: "B612", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f3f4f6;
  --ink: #141414;
  --muted: rgba(10, 10, 10, 0.6);
  --chip: #ffffff;
  --ring: #8a9099;
  --go: #0c7a30;
  --onGo: #ffffff;
  --armed: #0a0a0a;
  --warn: #ff9f0a;
  --warnInk: #8a5200;
  --hair: rgba(0, 0, 0, 0.18);
}

/* Without JavaScript nothing sets data-theme and there is no toggle, so the
   reader's system setting decides. The same values as the block above; a
   custom property cannot be shared between a selector and a media query, so
   they are written twice and have to be kept in step. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --bg: #f3f4f6;
    --ink: #141414;
    --muted: rgba(10, 10, 10, 0.6);
    --chip: #ffffff;
    --ring: #8a9099;
    --go: #0c7a30;
    --onGo: #ffffff;
    --armed: #0a0a0a;
    --warn: #ff9f0a;
    --warnInk: #8a5200;
    --hair: rgba(0, 0, 0, 0.18);
  }
}

html {
  /* iOS Safari enlarges body text when the phone is turned sideways. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* A column as tall as the window, so the 404 page can centre itself in what
   the masthead and footer leave. border-box so that the room it makes for the
   masthead further down is part of that height, not added to it. */
body {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  transition:
    background 0.25s,
    color 0.25s;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
}

a {
  color: inherit;
}

a:hover {
  opacity: 0.8;
}

.sheet {
  display: flex;
  flex: 1;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

/* Masthead. A band in the logo's green across the whole window. The logo's
   own square is the same green, so only the mark shows. The band's contents
   are inset to line up with the sheet underneath: 24px, plus the sheet's
   margin once the window is wider than the sheet.

   Three groups: the wordmark, the links, the controls. Everything is packed
   to the right and the wordmark's auto margin holds it left, so if a screen
   is ever too narrow for one row, what wraps stays to the right. */

.masthead {
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 8px;
  box-sizing: border-box;
  padding: 14px max(24px, (100% - 1180px) / 2 + 24px);
  background: var(--brand);
  color: var(--onBrand);
  font-family: var(--display);
  font-size: 17px;
}

/* The padding keeps the links 16px clear of it when the row is tight. */
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  padding-right: 8px;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
}

.wordmark img {
  width: 32px;
  height: 32px;
}

.masthead nav,
.masthead .controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.masthead nav a {
  padding: 10px 14px;
  text-decoration: none;
}

.masthead nav a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

/* The call to action in the menu bar: the band's green showing through a
   white ring. White in both palettes, as the band is the same in both, and
   the label keeps the band's ink like the links beside it. */
.masthead .button {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 52px;
  padding: 0 18px;
  border: 4px solid #ffffff;
  border-radius: 20px;
  corner-shape: squircle;
  background: transparent;
  font-weight: 700;
  text-decoration: none;
}

/* Its envelope, which stands in for the words on a phone. */
.masthead .button svg {
  display: none;
}

/* The dark/light toggle: a sun in the dark palette, a moon in the light one.
   The icon is the mode a click switches to. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  corner-shape: squircle;
  background: var(--chip);
  color: var(--ink);
  cursor: pointer;
}

/* display above would otherwise outrank the hidden attribute the button ships
   with for readers without JavaScript. */
.theme-toggle[hidden] {
  display: none;
}

.masthead .button svg,
.theme-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .moon,
[data-theme="light"] .theme-toggle .sun {
  display: none;
}

[data-theme="light"] .theme-toggle .moon {
  display: block;
}

/* On a phone the band holds the same five things in one row. The call to
   action is cut down to its envelope, the two controls to 44px squares, and
   everything sits closer. That fits a 360px screen with a few pixels over;
   narrower than that the wordmark gives up its word too. */
@media (max-width: 599px) {
  /* Safari on an iPhone paints the strip behind the clock in the colour of
     an element held at the top of the window, and in the page's colour when
     there is none. Sticky is what makes the band count as held. The line it
     is held at is a window's height above the window, so it is out of sight
     before it gets there and scrolls away like anything else. Once Safari
     has taken the green it keeps it, so the strip stays green down the
     page. */
  .masthead {
    position: sticky;
    top: -100vh;
    gap: 4px;
    padding: 10px 16px;
  }

  .wordmark {
    gap: 8px;
  }

  .masthead nav {
    gap: 0;
  }

  .masthead nav a {
    padding: 10px 6px;
  }

  .masthead .controls {
    gap: 6px;
  }

  .masthead .button,
  .theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }

  .masthead .button {
    justify-content: center;
    padding: 0;
  }

  .masthead .button svg {
    display: block;
  }

  .masthead .button span {
    display: none;
  }
}

@media (max-width: 359px) {
  .wordmark span {
    display: none;
  }
}

/* From 600px up the masthead is at full size and held at the top of the
   window, 80px tall, which the body makes room for and the pinned phone on
   the front page counts on. Safari paints its own toolbar in the
   background-color of the full-width element held at the very top of the
   window, which is this.

   With the system in Dark appearance Safari refuses a colour as bright as
   this green and keeps its plain gray toolbar. That is accepted: the
   masthead stays the logo's colour and is not darkened to suit Safari.

   Below 600px it scrolls away with the page and leaves a phone its whole
   screen; the rule above is what colours the strip over it there. On paper
   it would otherwise be repeated on every sheet. */
@media screen and (min-width: 600px) {
  body {
    padding-top: 80px;
  }

  .masthead {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 96px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: 15px;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

footer p {
  margin: 0;
}

/* Pieces shared between pages. */

/* A small ringed chip: the dateline under a policy's title, the 404. */
.stamp {
  display: flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 8px 16px;
  border: 4px solid var(--ring);
  border-radius: 18px;
  corner-shape: squircle;
  background: var(--chip);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
}

/* The app's GloveButton: square, never rectangular, the label wrapping inside
   it. A link in a box, so it is still a link.

   Its outline is a squircle, x⁴ + y⁴ = 1: one curve from side to side with
   no straight run in it. CSS has corner-shape for that, but Safari 27 does
   not draw it, so the shape is a mask instead and the same in every browser.
   The mask is on two layers behind the label, the ring and the fill inside
   it, and not on the link itself, whose focus outline it would cut off. */
.gloves {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.glove {
  /* The curve as eight Béziers, within a hundredth of a pixel of it at this
     size. It stretches to whatever box it masks. A file, not a data: URL:
     the CSP in _headers allows images from this origin only. */
  --squircle: url("/squircle.svg");

  position: relative;
  /* A stacking context, so the layers sit under the label and over the
     page. */
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 128px;
  height: 128px;
  padding: 17px;
  /* Nothing is painted in the box itself. This rounds the focus outline. */
  border-radius: 36px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.glove::before,
.glove::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--ring);
  mask: var(--squircle) center / 100% 100% no-repeat;
}

.glove::after {
  inset: 5px;
  background: var(--chip);
}

/* The filled one, in the logo's green: one layer and no ring. */
.glove.go {
  color: var(--onBrand);
}

.glove.go::before {
  background: var(--brand);
}

.glove.go::after {
  content: none;
}

/* Long-form pages: one 720px column of Markdown, rendered by
   templates/page.html. */

.page {
  width: 100%;
  max-width: 720px;
  margin: 72px auto 0;
}

.page h1 {
  margin: 24px 0 18px;
  font-size: clamp(40px, 5.4vw, 60px);
  line-height: 1.06;
  text-wrap: balance;
}

.page h2 {
  margin: 64px 0 18px;
  font-size: 26px;
  line-height: 1.2;
  text-wrap: balance;
}

.page h3 {
  margin: 36px 0 10px;
  font-size: 19px;
  line-height: 1.3;
}

/* A heading linked to by its id should stop below the masthead, not under
   it. */
.page h2,
.page h3 {
  scroll-margin-top: 96px;
}

.page p {
  margin: 0 0 18px;
  text-wrap: pretty;
}

.page .lede {
  margin-bottom: 48px;
  color: var(--muted);
  font-size: 21px;
  line-height: 1.45;
}

/* Closes up to the lede, leaving 22px between them. */
.page .stamp {
  margin: -26px 0 48px;
}

.page a {
  text-decoration-color: var(--go);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Lists. The marker is a flex item beside the text, which is why page.html
   wraps each item's contents in a <div>. */

.page ul,
.page ol {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.page li {
  display: flex;
  gap: 16px;
}

.page li > div {
  min-width: 0;
  text-wrap: pretty;
}

/* A bullet has no text, so its baseline is its bottom edge: it sits on the
   first line of the item, a pixel above the baseline. */
.page ul > li {
  align-items: baseline;
}

.page ul > li::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border: 3px solid var(--ring);
  border-radius: 4px;
  corner-shape: squircle;
  transform: translateY(-1px);
}

/* Numbered steps: each number in a chip ringed like a button to press. */
.page ol {
  counter-reset: step;
}

.page ol > li {
  align-items: center;
  counter-increment: step;
}

.page ol > li::before {
  content: counter(step);
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 4px solid var(--go);
  border-radius: 16px;
  corner-shape: squircle;
  background: var(--chip);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
}

/* A list item written as paragraphs, or holding a list of its own. */
.page li p:last-child {
  margin-bottom: 0;
}

.page li ul,
.page li ol {
  margin: 10px 0 0;
}

/* Callout. Written in Markdown as a blockquote whose first line is bold:

     > **Read this one**
     >
     > Riding takes your whole attention.

   page.html turns it into an <aside> and the bold line into the label. A
   callout warns unless it says otherwise: only the label "Note" gets the
   quiet ring. */

.callout {
  margin: 8px 0 26px;
  padding: 24px 26px 8px;
  border: 4px solid var(--warn);
  border-radius: 28px;
  corner-shape: squircle;
  background: var(--chip);
}

.callout p {
  margin-bottom: 16px;
}

.callout .callout-label {
  margin-bottom: 10px;
  color: var(--warnInk);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.callout[data-label="Note"] {
  border-color: var(--ring);
}

.callout[data-label="Note"] .callout-label {
  color: var(--muted);
}

/* The FAQ's questions are h3s, ruled off from the answer above. */
.faq h3 {
  margin: 0;
  padding: 28px 0 10px;
  border-top: 1px solid var(--hair);
  text-wrap: balance;
}

/* 404: centred in what the masthead and footer leave of the window. */

.lost {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 720px;
  margin: 72px auto 0;
  padding: 48px 0;
}

.lost .stamp {
  margin-bottom: 28px;
  border-color: var(--warn);
  color: var(--warnInk);
}

.lost h1 {
  margin: 0 0 16px;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 1.02;
}

.lost p:not(.stamp) {
  margin: 0 0 40px;
  color: var(--muted);
  font-size: 21px;
}

.lost .glove {
  font-size: 18px;
}

/* Front page. */

/* The features' layout depends on the room this has, not on the window. */
.home {
  container-type: inline-size;
}

.home strong {
  font-family: var(--display);
}

/* The headline and each feature: a block of text with a phone under it, each
   one about a window tall. This is the layout on a narrow screen, and on any
   screen without JavaScript. */

.features {
  max-width: 600px;
  margin: 0 auto;
}

.feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  box-sizing: border-box;
  min-height: 88vh;
  padding: 40px 0;
}

.feature.hero {
  gap: 40px;
  min-height: calc(100vh - 90px);
}

.hero h1 {
  margin: 0 0 28px;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.08;
  text-wrap: balance;
}

/* The one word of the headline that is drawn in green. Already bold; a
   <strong> inside a heading would otherwise ask for a heavier weight still. */
.hero h1 strong {
  color: var(--go);
  font-weight: inherit;
}

.hero .lede {
  max-width: 34em;
  margin: 0 0 36px;
  color: var(--muted);
  font-size: 20px;
  text-wrap: pretty;
}

.feature h2 {
  margin: 0 0 18px;
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.08;
}

.feature h2 + p {
  max-width: 22em;
  margin: 0;
  color: var(--muted);
  font-size: 22px;
  text-wrap: pretty;
}

/* What already works, ringed in green, and what is coming, ringed in white. */
.states {
  max-width: 26em;
  margin: 20px 0 0;
  padding: 0;
  font-size: 18px;
  list-style: none;
}

.states li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
}

.states li::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 4px solid var(--armed);
  border-radius: 5px;
  corner-shape: squircle;
  transform: translateY(1px);
}

.states .works::before {
  border-color: var(--go);
}

/* The phone: a ringed frame around a screen, green around the headline's and
   neutral around a feature's. */

.phone-mount {
  display: flex;
  justify-content: center;
}

.phone {
  box-sizing: border-box;
  width: min(100%, 300px);
  aspect-ratio: 9 / 19.5;
  padding: 8px;
  border: 5px solid var(--ring);
  border-radius: 48px;
  corner-shape: squircle;
  background: var(--chip);
}

.hero .phone {
  border-color: var(--go);
}

.screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 38px;
  corner-shape: squircle;
  background: var(--bg);
}

.screen img,
.screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* What a screen says when it has nothing to show. */
.screen-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 16px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* Under a recording the label is a fallback. On its own it would show through
   the video for the moment before the first frame arrives, so with JavaScript
   it stays hidden until site.js finds the recording cannot be played. */
.js .screen-label.fallback {
  visibility: hidden;
}

.js .unplayable .screen-label.fallback {
  visibility: visible;
}

/* With room for two columns the phones leave their blocks: every one is
   lifted to the same spot beside the text and pinned there, so the reader
   sees a single phone whose screen changes as the text scrolls past. site.js
   marks the blocks read so far as .shown.

   Only with JavaScript, because something has to pick the screen. The block
   takes the sheet's whole width, so its edges are the masthead's: the text
   hangs from the same line as the logo and the phone's ring ends on the same
   line as the theme toggle. The column is 360px and the gap at least 64px,
   which is the 424px the text gives up; the text keeps the 600px measure it
   has on a narrow screen, and on a wider sheet the gap takes the rest. */

@container (min-width: 904px) {
  .js .features {
    position: relative;
    max-width: none;
  }

  .js .feature {
    padding-right: 424px;
  }

  .js .feature > div:first-child {
    max-width: 600px;
  }

  /* Each mount is the whole right-hand column, all of them on top of one
     another. The phone inside sits against the column's right edge and is
     centred in the window below the masthead (80px); the bottom padding is
     the gap under it, so it lets go of the window exactly as the column's
     end arrives. */
  .js .phone-mount {
    --height: min(100vh - 140px, 720px);
    --gap: calc((100vh - 80px - var(--height)) / 2);

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 360px;
    padding-bottom: var(--gap);
    pointer-events: none;
  }

  .js .phone {
    position: sticky;
    top: calc(80px + var(--gap));
    width: auto;
    height: var(--height);
    margin: 0 0 0 auto;
    padding: 10px;
    border-color: var(--go);
    border-radius: 56px;
  }

  .js .screen {
    border-radius: 44px;
  }

  .js .screen-label {
    padding: 20px;
    font-size: 15px;
  }

  /* One frame is drawn, the headline's. A feature's phone keeps its shape but
     shows only its screen, laid exactly over the one below, and fades in when
     its block is reached. Screens stack in page order, so going back down the
     page is the top one fading out. */
  .js .feature:not(.hero) .phone {
    border-color: transparent;
    background: none;
  }

  .js .feature:not(.hero) .screen {
    opacity: 0;
    transition: opacity 0.5s;
  }

  .js .feature.shown .screen {
    opacity: 1;
  }
}

/* A sentence set as large as a heading, centred. */
.statement {
  max-width: 24em;
  margin: 0 auto 96px;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

.features + .statement {
  margin-top: 64px;
}

.statement a {
  color: var(--go);
  text-underline-offset: 4px;
}

/* Coming next and Not planned. Bullets hang in a 96px gutter, right-aligned,
   with the text 14px beyond it; the headings are indented by the same 110px
   to line up with the text. */

.roadmap {
  display: grid;
  gap: 48px;
  max-width: 640px;
  margin: 0 auto 96px;
}

.roadmap h2 {
  margin: 0 0 12px;
  padding-left: 110px;
  font-size: 18px;
}

.roadmap ul {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.45;
  list-style: none;
}

.roadmap li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--hair);
}

.roadmap li::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  margin-left: 86px;
  border: 3px solid var(--armed);
  border-radius: 5px;
  corner-shape: squircle;
  transform: translateY(1px);
}

.roadmap .never ul {
  color: var(--muted);
}

.roadmap .never li::before {
  border-color: var(--ring);
}

/* An item already being built: the gutter holds a tag and a solid dot in
   place of the bullet, blinking together. */
.roadmap .started::before {
  content: none;
}

.roadmap .tag {
  display: flex;
  flex: none;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  width: 96px;
  color: var(--go);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  animation: blink 1.6s ease-in-out infinite;
}

.roadmap .tag::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  corner-shape: squircle;
  background: var(--go);
  transform: translateY(1px);
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roadmap .tag {
    animation: none;
  }
}

.getting {
  box-sizing: border-box;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 36px;
  border: 4px solid var(--go);
  border-radius: 32px;
  corner-shape: squircle;
  background: var(--chip);
}

.getting h2 {
  margin: 0 0 14px;
  font-size: 24px;
}

.getting p {
  margin: 0 0 28px;
  font-size: 20px;
  text-wrap: pretty;
}

.getting a {
  font-family: var(--display);
  font-weight: 700;
}

/* The safety note that closes the front page is small print on purpose. The
   terms it summarises are set at full size on /terms/, in a callout that is
   the first thing on the page. */
.safety {
  max-width: 44em;
  margin: 48px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}