/* 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 desktop window always shows, since Natel is
   used from a computer: a phone alone would read as a rival to the phone's
   own contacts app. The phone joins it where there is room. Where the whole
   window would shrink too far, it shows its left part, the list and the start
   of a contact's page. */

.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%; }
.window.cropped { aspect-ratio: 980 / 700; }
.window.cropped img { width: calc(100% * 1280 / 980); max-width: none; }
.phone {
  display: none;
  aspect-ratio: 390 / 744;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0 0 6px var(--surface);
}

/* 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; }
  .window { outline: 1px solid var(--rule); }
}

/* Tablets: the whole window under the text, the phone over its lower right
   corner. */
@media (min-width: 48rem) and (max-width: 71.99rem) {
  .window.cropped { aspect-ratio: auto; }
  .window.cropped img { width: 100%; }
  .composition { max-width: 52rem; }
  .window { width: calc(100% - 6rem); }
  .phone {
    display: block;
    position: absolute;
    right: 0;
    bottom: -2.5rem;
    width: 12rem;
  }
  .shots-figure { padding-bottom: 2.5rem; }
}

/* Laptops: the text beside the window's left part. */
@media (min-width: 72rem) and (max-width: 89.99rem) {
  .hero .wrap {
    grid-template-columns: 23.5rem minmax(0, 1fr);
    align-items: center;
    column-gap: 2.5rem;
  }
}

/* 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;
  }
  .window.cropped { aspect-ratio: auto; }
  .window.cropped img { width: 100%; }
  /* 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 {
    display: block;
    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; }
/* The text sits on the sentence's baseline; only the logo is centred. */
.technology {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  white-space: nowrap;
}
.technology img { align-self: center; 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; }
/* The image line, with its version, fits a phone without scrolling. */
@media (max-width: 30rem) {
  pre { font-size: 0.75rem; padding-inline: 0.75rem; }
}

.requirement { margin-top: 1rem; }

/* 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 .repo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
footer .repo-link svg {
  display: block;
  fill: currentColor;
}
footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
footer nav li { display: flex; }
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; }
}