@charset "UTF-8";
@font-face {
  font-family: 'Schibsted Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/media/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/media/fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* Brand tokens, mirrored from the app's design system (ds-bundle/tokens/tokens.css). */
  --gh-green: #14893c;
  --gh-green-deep: #0f6e30;
  --gh-on-green: #fcfbf6;
  --gh-paper: #fcfbf6;
  --gh-ink: #211f1a;
  /* Darker than the app's #7c766a: here it sets small text on paper, which needs 4.5:1. */
  --gh-ink-soft: #6f695d;
  --gh-field: #fff;
  --gh-sunken: #efebe0;
  --gh-hairline: #e7e3d8;
  --gh-ink-mid: #4a463d;
  --gh-green-wash: #f1f8f3;
  --gh-green-tint: #e8f3eb;
  --gh-green-line: #cfe6d6;
  --gh-radius-lg: 12px;
  --gh-radius-xl: 16px;
  --gh-shadow-md: 0 6px 20px -6px rgba(33, 31, 26, 0.12);
  --gh-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  /* A white tick, drawn on a green dot by checklists. */
  --gh-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23fcfbf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --gh-font-display: 'Schibsted Grotesk Variable', 'Schibsted Grotesk', system-ui, sans-serif;
  --measure: 42rem;
}
html {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'PT Sans',
    'Open Sans',
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif;
  font-size: 100%;
  line-height: 1.4;
  background: var(--gh-paper);
  color: var(--gh-ink);
  -webkit-overflow-scrolling: touch;
}
body {
  max-width: var(--measure);
  margin: 1.2em auto;
  padding: 0 1.2em;
  font-size: 1rem;
}
@media (min-width: 20rem) {
  body {
    font-size: calc(1rem + 0.00625 * (100vw - 20rem));
  }
}
@media (min-width: 40rem) {
  body {
    font-size: 1.125rem;
  }
}
body > footer,
body > header,
body > main {
  position: relative;
}
body > footer {
  margin-top: 5em;
  padding: 2em 0 1.5em;
  border-top: 1px solid var(--gh-hairline);
  text-align: center;
  font-size: 0.8rem;
  color: var(--gh-ink-soft);
}
details,
nav {
  margin: 1em 0;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
  margin-right: 1em;
  margin-bottom: 0.25em;
}
nav li:last-child {
  margin-right: 0;
}
a,
a:visited {
  color: var(--gh-green);
}
article header h1 a:visited:hover,
article header h2 a:visited:hover,
nav a:hover {
  color: var(--gh-green-deep);
}
ol,
ul {
  margin-top: 0;
  padding-top: 0;
  padding-left: 1.5em;
}
main li::marker {
  color: var(--gh-green);
}
article header h1 + p,
article header h2 + p,
ol li + li,
ul li + li {
  margin-top: 0.25em;
}
ol li > details,
ul li > details {
  margin: 0;
}
p {
  margin: 1em 0;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
aside:first-child,
form legend:first-child + label,
p:first-child {
  margin-top: 0;
}
aside:last-child,
p:last-child {
  margin-bottom: 0;
}
p + ol,
p + ul {
  margin-top: -0.75em;
}
p img,
p picture {
  float: right;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
}
p picture img {
  float: none;
  margin: 0;
}
blockquote {
  padding-left: 2.5em;
}
/* Definition lists are glossaries and indexes: the term in the display face, its description under it, a hairline
   between entries. */
dt {
  font-family: var(--gh-font-display);
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: -0.005em;
}
dt a,
dt a:visited {
  text-decoration: none;
}
dt a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
dd {
  margin: 0.2em 0 0;
  padding: 0;
  color: var(--gh-ink-mid);
}
dd + dt {
  margin-top: 0.9em;
  padding-top: 0.9em;
  border-top: 1px solid var(--gh-hairline);
}
blockquote {
  margin: 0;
}
section + section {
  margin-top: 2.75em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1.25em 0 0;
  font-family: var(--gh-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h1 {
  letter-spacing: -0.025em;
}
h1:focus > a[href^='#'][id]:empty,
h1:hover > a[href^='#'][id]:empty,
h2:focus > a[href^='#'][id]:empty,
h2:hover > a[href^='#'][id]:empty,
h3:focus > a[href^='#'][id]:empty,
h3:hover > a[href^='#'][id]:empty,
h4:focus > a[href^='#'][id]:empty,
h4:hover > a[href^='#'][id]:empty,
h5:focus > a[href^='#'][id]:empty,
h5:hover > a[href^='#'][id]:empty,
h6:focus > a[href^='#'][id]:empty,
h6:hover > a[href^='#'][id]:empty {
  opacity: 1;
}
figure + p,
h1 + details,
h1 + p,
h2 + details,
h2 + p,
h3 + details,
h3 + p,
h4 + details,
h4 + p,
h5 + details,
h5 + p,
h6 + details,
h6 + p {
  margin-top: 0.5em;
}
h1 > a[href^='#'][id]:empty,
h2 > a[href^='#'][id]:empty,
h3 > a[href^='#'][id]:empty,
h4 > a[href^='#'][id]:empty,
h5 > a[href^='#'][id]:empty,
h6 > a[href^='#'][id]:empty {
  position: absolute;
  left: -0.65em;
  opacity: 0;
  text-decoration: none;
  font-weight: 400;
  line-height: 1;
  color: #aaa;
}
@media (min-width: 40rem) {
  h1 > a[href^='#'][id]:empty,
  h2 > a[href^='#'][id]:empty,
  h3 > a[href^='#'][id]:empty,
  h4 > a[href^='#'][id]:empty,
  h5 > a[href^='#'][id]:empty,
  h6 > a[href^='#'][id]:empty {
    left: -0.8em;
  }
}
h1 > a[href^='#'][id]:empty:focus,
h1 > a[href^='#'][id]:empty:hover,
h1 > a[href^='#'][id]:empty:target,
h2 > a[href^='#'][id]:empty:focus,
h2 > a[href^='#'][id]:empty:hover,
h2 > a[href^='#'][id]:empty:target,
h3 > a[href^='#'][id]:empty:focus,
h3 > a[href^='#'][id]:empty:hover,
h3 > a[href^='#'][id]:empty:target,
h4 > a[href^='#'][id]:empty:focus,
h4 > a[href^='#'][id]:empty:hover,
h4 > a[href^='#'][id]:empty:target,
h5 > a[href^='#'][id]:empty:focus,
h5 > a[href^='#'][id]:empty:hover,
h5 > a[href^='#'][id]:empty:target,
h6 > a[href^='#'][id]:empty:focus,
h6 > a[href^='#'][id]:empty:hover,
h6 > a[href^='#'][id]:empty:target {
  opacity: 1;
  box-shadow: none;
  color: #000;
}
h1 > a[href^='#'][id]:empty:target:focus,
h2 > a[href^='#'][id]:empty:target:focus,
h3 > a[href^='#'][id]:empty:target:focus,
h4 > a[href^='#'][id]:empty:target:focus,
h5 > a[href^='#'][id]:empty:target:focus,
h6 > a[href^='#'][id]:empty:target:focus {
  outline: 0;
}
h1 > a[href^='#'][id]:empty::before,
h2 > a[href^='#'][id]:empty::before,
h3 > a[href^='#'][id]:empty::before,
h4 > a[href^='#'][id]:empty::before,
h5 > a[href^='#'][id]:empty::before,
h6 > a[href^='#'][id]:empty::before {
  content: '§ ';
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.75em;
}
h3 {
  font-size: 1.25em;
}
h4 {
  font-size: 1.15em;
}
a abbr,
h5,
h6 {
  font-size: 1em;
}
h6 {
  margin-top: 1em;
}
article + article {
  margin-top: 4em;
}
article header p {
  font-size: 0.6em;
  color: #aaa;
}
article header p + h1,
article header p + h2 {
  margin-top: -0.25em;
}
article header h1 a,
article header h2 a {
  color: #000;
}
article header h1 a:visited,
article header h2 a:visited,
h6,
legend {
  color: #aaa;
}
article > footer {
  margin-top: 1.5em;
  font-size: 0.85em;
}

a:active,
a:hover {
  outline-width: 0;
}
a:hover {
  color: var(--gh-green-deep);
}
abbr {
  margin-right: -0.075em;
  text-decoration: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  letter-spacing: 0.075em;
  font-size: 0.9em;
}
img,
picture {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
audio,
video {
  width: 100%;
  max-width: 100%;
}
figure {
  margin: 1em 0 0.5em;
  padding: 0;
}
figure figcaption {
  opacity: 0.65;
  font-size: 0.85em;
}
table {
  display: inline-block;
  border-spacing: 0;
  border-collapse: collapse;
  overflow-x: auto;
  max-width: 100%;
  text-align: left;
  vertical-align: top;
  background:
    linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%) 0 0,
    linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%) 100% 0;
  background-attachment: scroll, scroll;
  background-size:
    1px 100%,
    1px 100%;
  background-repeat: no-repeat, no-repeat;
}
table caption {
  font-size: 0.9em;
  background: var(--gh-paper);
}
table td,
table th {
  padding: 0.35em 0.75em;
  vertical-align: top;
  font-size: 0.9em;
  border: 1px solid var(--gh-hairline);
  border-top: 0;
  border-left: 0;
}
table td:first-child,
table th:first-child {
  padding-left: 0;
  background-image: linear-gradient(to right, var(--gh-paper) 50%, rgba(252, 251, 246, 0) 100%);
  background-size: 2px 100%;
  background-repeat: no-repeat;
}
table td:last-child,
table th:last-child {
  padding-right: 0;
  border-right: 0;
  background-image: linear-gradient(to left, var(--gh-paper) 50%, rgba(252, 251, 246, 0) 100%);
  background-position: 100% 0;
  background-size: 2px 100%;
  background-repeat: no-repeat;
}
table td:only-child,
table th:only-child {
  background-image:
    linear-gradient(to right, var(--gh-paper) 50%, rgba(252, 251, 246, 0) 100%),
    linear-gradient(to left, var(--gh-paper) 50%, rgba(252, 251, 246, 0) 100%);
  background-position:
    0 0,
    100% 0;
  background-size:
    2px 100%,
    2px 100%;
  background-repeat: no-repeat, no-repeat;
}
table th {
  line-height: 1.2;
}
form {
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 40rem) {
  form {
    max-width: 80%;
  }
}
form label,
form select,
output {
  display: block;
}
form label:not(:first-child) {
  margin-top: 1em;
}
form p label {
  display: inline;
}
form p label + label {
  margin-left: 1em;
}
form input[type],
form select,
form textarea {
  margin-bottom: 1em;
}
form input[type='checkbox'],
form input[type='radio'] {
  margin-bottom: 0;
}
button,
fieldset {
  margin: 0;
  border: 1px solid #aaa;
}
fieldset {
  padding: 0.5em 1em;
}
button {
  outline: 0;
  box-sizing: border-box;
  height: 2em;
  padding: calc(0.25em - 1px) 0.5em;
  font-family: inherit;
  font-size: 1em;
  border-radius: 2px;
  background: #fff;
  display: inline-block;
  width: auto;
  background: #f2f2f2;
  color: #000;
  cursor: pointer;
}
button:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='time']:focus,
input[type='url']:focus,
input[type='week']:focus,
input[type^='date']:focus,
select:focus {
  border: 1px solid #000;
}
button:not([disabled]):hover,
input[type='button']:not([disabled]):hover,
input[type='file']:not([disabled]):hover,
input[type='reset']:not([disabled]):hover,
input[type='submit']:not([disabled]):hover,
select:not([disabled]):hover {
  border: 1px solid #000;
}
button:active,
select:active {
  background-color: #aaa;
}
button[disabled],
select[disabled] {
  color: #aaa;
  cursor: not-allowed;
}
select {
  outline: 0;
  box-sizing: border-box;
  height: 2em;
  margin: 0;
  padding: calc(0.25em - 1px) 0.5em;
  font-family: inherit;
  font-size: 1em;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: #fff;
  display: inline-block;
  width: auto;
  background: #f2f2f2;
  color: #000;
  cursor: pointer;
  padding-right: 1.2em;
  background-position: top 55% right 0.35em;
  background-size: 0.5em;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='rgb(170, 170, 170)' fill-rule='nonzero' d='M1.5 2L3 0H0z'/%3E%3C/svg%3E");
}
select:focus,
select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='rgb(0, 0, 0)' fill-rule='nonzero' d='M1.5 2L3 0H0z'/%3E%3C/svg%3E");
}
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'],
input[type^='date'] {
  outline: 0;
  box-sizing: border-box;
  height: 2em;
  margin: 0;
  padding: calc(0.25em - 1px) 0.5em;
  font-family: inherit;
  font-size: 1em;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: #fff;
  color: #000;
  display: block;
  width: 100%;
  line-height: calc(2em - 1px * 2 - (0.25em - 1px) * 2);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type='email']::-moz-placeholder,
