/* Layout: a red index-card hero like the app's sign-in panel, with the app's
   screens beside the text, then sections where lists use the app's dotted leaders. */

@font-face {
  font-family: "Work Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/work-sans-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: "Work Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/work-sans-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;
}
@font-face {
  font-family: "Big Shoulders Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/big-shoulders-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: "Big Shoulders Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/big-shoulders-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;
}

/* Colours are the app's own tokens (src/index.css). Red marks position
   (bands, tabs), never actions. */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #17181c;
  --muted: #5f6168;
  --wash: #f4f4f3;
  --rule: #e4e4e2;
  --surface: #d8261d;
  --on-surface: #ffffff;
  --tab-rule: rgb(255 255 255 / 0.28);
  --warning: #9a6200;
  --font-sans: "Work Sans Variable", "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Big Shoulders Variable", "Big Shoulders", "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --measure: 66ch;
  --page: 68rem;
  --wide: 76rem;
  --content: 58rem;
  --gutter: max(16px, 4vw);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #121316;
    --ink: #ececec;
    --muted: #a2a4ab;
    --wash: #1b1c20;
    --rule: #2c2d32;
    --surface: #a11f18;
    --on-surface: #ffffff;
    --tab-rule: rgb(255 255 255 / 0.2);
    --warning: #e8b45a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121316;
  --ink: #ececec;
  --muted: #a2a4ab;
  --wash: #1b1c20;
  --rule: #2c2d32;
  --surface: #a11f18;
  --on-surface: #ffffff;
  --tab-rule: rgb(255 255 255 / 0.2);
  --warning: #e8b45a;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

/* The app's icons (src/components/icons.tsx): 24px grid, 2px round stroke. */
.icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.12em;
}

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

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--wash);
  padding: 0.05em 0.3em;
  border-radius: 4px;
}

/* On the right, where the hero has no content to cover. */
.skip {
  position: absolute;
  right: var(--gutter);
  top: -4rem;
  z-index: 10;
  background: var(--paper);
  color: var(--ink);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--surface);
}
.skip:focus { top: 0.5rem; }

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.wide { max-width: var(--wide); }

/* Hero */

.hero {
  position: relative;
  background: var(--surface);
  color: var(--on-surface);
  overflow: hidden;
}
.hero :focus-visible { outline-color: var(--on-surface); }
.hero-text {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  align-content: start;
}
.mark {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.8rem;
  /* White keyline so the band stays visible on red (brand kit rule). */
  box-shadow: 0 0 0 2px var(--on-surface);
}
.wordmark {
  margin: 0.25rem 0 0;
  line-height: 1;
}
.wordmark img { width: clamp(12rem, 34vw, 19rem); }
.headline {
  margin: 0;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 30ch;
}
.lede {
  margin: 0;
  max-width: 46ch;
  font-size: 1.125rem;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--on-surface);
  transition: background-color 120ms, color 120ms;
}
.button.primary {
  background: var(--on-surface);
  color: var(--surface);
}
.button.primary:hover { background: transparent; color: var(--on-surface); }
.button.secondary { color: var(--on-surface); }
.button.secondary:hover { background: var(--on-surface); color: var(--surface); }

/* The thumb index of a paper address book, as on the brand images. */
.tabs { display: none; }
@media (min-width: 60rem) {
  .tabs {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 5.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--tab-rule);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
  }
  .tabs li {
    flex: 1;
    display: grid;
    place-items: center;
    border-bottom: 1px solid var(--tab-rule);
  }
  .tabs li:last-child { border-bottom: 0; }
  .tabs .on {
    background: var(--on-surface);
    color: var(--surface);
  }
  .hero .wrap { padding-right: calc(var(--gutter) + 5.5rem); }
  .skip { right: calc(var(--gutter) + 5.5rem); }
}

/* Screenshots, in the hero. The phone screen is 15rem wide in every layout
   and the desktop window only shows once it can be at least 40rem wide, so
   the shots never shrink as the window grows. */

.hero .wrap {
  padding-block: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  gap: 2.5rem;
}
.shots-figure { margin: 0; }
.composition { position: relative; }
.window {
  border-radius: 0.875rem;
  overflow: hidden;
  background: var(--paper);
}
.window img, .phone img { width: 100%; }
/* Let the red hero frame the screenshot. */
.window img { margin-top: calc(-100% * 6 / 1280); }
.phone {
  width: min(15rem, 70%);
  margin-inline: auto;
  aspect-ratio: 390 / 744;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0 0 6px var(--surface);
}
@media (max-width: 89.99rem) {
  .window { display: none; }
}

/* Phones: the red ends under the buttons and the shot sits on white,
   overlapping the band's edge a little. */