input[type='month']::-moz-placeholder,
input[type='number']::-moz-placeholder,
input[type='password']::-moz-placeholder,
input[type='search']::-moz-placeholder,
input[type='tel']::-moz-placeholder,
input[type='text']::-moz-placeholder,
input[type='time']::-moz-placeholder,
input[type='url']::-moz-placeholder,
input[type='week']::-moz-placeholder,
input[type^='date']::-moz-placeholder {
  color: #aaa;
}
input[type='email']::-webkit-input-placeholder,
input[type='month']::-webkit-input-placeholder,
input[type='number']::-webkit-input-placeholder,
input[type='password']::-webkit-input-placeholder,
input[type='search']::-webkit-input-placeholder,
input[type='tel']::-webkit-input-placeholder,
input[type='text']::-webkit-input-placeholder,
input[type='time']::-webkit-input-placeholder,
input[type='url']::-webkit-input-placeholder,
input[type='week']::-webkit-input-placeholder,
input[type^='date']::-webkit-input-placeholder {
  color: #aaa;
}
input[type='email']:-ms-input-placeholder,
input[type='month']:-ms-input-placeholder,
input[type='number']:-ms-input-placeholder,
input[type='password']:-ms-input-placeholder,
input[type='search']:-ms-input-placeholder,
input[type='tel']:-ms-input-placeholder,
input[type='text']:-ms-input-placeholder,
input[type='time']:-ms-input-placeholder,
input[type='url']:-ms-input-placeholder,
input[type='week']:-ms-input-placeholder,
input[type^='date']:-ms-input-placeholder {
  color: #aaa;
}
input[type='button'],
input[type='reset'],
input[type='submit'] {
  outline: 0;
  box-sizing: border-box;
  height: 2em;
  margin: 0;
  padding: calc(0.25em - 1px) 0.5em;
  font-family: inherit;
  font-size: 1em;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: #fff;
  display: inline-block;
  width: auto;
  background: #f2f2f2;
  color: #000;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type='button']:focus,
input[type='reset']:focus,
input[type='submit']:focus {
  border: 1px solid #000;
}
input[type='button']:active,
input[type='reset']:active,
input[type='submit']:active {
  background-color: #aaa;
}
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
  color: #aaa;
  cursor: not-allowed;
}
input[type='color'] {
  outline: 0;
  box-sizing: border-box;
  height: 2em;
  margin: 0;
  padding: calc(0.25em - 1px) 0.5em;
  font-family: inherit;
  font-size: 1em;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: #fff;
  color: #000;
  display: block;
  line-height: calc(2em - 1px * 2 - (0.25em - 1px) * 2);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 6em;
}
input[type='color']:focus {
  border: 1px solid #000;
}
input[type='color']::-moz-placeholder,
textarea::-moz-placeholder {
  color: #aaa;
}
input[type='color']::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #aaa;
}
input[type='color']:-ms-input-placeholder {
  color: #aaa;
}
input[type='color']:hover {
  border: 1px solid #000;
}
input[type='file'] {
  outline: 0;
  box-sizing: border-box;
  margin: 0;
  padding: calc(0.25em - 1px) 0.5em;
  font-family: inherit;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: #fff;
  background: #f2f2f2;
  color: #000;
  cursor: pointer;
  display: block;
  width: 100%;
  height: auto;
  padding: 0.75em 0.5em;
  font-size: 12px;
  line-height: 1;
}
input[type='file']:focus,
textarea:focus {
  border: 1px solid #000;
}
input[type='file']:active {
  background-color: #aaa;
}
input[type='file'][disabled] {
  color: #aaa;
  cursor: not-allowed;
}
input[type='checkbox'],
input[type='radio'] {
  margin: -0.2em 0.75em 0 0;
  vertical-align: middle;
}
textarea {
  outline: 0;
  box-sizing: border-box;
  margin: 0;
  padding: calc(0.25em - 1px) 0.5em;
  font-family: inherit;
  font-size: 1em;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: #fff;
  color: #000;
  display: block;
  width: 100%;
  line-height: calc(2em - 1px * 2 - (0.25em - 1px) * 2);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 4.5em;
  resize: vertical;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
textarea:-ms-input-placeholder {
  color: #aaa;
}
code,
kbd,
samp,
var {
  font-family: Consolas, 'Lucida Console', Monaco, monospace;
  font-style: normal;
}
pre {
  overflow-x: auto;
  font-size: 0.8em;
  background:
    linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%) 0 0,
    linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%) 100% 0;
  background-attachment: scroll, scroll;
  background-size:
    1px 100%,
    1px 100%;
  background-repeat: no-repeat, no-repeat;
}
pre > code,
summary {
  display: inline-block;
}
pre > code {
  overflow-x: visible;
  box-sizing: border-box;
  min-width: 100%;
  border-right: 3px solid var(--gh-paper);
  border-left: 1px solid var(--gh-paper);
}
hr {
  height: 1px;
  margin: 2em 0;
  border: 0;
  background: #f2f2f2;
}
details[open] {
  padding-bottom: 0.5em;
  border-bottom: 1px solid #f2f2f2;
}
summary {
  font-weight: 700;
  border-bottom: 1px dashed;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
noscript {
  color: #d00000;
}
::selection {
  background: rgba(20, 137, 60, 0.25);
}

/* ------------------------------------------------------------------
   Site chrome. No classes: the header is the one directly under body, the wordmark is the link marked rel="home", and
   the sign-up button is any link that points at the sign-up page.
   ------------------------------------------------------------------ */

body > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em 1.5em;
  max-width: none;
  margin: 0 0 2.5em;
  padding-bottom: 0.75em;
  border-bottom: 1px solid var(--gh-hairline);
}
a[rel~='home'],
a[rel~='home']:visited,
a[rel~='home']:hover {
  font-family: var(--gh-font-display);
  font-size: 1.6em;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gh-green);
  text-decoration: none;
}
/* The wordmark's lockup: the app icon's G tile, then the name. */
a[rel~='home']::before {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.3em;
  vertical-align: -0.08em;
  background: url(/favicon.svg) center / contain no-repeat;
}
/* The nav takes its own row under the wordmark; sign-up lifts out of it to sit opposite the wordmark, so it never
   wraps onto a line by itself. */
body > header nav {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.9em;
}
body > header nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 1.1em;
}
body > header nav li {
  margin: 0;
}
body > header nav li:last-child {
  position: absolute;
  top: 0;
  right: 0;
}
body > header nav a,
body > footer nav a {
  text-decoration: none;
}
body > header nav a:hover,
body > header nav a[aria-current],
body > footer nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The one call to action, wherever it appears. */
a[href='/app/signup'],
a[href='/app/signup']:visited,
a[href='/app/subscribe'],
a[href='/app/subscribe']:visited {
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: 3px;
  background: var(--gh-green);
  color: var(--gh-on-green);
  font-weight: 600;
  text-decoration: none;
}
a[href='/app/signup']:hover,
a[href='/app/subscribe']:hover {
  background: var(--gh-green-deep);
  color: var(--gh-on-green);
  text-decoration: none;
}
main p > a[href='/app/signup']:only-child,
main p > a[href='/app/subscribe']:only-child {
  padding: 0.5em 1.1em;
  font-size: 1.1em;
}

/* Asides are the GeistHaus notes: where an article turns from the theory to what Geist does with it. Geist's G tile
   marks them. */
main aside {
  margin: 3em 0;
  padding: 1.25em 1.4em 1.4em;
  border: 1px solid var(--gh-green-line);
  border-radius: var(--gh-radius-lg);
  background: var(--gh-green-wash);
}
main aside > h2:first-child,
main aside > h3:first-child {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0;
  font-size: 1.3em;
}
main aside > h2:first-child::before,
main aside > h3:first-child::before {
  content: '';
  flex: none;
  width: 1.25em;
  height: 1.25em;
  background: url(/favicon.svg) center / contain no-repeat;
}
main aside p:last-child {
  margin-bottom: 0;
}