@media (max-width: 47.99rem) {
  .hero { background: var(--paper); }
  .hero-text {
    background: var(--surface);
    box-shadow: 0 0 0 100vmax var(--surface);
    clip-path: inset(-100vmax -100vmax 0 -100vmax);
    padding-bottom: 4.5rem;
  }
  .shots-figure { margin-top: -4rem; }
  .phone {
    outline: 1px solid var(--rule);
    box-shadow: 0 0 0 6px var(--paper);
  }
}

@media (min-width: 48rem) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr) 15rem;
    align-items: center;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .phone { width: 100%; }
}

/* From 90rem the composition takes everything right of a 24rem text
   column, up to 2rem short of the tabs, capped at 60rem. */
@media (min-width: 90rem) {
  .headline { font-size: 1.625rem; max-width: none; }
  .hero .wrap {
    max-width: calc(var(--gutter) + 86.5rem + 6.5rem);
    padding-right: 6.5rem;
    grid-template-columns: 24rem minmax(0, 60rem);
    column-gap: 2.5rem;
  }
  /* Keep controls visible and reserve room down to the phone's bottom. */
  .shots-figure { min-height: calc(9.5rem + 15rem * 744 / 390); }
  .window { width: calc(100% - 13.2rem); }
  .phone {
    position: absolute;
    right: 0;
    top: 9.5rem;
    width: 15rem;
  }
}

/* Sections */

main section {
  padding-block: clamp(2rem, 6vw, 4rem);
}
main section + section { border-top: 1px solid var(--rule); }

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 0.95;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.35rem;
}
p { margin: 0 0 1rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
.note { color: var(--muted); font-size: 0.9375rem; }
.after { margin-top: 1.5rem; }

@media (min-width: 64rem) {
  main section > .wrap {
    max-width: 74rem;
    display: grid;
    grid-template-columns: 14.5rem minmax(0, 1fr);
    column-gap: 2.5rem;
  }
  main section h2 {
    position: sticky;
    top: 2rem;
    align-self: start;
    font-size: 2.25rem;
    margin: 0;
  }
}
.section-body { min-width: 0; }
/* The first item lines up with the section heading. */
.section-body > :first-child { margin-top: 0; }

.directory {
  margin: 1.5rem 0 0;
  display: grid;
  max-width: var(--content);
}
.directory > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: first baseline;
  gap: 0.25rem 1rem;
  padding-block: 0.75rem;
}
.directory dt {
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.directory dd { margin: 0; min-width: 0; }
.directory dt .icon { align-self: flex-start; margin-top: 0.2rem; }
@media (min-width: 48rem) {
  .directory > div {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 0 1rem;
    padding-block: 0.6rem;
  }
}
@media (min-width: 56rem) {
  .directory > div {
    grid-template-columns: 14.5rem minmax(0, 1fr);
    padding-block: 0.7rem;
  }
  .directory dt { white-space: nowrap; }
}

.trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  max-width: var(--content);
}
.trust li {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: 0.85rem;
}
.trust .icon { margin-top: 0.3rem; }
.trust p { margin: 0; }

/* Self-host */

.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 28rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.stats li { display: grid; gap: 0.25rem; }
.stats strong {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.stat-unit { font-size: 1.25rem; }
.stat-label { color: var(--muted); font-size: 1rem; }
.stats + .note { margin-top: 0.75rem; }
.technology {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  vertical-align: baseline;
  white-space: nowrap;
}
.technology img { width: 1.2rem; height: 1.2rem; object-fit: contain; }
.technology .go-logo { width: 1.75rem; }

.install { margin-top: 1.75rem; max-width: 50rem; }
.panel + .panel { margin-top: 2rem; }
.panel-title { margin-bottom: 0.5rem; }
.panel p { margin: 0.75rem 0 0; }
.panel > :first-child { margin-top: 0; }
.tablist {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--rule);
}
.tab {
  font: inherit;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.is-tabs .panel { padding-top: 1.25rem; }
.is-tabs .panel + .panel { margin-top: 0; }
.is-tabs .panel:focus-visible { outline-offset: 6px; border-radius: 4px; }
.plain-steps {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.4rem;
}

.callout {
  margin: 1.5rem 0 0;
  max-width: 50rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 5%, transparent);
  border-radius: 0.625rem;
}
.callout strong { font-weight: 700; }

pre {
  margin: 0.6rem 0 0;
  max-width: 50rem;
  padding: 0.9rem 1rem;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: 0.625rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.55;
}
pre code { background: none; padding: 0; font-size: inherit; }

/* Footer */

footer {
  border-top: 6px solid var(--surface);
  background: var(--wash);
  color: var(--muted);
  font-size: 0.9375rem;
}
footer .wrap {
  padding-block: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}
footer p { margin: 0; }
footer .brandline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 24rem;
}
footer .brandline img { width: 2rem; height: 2rem; flex: none; }
footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
footer a { color: var(--ink); }
/* Once the nav wraps under the license text, align it with that text. */
@media (max-width: 60rem) {
  footer nav { padding-left: 2.75rem; }
}