mark {
  padding: 0 0.15em;
  background: #ffffb8;
  color: inherit;
}

body > footer nav {
  margin: 0 0 0.75em;
}
body > footer nav li {
  margin-right: 1.25em;
}
body > footer a,
body > footer a:visited {
  color: var(--gh-ink-soft);
}
body > footer a:hover {
  color: var(--gh-green-deep);
}

/* ------------------------------------------------------------------
   Page furniture, still without classes.
   ------------------------------------------------------------------ */

/* The trail above a title ("Personality / Styles"): a paragraph that opens main and sits right on top of the h1. */
main > p:first-child:has(+ h1) {
  margin: 0;
  font-size: 0.85em;
  color: var(--gh-ink-soft);
}
main > p:first-child:has(+ h1) a {
  text-decoration: none;
}
main > p:first-child:has(+ h1) a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
main > p:first-child + h1 {
  margin-top: 0.25em;
}
main > h1:first-child {
  margin-top: 0.5em;
}

/* The lede: an opening paragraph that more prose follows. Legal pages, whose first line is a date or a single
   statement, are left alone. :where() keeps it weak enough for a page's own stylesheet to restyle. */
main > h1 + p:where(:has(+ p, + section)) {
  font-size: 1.08em;
  line-height: 1.45;
}

/* An attribution under an example: small print holding a cite. */
main p > small:only-child:has(> cite) {
  display: block;
  margin-top: -0.5em;
  font-size: 0.85em;
  color: var(--gh-ink-soft);
}
main p > small:only-child:has(> cite)::before {
  content: '— ';
}
main p > small > cite {
  font-style: normal;
}

/* In an index, a heading that only introduces a list of terms ("Level 7: High-Adaptive") reads as a label over it. */
main section > :is(h3, h4):has(+ dl) {
  margin-top: 1.75em;
  font-family: var(--gh-font-mono);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gh-green-deep);
}
main section > h3:has(+ h4) {
  margin-bottom: -0.5em;
}
main section > :is(h3, h4) + dl {
  margin-top: 0.6em;
  padding-top: 0.9em;
  border-top: 1px solid var(--gh-hairline);
}

/* Sources close every article: the last section, a heading and a list. Set small, as a hanging-indent bibliography. */
main > section:last-of-type:has(> h2 + ul:last-child) {
  margin-top: 3.5em;
  padding-top: 1.5em;
  border-top: 1px solid var(--gh-hairline);
}
main > section:last-of-type:has(> h2 + ul:last-child) > h2 {
  margin-top: 0;
  font-size: 1.1em;
}
main > section:last-of-type:has(> h2 + ul:last-child) > ul {
  margin-top: 0.75em;
  padding-left: 0;
  list-style: none;
  font-size: 0.82em;
  line-height: 1.45;
  color: var(--gh-ink-mid);
}
main > section:last-of-type:has(> h2 + ul:last-child) > ul > li {
  padding-left: 1.5em;
  text-indent: -1.5em;
  overflow-wrap: anywhere;
}
main > section:last-of-type:has(> h2 + ul:last-child) > ul > li + li {
  margin-top: 0.5em;
}

/* Pages without sections (the legal and safety pages) are long runs of short headed passages; their headings step
   down a size. */
main > h2 {
  margin-top: 1.75em;
  font-size: 1.35em;
}

/* The plan: a section that carries its own sign-up button is a card. */
main > section:has(> p > a[href='/app/signup']) {
  margin: 2em 0 0;
  padding: 1.5em 1.6em 1.6em;
  border: 1px solid var(--gh-hairline);
  border-radius: var(--gh-radius-xl);
  background: var(--gh-field);
  box-shadow: var(--gh-shadow-md);
}
main > section:has(> p > a[href='/app/signup']) > h2:first-child {
  margin-top: 0;
  font-size: 2.2em;
  letter-spacing: -0.03em;
}
main > section:has(> p > a[href='/app/signup']) small {
  display: block;
  color: var(--gh-ink-soft);
}

/* Checklists, ticked on green dots: what the plan includes, and the principle lists on the sales pages. A sales page
   is one that puts its sign-up button right under its opening (the home page, How It Works). */
main > section:has(> p > a[href='/app/signup']) > ul,
main:has(> h1 + p + p + p > a[href='/app/signup']) > section > ul {
  margin-top: 1em;
  padding-left: 0;
  list-style: none;
}
main > section:has(> p > a[href='/app/signup']) > ul > li,
main:has(> h1 + p + p + p > a[href='/app/signup']) > section > ul > li {
  position: relative;
  padding-left: 1.85em;
}
main > section:has(> p > a[href='/app/signup']) > ul > li + li,
main:has(> h1 + p + p + p > a[href='/app/signup']) > section > ul > li + li {
  margin-top: 0.6em;
}
main > section:has(> p > a[href='/app/signup']) > ul > li::before,
main:has(> h1 + p + p + p > a[href='/app/signup']) > section > ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--gh-green) var(--gh-tick) center / 80% no-repeat;
}

/* In the footer the call to action is a plain link, not a button. */
body > footer a[href='/app/signup'],
body > footer a[href='/app/signup']:visited {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--gh-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
body > footer a[href='/app/signup']:hover {
  background: none;
  color: var(--gh-green-deep);
}

/* Long single words ("Countertransference") must not push a phone screen sideways. */
h1 {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
@media (max-width: 30rem) {
  h1 {
    font-size: 2.15em;
  }
}