@font-face {
  font-family: Manrope;
  src: url("/assets/manrope-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/assets/manrope-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/assets/manrope-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/assets/manrope-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/assets/manrope-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/jetbrains-mono-variable.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}
/* Gilroy is the typeface of the NoSix product. The website uses it only
   inside the product screens and details. Heavy sits between ExtraBold and
   Black, so it is declared at 850. The metric overrides are the font's own
   ascent and descent, which the design tool uses. Without them Windows
   browsers take a taller pair of values and set the text lower. */
@font-face {
  font-family: Gilroy;
  src: url("/assets/gilroy-500.woff2") format("woff2");
  font-weight: 500;
  ascent-override: 77.4%;
  descent-override: 22.6%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url("/assets/gilroy-700.woff2") format("woff2");
  font-weight: 700;
  ascent-override: 77.3%;
  descent-override: 22.7%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url("/assets/gilroy-800.woff2") format("woff2");
  font-weight: 800;
  ascent-override: 77.3%;
  descent-override: 22.7%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url("/assets/gilroy-850.woff2") format("woff2");
  font-weight: 850;
  ascent-override: 77.5%;
  descent-override: 22.5%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url("/assets/gilroy-900.woff2") format("woff2");
  font-weight: 900;
  ascent-override: 77.3%;
  descent-override: 22.7%;
  line-gap-override: 0%;
  font-display: swap;
}
:root {
  --bg: #080d0b;
  --surface: #111a15;
  --raised: #19271f;
  --green: #57d990;
  --deep: #123d29;
  --text: #f2f6ef;
  --muted: #a6b9ac;
  --border: #2a3a30;
  --paper: #eaf0e6;
  --ink: #13251b;
  --mono: "JetBrains Mono", monospace;
  --gutter: 64px;
  color-scheme: dark;
  font-family: Manrope, Arial, sans-serif;
  background: var(--bg);
  font-synthesis: none;
}
/* Editorial additions use the existing palette and spacing, without changing
   the approved hero or product previews. */
.education h1,
.education h2,
.education > .container > p {
  max-width: 1000px;
}
.education-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.education-card h3,
.education-reading h3 {
  font-size: 24px;
  line-height: 1.35;
}
.education-card p,
.education-reading p {
  font-size: 18px;
  line-height: 1.65;
}
.education-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}
.education-links .text-link {
  max-width: 100%;
}
.education-note {
  border-left: 2px solid var(--green);
  padding-left: 24px;
  color: var(--muted);
}
.education-reading {
  max-width: 920px;
  display: grid;
  gap: 40px;
}
.education-table {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.education-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}
/* The field names are short, so the two descriptive columns share the
   remaining width and their text starts on one grid with the cards above. */
.education-table th:first-child {
  width: 28%;
}
.education-table th:nth-child(n + 2) {
  width: 36%;
}
.education-table th,
.education-table td {
  min-width: 150px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 16px;
  line-height: 1.6;
}
.education-table thead {
  background: var(--surface);
}
.education-table th {
  font-weight: 700;
}
.education-table tr:last-child td,
.education-table tr:last-child th {
  border-bottom: 0;
}
.education-download {
  align-self: flex-start;
  gap: 40px;
  max-width: 100%;
}
.button.education-download:not(.w) {
  width: fit-content;
}
.glossary-example {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .education-grid {
    grid-template-columns: 1fr;
  }
}
/* On narrow screens each record becomes a card: the field is its title and
   every value carries its column name, so nothing hides off to the side. */
@media (max-width: 760px) {
  .education-table {
    overflow: visible;
    border: 0;
  }
  .education-table table,
  .education-table tbody,
  .education-table tr,
  .education-table th,
  .education-table td {
    display: block;
    width: auto;
    min-width: 0;
  }
  .education-table thead {
    display: none;
  }
  .education-table tbody {
    display: grid;
    gap: 16px;
  }
  .education-table tr {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    padding: 20px;
  }
  .education-table tbody th,
  .education-table tbody td,
  .education-table tbody tr > :last-child {
    padding: 0;
    border-bottom: 0;
  }
  .education-table th:first-child {
    width: auto;
    margin-bottom: 12px;
  }
  .education-table td + td {
    margin-top: 12px;
  }
  .education-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 14px;
    line-height: 22px;
  }
}
/* Text colours follow the surface: dark by default, ink on paper. */
:root,
.dark {
  --heading: var(--text);
  --body: var(--muted);
  --accent: var(--green);
  --rule: var(--border);
  color: var(--text);
}
.dark {
  color-scheme: dark;
}
.paper {
  --heading: var(--ink);
  --body: var(--ink);
  --accent: var(--ink);
  --rule: var(--ink);
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
/* In-page links and keyboard focus stop below the sticky header. The room
   is kept on the target, not on the page: with scroll-padding on the page
   the browser treats the top 112px as out of view, and scrolls up whenever
   the mouse is held and moved there. */
:target,
[id],
:focus-visible {
  scroll-margin-top: 112px;
}
h1,
h2,
h3,
p,
figure,
ul,
ol,
dl,
dd {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
button,
a,
input,
summary {
  -webkit-tap-highlight-color: transparent;
}
button,
summary {
  cursor: pointer;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 6px;
  border-radius: 3px;
}
.paper :focus-visible {
  outline-color: var(--ink);
}
.paper .dark :focus-visible {
  outline-color: var(--green);
}
[hidden] {
  display: none !important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 16px;
  background: var(--green);
  color: var(--ink);
}
.skip-link:focus {
  top: 12px;
}
/* Type scale from the Figma text styles. */
h1,
h2,
h3 {
  font-weight: 600;
  color: var(--heading);
}
h1 {
  font-size: 64px;
  line-height: 72px;
}
h2 {
  font-size: 52px;
  line-height: 60px;
}
h3 {
  font-size: 26px;
  line-height: 34px;
}
p,
dd {
  font-size: 18px;
  line-height: 29px;
  color: var(--body);
}
.t-48,
.t-42,
.t-32,
.t-26,
.t-22 {
  font-weight: 600;
  color: var(--heading);
}
.t-48 {
  font-size: 48px;
  line-height: 54px;
}
/* Long words in a narrow column break instead of running out of it. */
h1,
h2,
h3 {
  overflow-wrap: break-word;
}
/* A price stays on one line; in a narrow card it gets smaller instead. */
.plan .t-48 {
  white-space: nowrap;
  font-size: min(48px, 13.7cqi);
}
.plan {
  container-type: inline-size;
}
.t-42 {
  font-size: 42px;
  line-height: 47px;
}
.t-32 {
  font-size: 32px;
  line-height: 36px;
}
.t-26 {
  font-size: 26px;
  line-height: 34px;
}
.t-22 {
  font-size: 22px;
  line-height: 25px;
}
.lead {
  font-size: 20px;
  line-height: 30px;
}
.small {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}
.eyebrow {
  font: 500 11px/17px var(--mono);
  text-transform: uppercase;
  /* Several captions space their slash with two spaces on each side. */
  white-space: pre-wrap;
  color: var(--accent);
}
.mono-32,
.mono-48 {
  font: 500 32px/40px var(--mono);
  color: var(--heading);
}
.mono-48 {
  font-size: 48px;
  line-height: 54px;
}
.pre {
  white-space: pre-wrap;
}
/* Figma rounds a line's baseline to the nearest pixel where browsers round it
   down, so these text styles sit one pixel lower in the design. */
h1,
h2,
.t-42,
.t-22,
.lead,
.mono-32,
.hero-operations strong {
  position: relative;
  top: 1px;
}
/* A label beside an icon is placed by eye. The lowercase of Manrope sits
   about a pixel below the middle of its line, so a label centred as a box
   looks low next to an arrow and low inside a button. The label is raised
   until the middle of its letters meets the middle of the icon. */
.button > span:first-child,
.text-link > span:first-child {
  position: relative;
  top: -1px;
}
.t-48,
.t-32,
.t-26,
.mono-48 {
  top: 0;
}
.c-text {
  color: var(--text);
}
.c-muted {
  color: var(--muted);
}
.c-green {
  color: var(--green);
}
.c-ink {
  color: var(--ink);
}
/* Layout primitives. They mirror the auto-layout frames in the design:
   a stack or row, the gap between its children, and fixed frame widths. */
.container {
  width: min(100% - var(--gutter) * 2, 1312px);
  margin-inline: auto;
}
.stack {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  align-items: flex-start;
}
.stack > *,
.row > * {
  min-width: 0;
}
.ac {
  align-items: center;
}
/* Rows that mix text sizes sit on one baseline. The design rounds every
   style's baseline to a whole pixel, so each item drops by the difference
   between the row's baseline (--base) and its own (--own). */
/* The featured guide summary sits beside the middle of the taller cover. */
@media (min-width: 1081px) {
  .feature-guide {
    align-items: center;
  }
}
.ab {
  --base: 27px;
}
.ab.b-32 {
  --base: 32px;
}
.ab.b-18 {
  --base: 18px;
}
.ab > * {
  margin-top: calc(var(--base) - var(--own, var(--base)));
}
.ab > h3,
.ab > .t-26,
.ab > .stack {
  --own: 27px;
}
.ab > p,
.ab > dd {
  --own: 21px;
}
.ab > .eyebrow {
  --own: 12px;
}
.ab > .text-link {
  --own: 18px;
}
.ab > .mono-32 {
  --own: 32px;
}
/* A small number beside a link: the middle of its digits meets the middle
   of the arrow and of the link's capitals, so it does not hang on the
   baseline. */
.ab.b-18 > .eyebrow {
  --own: 15px;
}
.jb {
  justify-content: space-between;
}
/* A link that closes a row of text keeps its words on one line and sits at
   the far edge, beside the middle of the text. The text gives way, not the
   link. */
.row.jb.ac > .text-link {
  flex: none;
}
.grow {
  flex: 1 1 0;
}
.w {
  width: var(--w);
  max-width: 100%;
}
/* A button is at least as wide as in the design and grows with a longer
   label, as the translated pages need. */
.button.w {
  width: fit-content;
  min-width: min(var(--w), 100vw - 2 * var(--gutter));
}
.g-0 {
  gap: 0;
}
.g-8 {
  gap: 8px;
}
.g-12 {
  gap: 12px;
}
.g-16 {
  gap: 16px;
}
.g-18 {
  gap: 18px;
}
.g-20 {
  gap: 20px;
}
.g-24 {
  gap: 24px;
}
.g-28 {
  gap: 28px;
}
.g-32 {
  gap: 32px;
}
.g-36 {
  gap: 36px;
}
.g-40 {
  gap: 40px;
}
.g-48 {
  gap: 48px;
}
.g-56 {
  gap: 56px;
}
.g-64 {
  gap: 64px;
}
.g-80 {
  gap: 80px;
}
.g-90 {
  gap: 90px;
}
.g-96 {
  gap: 96px;
}
.g-100 {
  gap: 100px;
}
.g-120 {
  gap: 120px;
}
.p-12 {
  padding: 12px;
}
.p-16 {
  padding: 16px;
}
.p-24 {
  padding: 24px;
}
.p-28 {
  padding: 28px;
}
.p-32 {
  padding: 32px;
}
.p-40 {
  padding: 40px;
}
.p-48 {
  padding: 48px;
}
.p-64 {
  padding: 64px;
}
.r-16 {
  border-radius: 16px;
}
.r-20 {
  border-radius: 20px;
}
.r-24 {
  border-radius: 24px;
}
.surface {
  background: var(--surface);
}
.raised {
  background: var(--raised);
}
/* The standard border colour disappears on deep green. */
.green {
  --rule: rgb(87 217 144 / 25%);
  background: var(--deep);
}
.card {
  background: var(--bg);
}
.ink-panel {
  background: var(--ink);
}
.section {
  padding: 64px 0;
}
.centered > .container {
  align-items: center;
  text-align: center;
}
.centered > .container > .frame,
.centered > .container > .left {
  align-self: stretch;
  text-align: left;
}
.rule {
  flex: none;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--rule);
}
/* Icons are the Figma Iconly exports, tinted with the current text colour. */
.icon {
  display: block;
  flex: none;
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
  background-color: currentColor;
  -webkit-mask: var(--icon) center / 100% 100% no-repeat;
  mask: var(--icon) center / 100% 100% no-repeat;
}
.icon-arrow {
  --icon: url("/assets/arrow.svg");
}
.icon-scroll-down {
  --icon: url("/assets/scroll-down.svg");
}
.icon-down {
  --icon: url("/assets/down.svg");
  --icon-size: 20px;
}
.icon-down-16 {
  --icon: url("/assets/down-16.svg");
  --icon-size: 16px;
}
.icon-globe {
  --icon: url("/assets/globe.svg");
  --icon-size: 20px;
}
.icon-search {
  --icon: url("/assets/search.svg");
  --icon-size: 20px;
}
.icon-building {
  --icon: url("/assets/building.svg");
}
.icon-chart {
  --icon: url("/assets/chart.svg");
}
.icon-document {
  --icon: url("/assets/document.svg");
}
.icon-chat {
  --icon: url("/assets/chat.svg");
}
.icon-lamp {
  --icon: url("/assets/lamp.svg");
}
.icon-pitch-field {
  --icon: url("/assets/pitch-field.svg");
}
.icon-location {
  --icon: url("/assets/location.svg");
}
.icon-temple {
  --icon: url("/assets/temple.svg");
}
.icon-book {
  --icon: url("/assets/book.svg");
}
.icon-calculator {
  --icon: url("/assets/calculator.svg");
}
.icon-info {
  --icon: url("/assets/info.svg");
}
.icon-messages {
  --icon: url("/assets/messages.svg");
}
.icon-update {
  --icon: url("/assets/update.svg");
}
.icon-building-30 {
  --icon: url("/assets/building-30.svg");
  --icon-size: 30px;
}
.icon-chart-30 {
  --icon: url("/assets/chart-30.svg");
  --icon-size: 30px;
}
.icon-lamp-30 {
  --icon: url("/assets/lamp-30.svg");
  --icon-size: 30px;
}
.icon-building-32 {
  --icon: url("/assets/building-32.svg");
  --icon-size: 32px;
}
.icon-chart-32 {
  --icon: url("/assets/chart-32.svg");
  --icon-size: 32px;
}
.icon-lamp-32 {
  --icon: url("/assets/lamp-32.svg");
  --icon-size: 32px;
}
.icon-chat-32 {
  --icon: url("/assets/chat-32.svg");
  --icon-size: 32px;
}
.icon-chat-28 {
  --icon: url("/assets/chat-28.svg");
  --icon-size: 28px;
}
.card > .icon,
.prompts .icon,
.hero-operations .icon {
  color: var(--green);
}
.button,
.text-link {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}
.button {
  justify-content: space-between;
  height: 56px;
  padding: 16px;
  border-radius: 8px;
  white-space: nowrap;
  transition:
    background 0.18s,
    transform 0.18s;
}
.button:not(.w) {
  width: 100%;
}
.button > span:first-child {
  flex: 1;
}
.button.primary {
  background: var(--green);
  color: var(--ink);
}
.button.primary:hover {
  background: #75e6a4;
  transform: translateY(-2px);
}
.button.secondary {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}
.button.secondary:hover {
  background: var(--raised);
}
.surface .button.secondary:hover,
.plan .button.secondary:hover {
  background: var(--border);
}
/* A text link hugs its label: the arrow follows the text at the link's
   16px gap instead of sitting at the far end of a fixed-width box. */
.text-link,
.text-link.w {
  width: fit-content;
}
.text-link {
  min-height: 24px;
  color: var(--heading);
}
.text-link .icon {
  color: var(--accent);
  transition: transform 0.18s;
}
.text-link:hover > span:first-child {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.text-link:hover .icon {
  transform: translateX(4px);
}
.frame {
  margin: 0;
}
.photo {
  flex: 0 1 auto;
  border-radius: 20px;
  object-fit: cover;
}
/* Product interface details. Each is drawn at the size of the product design
   and scales with its container: --u is one design pixel. The outer box is
   the 16px-rounded window the design shows them through. */
.ui {
  container-type: inline-size;
  overflow: hidden;
  border-radius: 16px;
  /* Gilroy has no subscript 2, so that glyph falls through to Manrope. */
  --ui-font: Gilroy, Manrope, Arial, sans-serif;
  --ui-text: #c3dbc9;
  --ui-line: #28292a;
}
/* The design shows each detail through a whole-pixel window. */
/* The recommendation card keeps the shape of the design while its content
   fits. In a narrower window the content stacks and gets taller: the window
   then grows with it instead of cutting it off, which a clipping box would
   not do. The card has its own rounded corners. */
.ui-rec {
  aspect-ratio: 1216 / 258;
  overflow: visible;
}
.ui-fac {
  aspect-ratio: 532 / 414;
}
.ui-trend {
  aspect-ratio: 808 / 526;
}
.ui-compare {
  aspect-ratio: 688 / 448;
}
/* A detail card covers its window and takes the window's corner. Its own
   corner scales with the card and would otherwise show as a second curve
   inside the window's. */
.ui > .rec-card,
.ui > .fac-card,
.ui > .chart-card {
  min-height: 100%;
  border-radius: 16px;
}
.ui-card {
  --u: max(1px, calc(100cqi / var(--ui-w, 1008)));
  font-family: var(--ui-font);
  color: #fff;
  border-radius: calc(16 * var(--u));
  background-color: #101314;
  /* An inset shadow, not a border: borders snap to whole pixels. */
  box-shadow: inset 0 0 0 var(--u) #232427;
}
/* Undo the page's paragraph style at every width, without outranking the
   classes below. */
html :where(.ui-card, .app) p,
html :where(.ui-card, .app) li {
  max-width: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.ui-card img {
  max-width: none;
}
.tone-green {
  --tone: #01a828;
  --tone-fill: #01a8281a;
}
.tone-emerald {
  --tone: #2ca860;
  --tone-fill: #2ca8601a;
}
.tone-mint {
  --tone: #50be7e;
  --tone-fill: #50be7e1a;
}
.tone-amber {
  --tone: #e3a64e;
  --tone-fill: #e3a64e1a;
}
.tone-mist {
  --tone: #c3dbc9;
  --tone-fill: #c3dbc91a;
}
.tone-scope-1 {
  --tone: #4bb276;
}
.tone-scope-2 {
  --tone: #c7c009;
}
.tone-scope-3 {
  --tone: #e88d2a;
}
.ui-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--tone-fill);
}
.ui-tile img {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}
.ui-tile.lg {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: calc(16 * var(--u));
}
.ui-tile.lg img {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
}
.ui-tile.md {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-radius: calc(16 * var(--u));
}
.ui-tile.md img {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
}
.ui-tile.sm {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border-radius: calc(8 * var(--u));
}
.ui-tile.sm img {
  width: calc(19.2 * var(--u));
  height: calc(19.2 * var(--u));
}
.ui-chip {
  flex: none;
  padding: calc(3.5 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--tone-fill);
  color: var(--tone);
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 700;
}
.ui-stat {
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--u));
}
.ui-stat p {
  display: flex;
  flex-direction: column;
  padding-top: var(--u);
}
.ui-stat b {
  font: 700 calc(18 * var(--u)) / calc(22 * var(--u)) var(--mono);
}
.ui-stat span {
  color: var(--ui-text);
  font-size: calc(14 * var(--u));
  line-height: calc(17 * var(--u));
  font-weight: 500;
}
.ui-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  width: calc(150 * var(--u));
  height: calc(40 * var(--u));
  padding-inline: calc(16 * var(--u));
  border: var(--u) solid var(--ui-line);
  border-radius: calc(8 * var(--u));
  background: #19191c;
  font-size: calc(14 * var(--u));
  font-weight: 700;
}
.ui-select img {
  width: calc(8 * var(--u));
  height: calc(6 * var(--u));
}
.ui-more {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin-inline-start: auto;
  color: var(--tone, #fff);
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 700;
}
.ui-more img {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.ui-legend {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: var(--tone);
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 500;
}
.ui-legend i {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--tone);
  box-shadow: 0 0 calc(4 * var(--u))
    color-mix(in srgb, var(--tone) 25%, transparent);
}
.ui-legend i::after {
  content: "";
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #fff;
  box-shadow: 0 0 calc(4 * var(--u)) #00000040;
}
.ui-legend b {
  font-weight: 800;
}
.ui-legend em {
  font-style: normal;
  opacity: 0.6;
}
.rec-card {
  min-height: calc(214 * var(--u));
  padding: calc(24 * var(--u));
  background-image: radial-gradient(
    calc(72 * var(--u)) calc(56 * var(--u)) at calc(64 * var(--u))
      calc(166 * var(--u)),
    #01a82808,
    transparent
  );
}
.rec-head {
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--u));
}
.rec-effort {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
}
.rec-copy {
  flex: 1;
  min-width: 0;
}
.rec-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
  font-weight: 700;
}
.ui-card .rec-body {
  margin-top: calc(8 * var(--u));
  color: var(--ui-text);
  font-size: calc(12 * var(--u));
  line-height: calc(18 * var(--u));
  font-weight: 500;
}
/* Opens the reasoning behind a recommendation. It hangs into the space
   above the stats so the card keeps its height. */
.rec-why {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(6 * var(--u));
  margin: calc(2 * var(--u)) 0 calc(-9 * var(--u));
  color: #50be7e;
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 700;
}
.rec-why img {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
}
.rec-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(16 * var(--u)) calc(40 * var(--u));
  margin-top: calc(15.5 * var(--u));
  padding-top: calc(16.5 * var(--u));
  background: linear-gradient(var(--ui-line), var(--ui-line)) top / 100%
    var(--u) no-repeat;
}
.rec-stats .ui-select {
  margin-inline-start: auto;
}
/* The facility card keeps its proportions at any size: it sits inside the
   pitch illustration, which scales as one picture. */
.fac-card {
  --ui-w: 492;
  --u: calc(100cqi / 492);
  display: flex;
  flex-direction: column;
  padding: calc(16 * var(--u)) calc(24 * var(--u));
  background-image: radial-gradient(
    calc(72 * var(--u)) calc(56 * var(--u)) at calc(64 * var(--u))
      calc(79 * var(--u)),
    #01a82808,
    transparent
  );
}
.fac-head {
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--u));
}
.fac-name {
  padding-top: calc(8 * var(--u));
}
.fac-name p:first-child {
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
  font-weight: 700;
}
.ui-card .fac-name p:last-child {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-top: calc(3 * var(--u));
  color: var(--ui-text);
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 500;
}
.fac-name i {
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 50%;
  background: var(--ui-text);
}
.fac-actions {
  display: flex;
  gap: calc(8 * var(--u));
  margin-inline-start: auto;
}
.fac-actions img {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}
.fac-row {
  display: flex;
  align-items: center;
  height: calc(23 * var(--u));
  margin-top: calc(16 * var(--u));
}
.fac-count {
  display: flex;
  align-items: center;
  font-size: calc(14 * var(--u));
  font-weight: 500;
}
.fac-count img {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-inline-end: calc(8 * var(--u));
}
.fac-count b {
  margin-inline-end: calc(4 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 900;
}
.fac-total {
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--u));
  margin-top: calc(15.5 * var(--u));
  margin-inline-start: calc(-4 * var(--u));
  padding-top: calc(22 * var(--u));
  background: linear-gradient(var(--ui-line), var(--ui-line)) calc(4 * var(--u))
    0 / calc(100% - 4 * var(--u)) var(--u) no-repeat;
}
.ui-donut {
  position: relative;
  flex: none;
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
}
.ui-donut svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ui-donut p {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 500;
}
.ui-donut b {
  font-family: var(--mono);
  font-weight: 800;
}
.fac-figure {
  padding-top: calc(2 * var(--u));
}
.fac-figure p:first-child {
  font: 600 calc(32 * var(--u)) / calc(42 * var(--u)) var(--mono);
}
.ui-card .fac-figure p:nth-child(2) {
  color: var(--ui-text);
  font-size: calc(14 * var(--u));
  line-height: calc(19 * var(--u));
  font-weight: 400;
}
.ui-card .fac-figure p:last-child {
  display: flex;
  align-items: center;
  gap: calc(3.5 * var(--u));
  margin-top: calc(6 * var(--u));
  color: var(--ui-text);
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  font-weight: 500;
}
.fac-figure img {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin-inline-end: calc(0.5 * var(--u));
}
.fac-figure p:last-child b {
  color: #ca3f64;
  font-weight: 850;
}
.fac-scopes {
  display: flex;
  justify-content: space-between;
  margin-top: calc(22 * var(--u));
}
.ui-scope p:first-child {
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--u));
  margin-bottom: calc(4 * var(--u));
  font: 600 calc(14 * var(--u)) / calc(18 * var(--u)) var(--mono);
}
.ui-scope p:first-child span {
  color: var(--ui-text);
  font: 500 calc(10 * var(--u)) / calc(12 * var(--u)) var(--ui-font);
}
.fac-recs {
  display: flex;
  align-items: center;
  height: calc(48 * var(--u));
  margin-top: calc(24 * var(--u));
  padding-inline: calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #e3a64e1a;
  font-size: calc(12 * var(--u));
  font-weight: 500;
}
.fac-recs > b {
  margin-inline: calc(16 * var(--u)) calc(8 * var(--u));
  font: 600 calc(20 * var(--u)) / calc(26 * var(--u)) var(--mono);
}
/* The conversation is a slice of the chat panel, so it has no card edge. */
.chat {
  --ui-w: 920;
  padding: calc(16 * var(--u));
  border-radius: 0;
  background-color: #101214;
  box-shadow: none;
  font-size: calc(14 * var(--u));
  font-weight: 500;
}
.chat-user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(16 * var(--u));
}
.ui-card .chat-user p {
  padding: calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #50be7e1a;
  color: var(--ui-text);
  line-height: calc(17 * var(--u));
}
.chat-user span {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #50be7e30;
  color: #50be7e;
  font-size: calc(24 * var(--u));
  font-weight: 850;
}
.chat-reply {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  margin-top: calc(24 * var(--u));
  line-height: calc(20 * var(--u));
}
.chat-reply + .chat-user {
  margin-top: calc(24 * var(--u));
}
.chart-card {
  --ui-w: 492;
  --u: calc(100cqi / 492);
}
.chart-card svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
}
.chart-card text {
  dominant-baseline: central;
  fill: var(--tone, var(--ui-text));
  font: 700 10px var(--ui-font);
}
.chart-card [class*="tone-"] {
  color: var(--tone);
}
.chart-card .chart-title {
  font-size: 14px;
}
.chart-card .chart-key {
  font-size: 12px;
  font-weight: 500;
}
.chart-key tspan {
  font-weight: 800;
}
/* Scope markers glow in their colour, and their white centre sits on a soft shadow. */
.chart-mark {
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--tone) 25%, transparent));
}
.chart-mark-dot {
  filter: drop-shadow(0 0 2px #00000040);
}
.chart-card .chart-value {
  font-family: var(--mono);
}
.chart-line {
  stroke: var(--tone);
  stroke-linecap: round;
  filter: drop-shadow(
    0 4px 8px color-mix(in srgb, var(--tone) 15%, transparent)
  );
}
/* Scroll interactions. They apply only while the root has `motion`, which the
   page head sets when the visitor has not asked for reduced motion.

   Charts draw themselves when their window comes into view: the script adds
   `drawn` to the window. Every line has a path length of 1, so a dash of 1
   hides it and an offset of 0 shows it. Curves run left to right, bars grow
   from the axis, and --i orders them. */
.motion .ui .chart-line,
.motion .ui .ring-arc {
  stroke-dasharray: 1 1;
  transition:
    stroke-dashoffset 1.3s cubic-bezier(0.45, 0, 0.2, 1)
      calc(var(--i, 0) * 70ms + 250ms),
    opacity 0.2s linear calc(var(--i, 0) * 70ms + 250ms);
}
.motion .ui .chart-line.bar {
  transition-duration: 0.8s, 0.2s;
}
.motion .ui:not(.drawn) .chart-line,
.motion .ui:not(.drawn) .ring-arc {
  stroke-dashoffset: 1;
  opacity: 0;
  transition: none;
}
.motion .ui:not(.drawn) .chart-line.bar {
  stroke-dashoffset: -1;
}
.motion .ui .chart-value,
.motion .ui .chart-tip {
  transition: opacity 0.5s ease calc(var(--i, 6) * 70ms + 900ms);
}
.motion .ui:not(.drawn) .chart-value,
.motion .ui:not(.drawn) .chart-tip {
  opacity: 0;
  transition: none;
}
/* Sections arrive as the visitor reaches them: each part of a section, and
   each item of a row, fades in and rises 24px once. The script adds `in`. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
}
.motion main .section > .container > :not(.row):not(.in),
.motion main .section > .container > .row > :not(.in),
.motion .site-footer > .container > :not(.in) {
  opacity: 0;
}
.motion main .section > .container > .in:not(.row),
.motion main .section > .container > .row > .in,
.motion .site-footer > .container > .in {
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: var(--wait, 0ms);
}
@container (max-width: 520px) {
  .ui-rec .rec-head {
    flex-direction: column;
    gap: calc(16 * var(--u));
  }
  .ui-rec .rec-effort {
    flex-direction: row;
    gap: calc(12 * var(--u));
  }
  .ui-rec .rec-stats {
    column-gap: calc(16 * var(--u));
  }
  .ui-rec .rec-stats .ui-stat {
    flex: 1 1 40%;
  }
  .ui-rec .rec-stats .ui-select {
    width: 100%;
  }
}
/* Full product screens: the design's 1440 x 1024 canvas, scaled as one
   picture. Lengths are design pixels times --u. A taller screen sets its
   height in --h. */
.ui-screen {
  aspect-ratio: 1440 / 1024;
  border-radius: 12px;
  background: #090a0c;
}
.app {
  --u: calc(100cqi / 1440);
  position: relative;
  display: grid;
  grid-template-columns: calc(288 * var(--u)) minmax(0, 1fr);
  height: calc(var(--h, 1024) * var(--u));
  overflow: hidden;
  background:
    radial-gradient(
      calc(900 * var(--u)) calc(640 * var(--u)) at 100% 100%,
      #0f2a1638,
      transparent
    ),
    #090a0c;
  color: #fff;
  font: 500 calc(14 * var(--u)) / calc(17 * var(--u)) var(--ui-font);
  text-align: left;
  cursor: default;
}
.app .ui-card {
  --u: calc(100cqi / 1440);
}
.app img[width] {
  flex: none;
  width: calc(var(--s) * var(--u));
  height: calc(var(--s) * var(--u));
}
.app img[width="12"] {
  --s: 12;
}
.app img[width="16"] {
  --s: 16;
}
.app img[width="24"] {
  --s: 24;
}
.app img[width="32"] {
  --s: 32;
}
.app img[width="40"] {
  --s: 40;
}
/* Icons that take the colour of their label. */
.app i[style*="--icon"] {
  flex: none;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.tone-orange {
  --tone: #ff993e;
  --tone-fill: #ff993e1a;
}
.tone-red {
  --tone: #ca3f64;
  --tone-fill: #ca3f641a;
}
.ui-tile.r8 {
  border-radius: calc(8 * var(--u));
}
.ui-tile.xl {
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
}
.app-side {
  position: relative;
  background: linear-gradient(180deg, #0d170e, #0b110c 55%, #0a0f0b);
}
.app-brand {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(32 * var(--u));
  width: calc(136 * var(--u));
}
.app .app-brand img:first-child {
  width: calc(29.6 * var(--u));
  height: calc(33.9 * var(--u));
}
.app .app-brand img:nth-child(2) {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(5 * var(--u));
  width: calc(96 * var(--u));
  height: calc(24.5 * var(--u));
}
.app-brand span {
  position: absolute;
  left: 0;
  top: calc(40.3 * var(--u));
  color: #50be7e;
  font-size: calc(9.88 * var(--u));
  line-height: calc(12 * var(--u));
  white-space: nowrap;
}
.app-nav {
  position: absolute;
  left: calc(24 * var(--u));
  top: calc(145 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
  width: calc(240 * var(--u));
  color: #e5ffec;
  font-size: calc(16 * var(--u));
  line-height: calc(19 * var(--u));
}
.app-nav li {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  height: calc(24 * var(--u));
  padding: calc(1 * var(--u)) calc(16 * var(--u)) 0;
}
.app-nav li i {
  margin-top: calc(-1 * var(--u));
}
/* The current page is a taller tab that overlaps the 32px rhythm. */
.app-nav li.on {
  position: relative;
  height: calc(56 * var(--u));
  margin-block: calc(-8 * var(--u));
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 calc(16 * var(--u));
  background: #50be7e1a;
  color: #01a828;
  font-weight: 700;
}
.app-nav li.on::after {
  content: "";
  position: absolute;
  left: calc(16 * var(--u));
  right: calc(1 * var(--u));
  bottom: calc(-1 * var(--u));
  height: calc(2 * var(--u));
  background: #01a828;
}
.app-nav .app-nav-rule {
  height: calc(2 * var(--u));
  margin-block: calc(-1 * var(--u));
  padding: 0;
  background: #131c12;
}
.app-help {
  position: absolute;
  left: calc(80 * var(--u));
  top: calc((var(--h, 1024) - 44) * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--u));
  color: #e5ffec;
  font-size: calc(16 * var(--u));
  line-height: calc(19 * var(--u));
}
.app-help img {
  margin-top: calc(-4 * var(--u));
}
.app-help span {
  position: absolute;
  left: calc(34 * var(--u));
  top: calc(-24 * var(--u));
  font-size: calc(10 * var(--u));
  line-height: calc(12 * var(--u));
  white-space: nowrap;
}
.app-main {
  position: relative;
  min-width: 0;
  padding: calc(28 * var(--u)) calc(112 * var(--u)) 0 calc(32 * var(--u));
}
.app-top {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--u));
  height: calc(48 * var(--u));
}
.app-top > div {
  flex: 1;
  align-self: flex-start;
  padding-top: calc(4 * var(--u));
}
.app-title {
  font-size: calc(32 * var(--u));
  line-height: calc(40 * var(--u));
  font-weight: 900;
}
.app-sub {
  margin-top: calc(-3 * var(--u));
  color: #c3dbc9;
}
.app-org {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  width: calc(184 * var(--u));
  height: calc(48 * var(--u));
  padding: calc(3 * var(--u)) calc(17 * var(--u)) 0 calc(16 * var(--u));
  border-radius: calc(32 * var(--u));
  background: #101214;
  color: #c3dbc9;
}
.app-org img {
  margin-top: calc(-3 * var(--u));
}
.app-org i {
  width: calc(5.5 * var(--u));
  height: calc(5.5 * var(--u));
  margin-left: auto;
  border: solid #c3dbc9;
  border-width: 0 calc(1.5 * var(--u)) calc(1.5 * var(--u)) 0;
  transform: translateY(calc(-3 * var(--u))) rotate(45deg);
}
.app-bar {
  display: flex;
  align-items: flex-end;
  gap: calc(16 * var(--u));
  height: calc(18 * var(--u));
  margin-top: calc(42 * var(--u));
}
.app-label {
  color: #c3dbc9;
  font-weight: 700;
}
.app-bar > .app-label {
  align-self: flex-start;
}
.app-bar img {
  margin-top: calc(-3 * var(--u));
}
.app-bar .app-sep {
  margin-bottom: calc(3 * var(--u));
}
.app-pick {
  display: flex;
  align-items: center;
  white-space: pre;
}
.app-pick img {
  margin-left: calc(8 * var(--u));
}
.app-sep {
  width: calc(1 * var(--u));
  height: calc(12 * var(--u));
  background: #28292a;
}
.app-link {
  margin-left: calc(16 * var(--u));
  color: #50be7e;
}
.app-acts {
  display: flex;
  gap: calc(24 * var(--u));
  margin-left: auto;
  color: #50be7e;
  font-weight: 700;
}
.app-acts span {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
}
.app-period,
.app-filter {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  color: #c3dbc9;
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
}
/* Segmented tabs: the current one is a green tab inside the box. */
.app-period,
.app-filter {
  gap: calc(4 * var(--u));
  height: calc(44 * var(--u));
  padding: calc(5 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #19191c;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #28292a;
  font-size: calc(13 * var(--u));
  line-height: calc(16 * var(--u));
}
.app-period {
  align-self: flex-start;
  margin: calc(-13 * var(--u)) 0 0 auto;
}
.app-filter {
  width: fit-content;
  margin-top: calc(19 * var(--u));
}
.app-period > *,
.app-filter > * {
  display: grid;
  place-items: center;
  height: 100%;
  padding-inline: calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
}
.app-period b,
.app-filter b {
  background: #01a82824;
  color: #01a828;
}
.app-grid {
  display: grid;
  grid-template-columns: repeat(2, calc(492 * var(--u)));
  gap: calc(24 * var(--u));
  margin-top: calc(24 * var(--u));
}
.app-grid.tight {
  row-gap: calc(22 * var(--u));
}
.app-fab {
  position: absolute;
  left: calc(968 * var(--u));
  top: calc((var(--h, 1024) - 104) * var(--u));
  display: grid;
  place-items: center;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  border-radius: 50%;
  background: #50be7e33;
}
.app-fab.low {
  top: calc((var(--h, 1024) - 96) * var(--u));
}
/* Overview */
.ov-total {
  display: flex;
  align-items: flex-start;
  height: calc(88 * var(--u));
  margin-top: calc(21 * var(--u));
  padding-left: calc(12 * var(--u));
}
.ov-total .ui-donut {
  margin-right: calc(20 * var(--u));
}
.ov-figure {
  padding-top: calc(2 * var(--u));
}
.ov-figure:nth-child(2) {
  width: calc(231 * var(--u));
}
.ov-figure:nth-child(3) {
  width: calc(226 * var(--u));
}
.ov-figure:nth-child(4) {
  width: calc(233 * var(--u));
}
.ov-figure p:first-child {
  font: 600 calc(32 * var(--u)) / calc(42 * var(--u)) var(--mono);
}
.ov-figure p:nth-child(2) {
  color: #c3dbc9;
}
.ov-figure p:last-child:not(.ui-legend) {
  color: #c3dbc9;
}
.ov-figure p:last-child {
  display: flex;
  align-items: center;
  margin-top: calc(8 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
}
/* The design draws the Scope 2 and 3 words a shade darker than their markers here. */
.ov-figure .ui-legend.tone-scope-2 span {
  color: #bab527;
}
.ov-figure .ui-legend.tone-scope-3 span {
  color: #dd8f3a;
}
.ov-figure p:last-child > img {
  margin-right: calc(4 * var(--u));
}
.ov-figure p:last-child > b {
  margin-right: calc(3 * var(--u));
  color: #ca3f64;
  font-weight: 850;
}
.ov-counts {
  display: grid;
  grid-template-columns: repeat(3, calc(320 * var(--u)));
  gap: calc(24 * var(--u));
  margin-top: calc(39 * var(--u));
}
.ov-count {
  --glow: #01a8281f;
  position: relative;
  height: calc(113 * var(--u));
  padding: calc(16 * var(--u)) calc(24 * var(--u));
  background-image: radial-gradient(
    calc(76 * var(--u)) calc(50 * var(--u)) at calc(184 * var(--u)) 112%,
    var(--glow),
    transparent
  );
}
.ov-count.tone-amber {
  --glow: #e3a64e1f;
}
.ov-count > b:not(.app-label) {
  position: absolute;
  right: calc(24 * var(--u));
  top: calc(16 * var(--u));
  font: 600 calc(32 * var(--u)) / calc(42 * var(--u)) var(--mono);
}
.ov-count .ui-tile {
  margin-top: calc(16 * var(--u));
}
.ov-count .ui-more {
  position: absolute;
  right: calc(24 * var(--u));
  bottom: calc(24 * var(--u));
}
.ov-cats {
  height: calc(253 * var(--u));
  margin-top: calc(24 * var(--u));
  padding: calc(24 * var(--u));
}
.ov-cats ul {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
  margin-top: calc(32 * var(--u));
}
.ov-cats li {
  display: flex;
  align-items: center;
  height: calc(15 * var(--u));
  color: #c3dbc9;
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 700;
}
.ov-cats li span {
  width: calc(84 * var(--u));
}
.ov-cats li i {
  width: calc(var(--w) * var(--u));
  height: calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #4bb276;
  box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) #4bb27626;
}
.ov-cats li b {
  margin-left: calc(16 * var(--u));
  color: #4bb276;
  font-family: var(--mono);
}
.ov-cats li span {
  flex: none;
  white-space: nowrap;
}
/* How much of the total is measured rather than estimated. */
.ov-quality {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(26 * var(--u));
  margin: calc(-4 * var(--u)) 0 0 calc(-4 * var(--u));
  padding: 0 calc(11 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #e3a64e1f;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #e3a64e99;
  color: #e3a64e;
  font-size: calc(11 * var(--u));
  line-height: calc(13 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}
.ov-quality i:first-child {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: currentColor;
}
.app .ov-quality i[style] {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-left: calc(8 * var(--u));
}
.ov-goal {
  height: calc(171 * var(--u));
  margin-top: calc(24 * var(--u));
  padding: calc(21 * var(--u));
  color: #c3dbc9;
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
}
.ov-goal-head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(22 * var(--u));
}
.ov-goal-head b {
  color: #fff;
  font-size: calc(15 * var(--u));
  line-height: calc(19 * var(--u));
}
.ov-goal-head > span:not(.ui-chip) {
  margin-left: auto;
  font-size: calc(13 * var(--u));
  line-height: calc(16 * var(--u));
}
.ov-goal-head em {
  margin-left: calc(6 * var(--u));
  color: #50be7e;
  font-style: normal;
  font-weight: 700;
}
.ov-goal-marks {
  display: flex;
  justify-content: space-between;
  margin-top: calc(16 * var(--u));
}
.ov-goal-marks b {
  color: #fff;
}
.ov-goal-bar {
  display: block;
  height: calc(10 * var(--u));
  margin-top: calc(8 * var(--u));
  border-radius: calc(5 * var(--u));
  background:
    linear-gradient(#01a828, #01a828) 0 0 / 72.6% 100% no-repeat,
    #c3dbc926;
}
.ov-goal-stats {
  display: flex;
  align-items: flex-end;
  gap: calc(40 * var(--u));
  margin-top: calc(16 * var(--u));
}
.ov-goal-stats p {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.ov-goal-stats b {
  color: #fff;
  font-size: calc(20 * var(--u));
  line-height: calc(25 * var(--u));
}
.ov-goal-stats .down b {
  color: #50be7e;
}
.ov-goal-stats .lever {
  padding-bottom: calc(4 * var(--u));
}
.ov-goal-stats .lever b {
  font-size: calc(14 * var(--u));
  line-height: calc(17 * var(--u));
}
/* Facility card states used on the Facilities screen */
.app .fac-card {
  height: calc(384 * var(--u));
}
.fac-figure.down p:last-child b {
  color: #2ca860;
}
.fac-recs.none {
  background: #c3dbc91a;
  color: #c3dbc9;
}
.app .fac-recs {
  padding-top: calc(1 * var(--u));
  line-height: calc(15 * var(--u));
}
.fac-recs.none span:last-child {
  margin-left: calc(16 * var(--u));
}
/* In the facility card the design sets the hovered ring 2px lower. */
.fac-card .ui-donut.focus {
  transform: translateY(calc(2 * var(--u)));
}
.ui-donut.focus p {
  color: #4bb276;
}
.app .ui-donut.focus img {
  position: absolute;
  left: calc(54 * var(--u));
  top: calc(65 * var(--u));
  width: calc(28 * var(--u));
  height: calc(31 * var(--u));
}
.fac-scopes.focus > :not(:first-child) {
  opacity: 0.3;
}
/* Recommendations */
.rec-totals {
  display: grid;
  grid-template-columns: repeat(3, calc(320 * var(--u)));
  gap: calc(24 * var(--u));
  margin-top: calc(23 * var(--u));
}
.rec-total {
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--u));
  height: calc(128 * var(--u));
  padding: calc(36 * var(--u)) calc(24 * var(--u)) 0;
  border-radius: calc(16 * var(--u));
  background: var(--tone-fill);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--tone-fill);
}
.rec-total p {
  display: flex;
  flex-direction: column;
  margin-top: calc(-4 * var(--u));
}
.rec-total b {
  font: 600 calc(32 * var(--u)) / calc(42 * var(--u)) var(--mono);
}
.rec-total b.plain {
  color: #c3dbc9;
  font: 500 calc(24 * var(--u)) / calc(29 * var(--u)) var(--ui-font);
}
.rec-total b.plain + span {
  margin-top: calc(17 * var(--u));
}
.rec-total small {
  margin-left: calc(var(--dx, 0) * var(--u));
  color: #c3dbc9;
  font: 500 calc(24 * var(--u)) / 1 var(--ui-font);
}
.rec-total p span {
  margin-top: calc(4 * var(--u));
  color: #c3dbc9;
}
.rec-list {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  margin-top: calc(14 * var(--u));
}
.rec-done {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-left: auto;
  color: #c3dbc9;
  font-size: calc(14 * var(--u));
  line-height: calc(17 * var(--u));
  text-align: right;
}
.rec-done b {
  color: #01a828;
}
/* AI Assistant */
.chat-panel {
  position: relative;
  height: calc(888 * var(--u));
  margin-top: calc(36 * var(--u));
  overflow: hidden;
  line-height: calc(20 * var(--u));
}
.chat-head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(32 * var(--u));
  background: #131517;
  box-shadow: inset 0 calc(-1 * var(--u)) #232427;
}
.chat-head b {
  margin-right: auto;
}
.chat-head span {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  color: #c3dbc9;
  font-weight: 700;
}
.chat-head span.new {
  color: #50be7e;
}
.app .chat-head i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
/* The conversation is scrolled: its first message sits under the header. */
.chat-scroll {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  margin-top: calc(-5 * var(--u));
  padding: 0 calc(32 * var(--u));
}
.chat-time {
  color: #c3dbc9;
  text-align: center;
}
.chat-bot {
  display: flex;
  gap: calc(16 * var(--u));
}
.chat-bot > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(12 * var(--u));
  min-width: 0;
}
.app .chat-bot .ui-tile {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(12 * var(--u));
}
.app .chat-bot .ui-tile img {
  width: calc(14 * var(--u));
  height: calc(16 * var(--u));
}
.chat-panel .chat-user {
  align-items: flex-start;
}
.chat-result {
  width: calc(640 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #50be7e1a;
}
.chat-result-head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(22 * var(--u));
  font-weight: 700;
}
.chat-result-head img:nth-of-type(1) {
  margin-left: auto;
}
.chat-result dl {
  margin-top: calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #131517b3;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #50be7e33;
}
.chat-result dl div {
  display: flex;
  align-items: center;
  height: calc(43 * var(--u));
  padding-left: calc(17 * var(--u));
}
.chat-result dl div + div {
  border-top: calc(1 * var(--u)) solid #50be7e33;
}
.chat-result dt {
  width: calc(166 * var(--u));
  font-weight: 700;
}
.chat-result dd {
  color: #c3dbc9;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
}
.chat-note {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-top: calc(12 * var(--u));
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #c3dbc90f;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #c3dbc91f;
  color: #c3dbc9;
  font-size: calc(12 * var(--u));
  line-height: calc(18 * var(--u));
}
.app .chat-note i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.chat-actions {
  display: flex;
  gap: calc(8 * var(--u));
  margin-top: calc(12 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(16 * var(--u));
  font-weight: 700;
}
.chat-actions > * {
  display: grid;
  place-items: center;
  height: calc(32 * var(--u));
  padding-inline: calc(16 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #c3dbc91f;
}
.chat-actions b {
  font-weight: inherit;
  background: #01a828;
  color: #090a0c;
}
.chat-compose {
  position: absolute;
  left: calc(32 * var(--u));
  right: calc(32 * var(--u));
  top: calc(798 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  height: calc(58 * var(--u));
  padding: 0 calc(17 * var(--u)) 0 calc(25 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #19191c;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #28292a;
  color: #c3dbc9b3;
}
.chat-compose img:last-child {
  margin-left: auto;
}
/* Equipment and report cards */
.item-card {
  position: relative;
  height: calc(139 * var(--u));
  padding: calc(16 * var(--u)) calc(24 * var(--u));
  background-image: radial-gradient(
    calc(76 * var(--u)) calc(50 * var(--u)) at calc(184 * var(--u)) 112%,
    #01a8281f,
    transparent
  );
}
.item-card.report {
  height: calc(138 * var(--u));
}
.item-head {
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--u));
}
.item-head > .ui-chip {
  margin-left: auto;
}
.item-name {
  flex: 1;
  min-width: 0;
}
.item-name p:first-child {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
}
.item-name p:last-child {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-top: calc(3 * var(--u));
  color: #c3dbc9;
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
}
.item-name i {
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 50%;
  background: #c3dbc9;
}
.item-side {
  color: #c3dbc9;
  line-height: calc(17.5 * var(--u));
  text-align: right;
}
.item-side b,
.item-place b {
  color: #fff;
}
.item-place {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  height: calc(18 * var(--u));
  margin-top: calc(16 * var(--u));
  font-weight: 700;
}
.report .item-place {
  gap: 0;
  color: #c3dbc9;
  font-weight: 500;
}
.item-foot {
  display: flex;
  align-items: center;
  height: calc(18 * var(--u));
  margin-top: calc(15 * var(--u));
  color: #c3dbc9;
  white-space: pre;
}
.item-foot b {
  margin-left: calc(8 * var(--u));
  color: #fff;
  font: 600 calc(14 * var(--u)) / calc(18 * var(--u)) var(--mono);
}
.item-foot small {
  margin: calc(4 * var(--u)) calc(8 * var(--u)) 0 calc(4 * var(--u));
  font-size: calc(10 * var(--u));
  line-height: calc(12 * var(--u));
}
.item-foot span {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin-top: calc(5 * var(--u));
}
.item-foot .up,
.item-foot .down {
  color: #ca3f64;
  font-size: calc(12 * var(--u));
  font-weight: 850;
}
.item-foot .down {
  color: #2ca860;
}
.item-mark {
  position: absolute;
  right: calc(24 * var(--u));
  top: calc(63 * var(--u));
}
.report .item-mark {
  top: calc(98 * var(--u));
}
svg.item-mark {
  right: calc(21 * var(--u));
  top: calc(95 * var(--u));
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}
/* Setup */
.app-setup {
  display: block;
  background:
    radial-gradient(
      calc(760 * var(--u)) calc(520 * var(--u)) at 0 100%,
      #0c1f1150,
      transparent
    ),
    #090a0c;
}
.setup-logo {
  position: absolute;
  left: calc(112 * var(--u));
  top: calc(40 * var(--u));
  width: calc(98 * var(--u));
  height: calc(24 * var(--u));
}
.setup-title,
.setup-sub {
  position: absolute;
  inset: calc(73 * var(--u)) 0 auto;
  text-align: center;
}
.setup-title {
  font-size: calc(32 * var(--u));
  line-height: calc(40 * var(--u));
  font-weight: 800;
}
.setup-sub {
  top: calc(121 * var(--u));
  color: #c3dbc9;
}
.setup-steps {
  position: absolute;
  left: calc(573 * var(--u));
  top: calc(162 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  color: #50be7e;
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  white-space: pre;
}
.setup-steps b {
  font-weight: 900;
}
.setup-steps i {
  width: calc(24 * var(--u));
  height: calc(2 * var(--u));
  background: #c3dbc9;
}
.setup-steps i:first-of-type {
  width: calc(48 * var(--u));
  height: calc(4 * var(--u));
  margin-left: calc(-12 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #50be7e;
}
.setup-card {
  position: absolute;
  left: calc(320 * var(--u));
  top: calc(209 * var(--u));
  width: calc(800 * var(--u));
  height: calc(742 * var(--u));
  padding: calc(32 * var(--u));
  border-radius: calc(32 * var(--u));
  background: #101114;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #232427;
}
.setup-head {
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--u));
  height: calc(48 * var(--u));
}
.setup-head .ui-tile {
  color: #01a828;
}
.setup-head p,
.setup-label {
  display: flex;
  flex-direction: column;
}
.setup-head p {
  padding-top: calc(3 * var(--u));
}
.setup-head b {
  font-size: calc(20 * var(--u));
  line-height: calc(25 * var(--u));
}
.setup-head p span,
.setup-label span {
  margin-top: calc(4 * var(--u));
  color: #c3dbc9;
}
.setup-fields {
  display: grid;
  grid-template-columns: repeat(2, calc(352 * var(--u)));
  gap: calc(32 * var(--u));
  margin-top: calc(41 * var(--u));
}
.setup-fields p {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  font-weight: 700;
}
.setup-fields span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(48 * var(--u));
  padding-inline: calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #19191c;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #28292a;
}
.setup-fields img {
  width: calc(8 * var(--u));
  height: calc(6 * var(--u));
  filter: brightness(1.4);
}
.setup-label {
  margin-top: calc(24 * var(--u));
}
.setup-options ~ .setup-label {
  margin-top: calc(32 * var(--u));
}
.setup-options {
  display: flex;
  gap: calc(16 * var(--u));
  margin-top: calc(16 * var(--u));
  white-space: nowrap;
}
.setup-label + .setup-options {
  margin-top: calc(24 * var(--u));
}
.setup-options span {
  display: flex;
  align-items: center;
  height: calc(40 * var(--u));
  padding-inline: calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #c3dbc91a;
  color: #c3dbc9;
}
.setup-options span.on {
  background: #01a8281a;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #01a828;
  color: #01a828;
  font-weight: 700;
}
.setup-options img {
  margin-right: calc(4 * var(--u));
}
.app .setup-options i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-left: calc(23 * var(--u));
}
.setup-continue {
  position: absolute;
  right: calc(32 * var(--u));
  bottom: calc(32 * var(--u));
  display: grid;
  place-items: center;
  width: calc(133 * var(--u));
  height: calc(48 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #01a828;
  color: #090a0c;
  font-size: calc(16 * var(--u));
  line-height: calc(20 * var(--u));
}
/* States and screens taken from the Dashboard page of the design. */
.app-bell {
  display: grid;
  place-items: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  margin: 0 calc(-12 * var(--u));
  border-radius: 50%;
  background: #101214;
}
.app-cursor {
  position: absolute;
  left: calc((var(--x) - 295) * var(--u));
  top: calc((var(--y) - 7) * var(--u));
  width: calc(28 * var(--u));
  height: calc(31 * var(--u));
}
.app-cursor.faint {
  opacity: 0.35;
}
.rec-list.focus > :not(:first-child) {
  opacity: 0.3;
}
.chart-card .chart-tip {
  font-size: 12px;
  font-weight: 800;
}
.ui-tile.hero {
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  border-radius: calc(24 * var(--u));
}
.ui-tile.round {
  border-radius: 50%;
}
.chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(890 * var(--u));
  margin-top: calc(34 * var(--u));
  padding-top: calc(197 * var(--u));
  background-image: radial-gradient(
    calc(200 * var(--u)) calc(140 * var(--u)) at 50% calc(300 * var(--u)),
    #01a82814,
    transparent
  );
}
.chat-hello {
  margin-top: calc(32 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: calc(50 * var(--u));
  font-weight: 700;
}
.chat-ask {
  margin-top: calc(8 * var(--u));
  color: #c3dbc9;
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
}
.chat-box {
  position: relative;
  width: calc(672 * var(--u));
  height: calc(168 * var(--u));
  margin-top: calc(40 * var(--u));
  padding: calc(24 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #19191c;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #28292a;
  color: #c3dbc9;
}
.chat-box img {
  position: absolute;
  left: calc(24 * var(--u));
  top: calc(120 * var(--u));
}
.chat-box img + img {
  left: auto;
  right: calc(24 * var(--u));
}
.chat-prompts {
  display: flex;
  gap: calc(16 * var(--u));
  margin-top: calc(16 * var(--u));
  color: #c3dbc9;
}
.chat-box + .chat-prompts {
  margin-top: calc(24 * var(--u));
}
.chat-prompts span {
  padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #c3dbc91a;
}
.chat-previous {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-top: calc(109 * var(--u));
  color: #c3dbc9;
  font-size: calc(16 * var(--u));
  line-height: calc(19 * var(--u));
}
/* The later setup steps sit lower on the canvas than the first one. */
.setup-facilities .setup-title,
.setup-done .setup-title {
  top: calc(128 * var(--u));
}
.setup-facilities .setup-sub,
.setup-done .setup-sub {
  top: calc(176 * var(--u));
}
.setup-facilities .setup-steps {
  left: calc(590 * var(--u));
  top: calc(216 * var(--u));
}
.setup-done .setup-steps {
  left: calc(599 * var(--u));
  top: calc(216 * var(--u));
}
.setup-steps svg {
  flex: none;
  width: calc(24 * var(--u));
  height: calc(16 * var(--u));
}
.setup-steps svg + span {
  margin-left: calc(-12 * var(--u));
}
.setup-card.organization {
  height: calc(878 * var(--u));
}
.setup-card.facilities {
  top: calc(272 * var(--u));
  height: calc(425 * var(--u));
}
.setup-card.done {
  left: calc(323 * var(--u));
  top: calc(272 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(616 * var(--u));
  padding: calc(31 * var(--u)) calc(32 * var(--u)) 0 calc(26 * var(--u));
}
.app img[width="48"] {
  --s: 48;
}
.setup-row,
.setup-add {
  display: flex;
  align-items: center;
  border-radius: calc(16 * var(--u));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #28292a;
}
.setup-row {
  gap: calc(8 * var(--u));
  height: calc(56 * var(--u));
  margin-top: calc(41 * var(--u));
  padding-inline: calc(24 * var(--u));
  color: #c3dbc9;
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
}
.setup-row b {
  margin-right: calc(8 * var(--u));
  color: #fff;
  font-size: calc(14 * var(--u));
  line-height: calc(17 * var(--u));
}
.setup-row i,
.setup-sum.on i:not([style]) {
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 50%;
  background: currentColor;
}
.setup-row span:last-of-type {
  margin-right: auto;
}
.setup-add {
  justify-content: center;
  height: calc(96 * var(--u));
  margin-top: calc(32 * var(--u));
}
.setup-add b {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  width: calc(173 * var(--u));
  height: calc(32 * var(--u));
  padding-left: calc(16 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #01a828;
  color: #090a0c;
}
.app .setup-add i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.setup-set {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(16 * var(--u));
}
.setup-set b {
  font-size: calc(20 * var(--u));
  line-height: calc(25 * var(--u));
}
.setup-set span {
  margin-top: calc(4 * var(--u));
  color: #c3dbc9;
}
.setup-sum {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  position: relative;
  left: calc(3 * var(--u));
  width: calc(720 * var(--u));
  height: calc(56 * var(--u));
  margin-top: calc(16 * var(--u));
  padding-inline: calc(24 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #141b1a;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #50be7e80;
}
.setup-sum.on {
  gap: calc(8 * var(--u));
  width: calc(736 * var(--u));
  margin-top: calc(32 * var(--u));
  background: #01a828;
  box-shadow: none;
  color: #090a0c;
}
.app .setup-sum.on i[style] {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.setup-sum b {
  font-size: calc(18 * var(--u));
  line-height: calc(23 * var(--u));
  font-weight: 900;
}
.setup-sum.on b {
  font-size: calc(14 * var(--u));
  line-height: calc(17 * var(--u));
  font-weight: 700;
}
.setup-sum img {
  margin-right: calc(4 * var(--u));
}
.setup-sum span {
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
}
.setup-sum > span:first-of-type {
  margin-left: calc(12 * var(--u));
  padding-left: calc(16 * var(--u));
  box-shadow: inset calc(1 * var(--u)) 0 0 #101114;
  color: #c3dbc9;
}
.setup-sum.on > span:first-of-type {
  margin-left: calc(8 * var(--u));
  color: inherit;
}
.setup-sum em {
  font-style: normal;
}
.setup-note {
  position: relative;
  left: calc(3 * var(--u));
  margin-top: calc(32 * var(--u));
  color: #c3dbc9;
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
}
.setup-continue.start {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(4 * var(--u));
  width: calc(228 * var(--u));
  margin: calc(40 * var(--u)) 0 0 calc(22 * var(--u));
  padding-left: calc(32 * var(--u));
}
.setup-later {
  margin-top: calc(24 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(20 * var(--u));
  font-weight: 700;
}
/* Shared navigation. Menus are anchored to the header, not modal overlays. */
.site-header {
  height: 100px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  transition: background-color 0.25s ease;
}
/* On the home page the hero starts under the header. */
.site-header.over-hero {
  background: transparent;
  margin-bottom: -100px;
}
/* Once the page scrolls, the header stays in view as a floating glass bar.
   The bar is drawn behind the header's contents, 24px wider than the page
   column on each side, so nothing moves when it appears. */
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px max(8px, calc(max(var(--gutter), (100% - 1312px) / 2) - 24px));
  border-radius: 20px;
  background: var(--raised);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 14%),
    inset 0 0 0 1px rgb(255 255 255 / 7%),
    0 16px 40px rgb(0 0 0 / 30%);
  opacity: 0;
  transform: scale(1.015, 1.12);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
}
@supports (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .site-header::before {
    background: rgb(25 39 31 / 58%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
  }
}
.site-header.scrolled {
  background: transparent;
}
.site-header.scrolled::before {
  opacity: 1;
  transform: none;
}
.header-account {
  transition: transform 0.25s ease;
}
@media (min-width: 1081px) {
  /* The button ends 12px from the bar's edge, the same as above and below it. */
  .site-header.scrolled .header-account {
    transform: translateX(12px);
  }
  .site-header.scrolled .mega-menu {
    top: 98px;
  }
}
/* Logo, navigation, account. The navigation takes the space in between and
   packs its items to the left; the 103px on either side of it closes up on
   narrower screens. */
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(20px, 103px - (1440px - 100vw) / 2, 103px);
}
.brand {
  flex: none;
  width: 122px;
  height: 30px;
}
/* The exported logo carries its stroke outside the artwork, which the design
   centres in a 122 x 30 box. */
.brand img {
  width: 122.621px;
  height: 31.249px;
  max-width: none;
  margin: -0.63px 0 -0.62px -0.62px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1 1 0;
}
/* Labels take the width of their word, rounded up to a whole pixel as in the
   design, so a longer label pushes the items after it along. */
.nav-dropdown > summary > span:not(.icon) {
  width: auto;
  min-width: var(--w);
}
.nav-dropdown > summary,
.nav-link,
.language-toggle,
.signin {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}
.nav-dropdown > summary,
.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  white-space: nowrap;
  padding-block: 16px;
}
/* In the header the words stay on one line with the plain links beside
   them, so here the arrow moves to the words: a pixel down. */
.nav-dropdown > summary .icon,
.mobile-toggle .icon {
  position: relative;
  top: 1px;
}
.nav-dropdown > summary .icon {
  color: var(--muted);
}
.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}
/* The header holds controls, not text to select or links to drag away.
   Holding the mouse on one and moving it started a selection or a drag,
   and the browser scrolled the page to the top while the button stayed
   down. */
.site-header,
.language-toggle {
  -webkit-user-select: none;
  user-select: none;
}
.site-header a,
.site-header img {
  -webkit-user-drag: none;
}
.nav-dropdown[open] > summary,
.nav-dropdown[open] > summary .icon {
  color: var(--green);
}
.nav-dropdown[open] > summary > .icon {
  transform: rotate(180deg);
}
/* The width of the English label in the design. */
:lang(en) > body .nav-link {
  min-width: 46px;
}
.nav-link:hover,
.signin:hover {
  color: var(--green);
}
.header-account {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}
.language-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-align: left;
}
.header-account .language-toggle > span:not(.icon) {
  width: 24px;
}
/* 104px wide in the design; a longer label in another language widens it. */
.signin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  height: 56px;
  padding-inline: 16px;
  border-radius: 8px;
  white-space: nowrap;
}
/* Centred with margins, not a transform: in a window of odd width a
   transform puts the menu on a half pixel and its text is drawn soft. */
.mega-menu {
  position: absolute;
  width: min(960px, calc(100vw - 48px));
  left: 0;
  right: 0;
  margin-inline: auto;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: 20px;
  background: var(--raised);
}
/* Where the browser can round, the menu starts on a whole pixel. */
@supports (left: round(down, 1.5px, 1px)) {
  .mega-menu {
    right: auto;
    margin-inline: 0;
    left: round(down, calc((100% - min(960px, 100vw - 48px)) / 2), 1px);
  }
}
.menu-top {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.menu-top .eyebrow {
  flex: 0 1 730px;
  color: var(--muted);
}
.menu-columns {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.menu-links {
  flex: 0 1 528px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.menu-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border-radius: 12px;
}
/* Menus are frosted glass: the page behind shows through, blurred. Without
   backdrop-filter they keep their solid fill, so the text stays readable. */
@supports (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  dialog#language-dialog {
    background: rgb(25 39 31 / 58%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 14%),
      inset 0 0 0 1px rgb(255 255 255 / 7%),
      0 24px 60px rgb(0 0 0 / 35%);
  }
  @media (min-width: 1081px) {
    .mega-menu {
      background: rgb(25 39 31 / 58%);
      -webkit-backdrop-filter: blur(28px) saturate(160%);
      backdrop-filter: blur(28px) saturate(160%);
      box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 14%),
        inset 0 0 0 1px rgb(255 255 255 / 7%),
        0 24px 60px rgb(0 0 0 / 35%);
    }
    .menu-item,
    .mega-menu .button.secondary:not(:hover) {
      background: rgb(9 14 11 / 46%);
    }
  }
}
.menu-item:hover {
  background: #233c2e;
}
.menu-item .icon {
  color: var(--green);
}
.menu-item > span {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-item strong {
  font-size: 15px;
  line-height: 22px;
}
.menu-item small {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--muted);
}
.menu-feature {
  flex: 0 1 336px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 12px;
}
.menu-feature > img {
  width: 100%;
  height: 164px;
  object-fit: cover;
  border-radius: 8px;
}
.mobile-toggle,
.mobile-account {
  display: none;
}
/* Home geometry follows the approved 1440px Figma frame. */
.hero {
  height: 910px;
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* Set by the script: how far the page has scrolled, in pixels, and where
     the pointer is over the hero, from -0.5 to 0.5 on each axis. */
  --hero-scroll: 0;
  --hero-x: 0;
  --hero-y: 0;
}
.hero-image,
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Parallax. The photograph leaves the screen at about two thirds of the
   scrolling speed and grows a little; the copy leaves faster and fades, so the
   three layers separate as the page moves. */
.hero-image img {
  transform: translate3d(0, calc(var(--hero-scroll) * 0.34px), 0)
    scale(calc(1 + var(--hero-scroll) * 0.00016));
  transform-origin: 50% 30%;
  will-change: transform;
}
/* With a mouse the photograph also leans away from the pointer, by at most
   4.5px sideways and 2.5px up or down. It is 1% larger so its edges never
   show. */
.hero.follows .hero-image img {
  transform: translate3d(
      calc(var(--hero-x) * -9px),
      calc(var(--hero-scroll) * 0.34px + var(--hero-y) * -5px),
      0
    )
    scale(calc(1.01 + var(--hero-scroll) * 0.00016));
}
.hero-shade {
  opacity: calc(1 + var(--hero-scroll) / 1400);
}
.hero-copy {
  transform: translate3d(0, calc(var(--hero-scroll) * -0.2px), 0);
  opacity: calc(1 - var(--hero-scroll) / 460);
  will-change: transform, opacity;
}
.hero-operations {
  transform: translate3d(0, calc(var(--hero-scroll) * -0.08px), 0);
  opacity: calc(1 - (var(--hero-scroll) - 140) / 420);
  will-change: transform, opacity;
}
/* Arrival: the photograph settles from a slightly closer view while the copy
   rises into place, one line after another. */
@keyframes hero-settle {
  from {
    transform: scale(1.07);
  }
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
}
.hero-image {
  animation: hero-settle 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-copy > *,
.hero-operations > * {
  animation: hero-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-copy > :nth-child(2) {
  animation-delay: 0.06s;
}
/* Keep the main heading readable from its first paint. */
@keyframes hero-heading-rise {
  from {
    transform: translate3d(0, 18px, 0);
  }
}
.hero-copy > h1 {
  animation-name: hero-heading-rise;
}
.hero-copy > :nth-child(3) {
  animation-delay: 0.12s;
}
.hero-copy > :nth-child(4) {
  animation-delay: 0.18s;
}
.hero-operations > :nth-child(1) {
  animation-delay: 0.24s;
}
.hero-operations > :nth-child(2) {
  animation-delay: 0.3s;
}
.hero-operations > :nth-child(3) {
  animation-delay: 0.36s;
}
.hero-shade {
  background:
    linear-gradient(180deg, #080d0bc7, transparent 240px),
    linear-gradient(90deg, #080d0bfa 0%, #080d0bab 53%, #080d0b0d 100%);
}
.hero-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 190px;
  padding-bottom: 52px;
}
.hero-copy h1 {
  font-size: 72px;
  line-height: 80px;
  font-weight: 800;
}
.hero-copy .lead {
  color: var(--text);
}
.hero-operations {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.hero-operations > div {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 348px;
}
.hero-operations > div > span:not(.icon) {
  flex: 1;
}
.hero-operations strong {
  display: block;
  font-size: 15px;
  line-height: 22px;
}
.hero-operations small {
  display: block;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 5px;
}
.preview-tabs {
  display: flex;
  gap: 12px;
}
.preview-tabs button {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 254px;
  height: 52px;
  /* a pixel less above than below: the middle of the letters, not of the
     line, sits in the middle of the tab */
  padding: 13px 14px 15px;
  border-radius: 8px;
  background: var(--surface);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
}
.preview-tabs .icon {
  position: relative;
  top: 1px;
  color: var(--muted);
}
.preview-tabs button[aria-selected="true"] {
  background: var(--deep);
  color: var(--green);
}
.preview-tabs button[aria-selected="true"] .icon {
  color: var(--green);
}
.pitch {
  position: relative;
  aspect-ratio: 688 / 570;
  background: var(--deep);
  border-radius: 24px;
}
.pitch-lines {
  position: absolute;
  inset: 7.368% 6.105%;
  border: 1px solid var(--green);
}
.pitch-lines::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--green);
}
.pitch-lines::after {
  content: "";
  position: absolute;
  left: 36.545%;
  top: 33.264%;
  width: 26.91%;
  aspect-ratio: 1;
  border: 1px solid var(--green);
  border-radius: 50%;
}
.pitch-lines i {
  position: absolute;
  top: 22.521%;
  width: 17.276%;
  height: 54.959%;
  border: 1px solid var(--green);
}
.pitch-lines i:first-child {
  left: -1px;
}
.pitch-lines i:last-child {
  right: -1px;
}
.pitch .ui {
  position: absolute;
  left: 11.337%;
  top: 13.684%;
  width: 77.326%;
  box-shadow: 0 20px 40px #0000004d;
}
.sport-photo {
  width: 628px;
  aspect-ratio: 628 / 530;
}
.guide-steps li {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
  border-bottom: 1px solid var(--rule);
}
/* The number sits beside the first line of its step, level with the middle
   of the letters, also when the step wraps to a second line. */
.guide-steps .eyebrow {
  flex: none;
  width: 56px;
  margin-top: 11px;
}
.guide-steps .t-26 {
  flex: 1;
}
/* The guide card is as tall as the two cards beside it; its link sits at the
   bottom. */
.lead-guide {
  align-self: stretch;
}
.lead-guide > .text-link {
  margin-top: auto;
}
/* Product, audience, pricing and editorial pages. */
.about-photo {
  width: 100%;
  aspect-ratio: 1312 / 640;
}
.contact-photo {
  width: 600px;
  aspect-ratio: 1;
}
.clubs-photo {
  width: 624px;
  aspect-ratio: 624 / 600;
}
.venue-photo {
  width: 808px;
  aspect-ratio: 808 / 480;
}
.venue-questions {
  align-self: stretch;
}
.contact-email {
  color: var(--green);
}
.contact-email:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.prompts {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.prompts li {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  background: var(--bg);
}
/* The icon sits beside the first line of the question, level with the
   middle of its letters. */
.prompts .icon {
  margin-top: 5px;
}
.plans-section {
  padding-top: 0;
}
.plan {
  background: var(--surface);
}
/* The plans end on one line however long their lists are. */
.row:has(> .plan) {
  align-items: stretch;
}
/* The green line is drawn inside the card, so all three plans share one size. */
.plan.recommended {
  --rule: rgb(87 217 144 / 25%);
  background: var(--deep);
  box-shadow: inset 0 0 0 1px var(--green);
}
/* Monthly or yearly billing, in the style of the preview tabs. */
.billing-toggle {
  display: flex;
  gap: 4px;
  width: fit-content;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface);
}
.billing-toggle button {
  height: 40px;
  padding: 9px 16px 11px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.billing-toggle button[aria-pressed="true"] {
  background: var(--deep);
  color: var(--green);
  font-weight: 700;
}
.free-plan {
  align-items: center;
  background: var(--surface);
}
@media (max-width: 760px) {
  .free-plan {
    flex-direction: column;
    align-items: flex-start;
  }
}
.plan ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 17px;
  line-height: 19px;
}
.table-scroll {
  overflow-x: auto;
}
table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}
th,
td {
  padding: 20px 24px 20px 0;
  text-align: left;
  font-weight: 500;
}
th:first-child {
  width: 33.08%;
  padding-left: 20px;
}
th:nth-child(2),
th:nth-child(3) {
  width: 22.41%;
}
tr > :last-child {
  padding-right: 20px;
}
/* Plan comparison: a white card on the paper, plans across the top with
   their price, Pro tinted like its Recommended card, ticks and dashes. */
.compare {
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 1px 0 rgb(19 37 27 / 6%),
    0 24px 48px -32px rgb(19 37 27 / 35%);
}
.plans-table {
  min-width: 960px;
  font-size: 15px;
}
.plans-table :is(th, td) {
  padding: 18px 20px;
  vertical-align: middle;
  border-bottom: 1px solid rgb(19 37 27 / 8%);
}
.plans-table thead :is(th, td),
.plans-table tfoot td {
  border-bottom: 0;
}
.plans-table > :is(thead, tbody, tfoot) > tr > :first-child {
  width: 24%;
  padding-left: 28px;
}
.plans-table thead th {
  width: 19%;
  padding-block: 28px 22px;
  background: none;
  color: var(--ink);
  vertical-align: bottom;
}
.plan-name,
.plan-price {
  display: block;
}
.plan-name {
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
}
.plan-price {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(19 37 27 / 60%);
}
.plan-price b {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}
.plan-flag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--green);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.04em;
}
.plans-table .pro {
  background: rgb(87 217 144 / 14%);
}
.plans-table thead .pro {
  border-radius: 16px 16px 0 0;
}
.plans-table tfoot .pro {
  border-radius: 0 0 16px 16px;
}
.plans-table tbody th[scope="row"] {
  font-weight: 600;
}
.plans-table tbody td {
  color: rgb(19 37 27 / 82%);
}
.plans-table .group th {
  padding-block: 28px 10px;
  background: none;
  color: #2a8a55;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgb(19 37 27 / 14%);
}
.tick {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--deep)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2357d990' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 24px no-repeat;
  vertical-align: middle;
}
.none {
  color: rgb(19 37 27 / 25%);
}
.plans-table tfoot td {
  padding-block: 20px 28px;
}
.plans-table tfoot .button {
  width: 100%;
  min-width: 0;
}
/* On a narrow screen the table scrolls sideways and the row names stay. */
@media (max-width: 760px) {
  .plans-table {
    min-width: 740px;
    font-size: 14px;
  }
  .plans-table thead th {
    width: 150px;
  }
  .plans-table > :is(thead, tbody, tfoot) > tr > :first-child {
    width: 140px;
    padding-left: 16px;
  }
  .plans-table :is(th, td) {
    padding-inline: 12px;
  }
}
@media (max-width: 1100px) {
  .plans-table > :is(thead, tbody, tfoot) > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    box-shadow: 1px 0 0 rgb(19 37 27 / 8%);
  }
  .plans-table .group th {
    position: static;
  }
  .plans-table .group span {
    position: sticky;
    left: 16px;
  }
}
thead th {
  /* One pixel more above than below: the same baseline rounding as above. */
  padding-block: 21px 19px;
  background: var(--ink);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}
tbody th,
tbody td {
  border-bottom: 1px solid var(--ink);
}
.guide-outline a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Legal texts: a long outline that stays in view, plain lists and links
   inside the sentences. */
.legal ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal li {
  position: relative;
  padding-left: 24px;
  font-size: 18px;
  line-height: 29px;
}
.legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.legal p a,
.legal li a,
.help p a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.legal p a:hover,
.legal li a:hover,
.help p a:hover {
  text-decoration-thickness: 2px;
}
@media (min-width: 1101px) and (min-height: 860px) {
  .legal-outline,
  .help-title {
    position: sticky;
    top: 128px;
    align-self: flex-start;
  }
}
/* Help center: a search field, a card for each topic, and the questions of a
   topic as rows that open. */
.help-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  margin-top: 16px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%);
  color: var(--muted);
}
.help-search:focus-within {
  box-shadow: inset 0 0 0 2px var(--green);
  color: var(--text);
}
.help-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.help-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.help-topics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.help-topic {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 176px;
  transition: background-color 0.18s;
}
.help-topic:hover {
  background: var(--raised);
}
.help-topic .icon {
  margin-bottom: auto;
  color: var(--green);
}
/* Two lines are kept for the description, so the titles of a row line up. */
.help-topic .small {
  min-height: 44px;
}
/* A line across the whole page starts a topic. Inside a topic, shorter
   lines separate the questions and the list has no line above or below, so
   two topics do not read as one list. */
.help-group {
  padding-top: 48px;
  border-top: 1px solid var(--ink);
}
.help-group:first-child {
  padding-top: 0;
  border-top: 0;
}
.help-questions details {
  border-top: 1px solid var(--ink);
}
.help-questions details:first-child {
  border-top: 0;
}
.help-questions details:first-child > summary {
  padding-top: 0;
}
/* During a search the first topic and the first question left on the page
   take that place. */
.help-group:nth-child(1 of .help-group:not([hidden])) {
  padding-top: 0;
  border-top: 0;
}
.help-questions details:nth-child(1 of :not([hidden])) {
  border-top: 0;
}
.help-questions details:nth-child(1 of :not([hidden])) > summary {
  padding-top: 0;
}
.help-questions summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  list-style: none;
}
.help-questions summary::-webkit-details-marker {
  display: none;
}
.help-questions summary .icon {
  /* level with the middle of the letters of the question's first line */
  margin-top: 5px;
  transition: transform 0.2s ease;
}
.help-questions details[open] summary .icon {
  transform: rotate(180deg);
}
.help-questions details > p {
  padding-bottom: 24px;
}
@media (max-width: 1100px) {
  .help-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .help-topics {
    grid-template-columns: minmax(0, 1fr);
  }
  .help-topic {
    min-height: 0;
  }
  .help-topic .icon {
    margin-bottom: 16px;
  }
}
.glossary > div {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  padding: 32px;
  border-bottom: 1px solid var(--ink);
}
.glossary dt {
  flex: none;
  width: 328px;
}
.glossary dd {
  flex: 0 1 840px;
}
.site-footer {
  background: var(--surface);
  padding: 64px 0;
}
.footer-brand a:first-child {
  display: block;
  width: 170px;
  height: 42px;
}
/* As in the header, the exported logo is slightly larger than its design box. */
.footer-brand img {
  width: 170.866px;
  height: 43.544px;
  max-width: none;
  margin: -0.79px 0 -0.75px -0.87px;
}
.footer-brand > .text-link {
  flex-shrink: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}
.footer-grid nav,
.footer-grid ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.footer-grid a,
.footer-utilities {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}
.footer-grid a {
  display: block;
}
.footer-grid a:hover {
  color: var(--green);
}
.footer-utilities {
  display: flex;
  gap: 24px;
  color: var(--muted);
}
.footer-utilities > :nth-child(1) {
  width: 224px;
}
.footer-utilities > :nth-child(2) {
  width: 200px;
}
.footer-utilities > :nth-child(3),
.footer-utilities > :nth-child(4) {
  width: 180px;
}
/* The same control as in the header: globe, the code of the page language
   and an arrow. */
.footer-utilities .language-toggle > span:not(.icon) {
  width: 24px;
}
/* Back to top: a floating glass button that appears once the page has been
   scrolled some way down. */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 45;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--raised);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 14%),
    inset 0 0 0 1px rgb(255 255 255 / 7%),
    0 12px 32px rgb(0 0 0 / 30%);
  color: var(--green);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0s linear 0.25s,
    background-color 0.18s,
    color 0.18s;
}
@supports (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .to-top {
    background: rgb(25 39 31 / 58%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
  }
}
.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.to-top:hover {
  background: var(--green);
  color: var(--ink);
}
/* the arrow of the site, pointing up */
.to-top .icon {
  transform: rotate(-90deg);
}
.footer-utilities a:hover,
.footer-utilities .language-toggle:hover {
  color: var(--text);
}
/* Language menu: a 280px panel placed next to the control that opened it. */
/* Padded like the menus: its heading is 32px from the top and the side. */
#language-dialog {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(312px, 100vw - 32px);
  padding: 32px;
  border: 0;
  border-radius: 12px;
  background: var(--raised);
  color: var(--text);
}
#language-dialog[open] {
  display: flex;
  flex-direction: column;
  /* the same distance from heading to content as in the menus */
  gap: 24px;
}
#language-dialog::backdrop {
  background: transparent;
}
#language-dialog .eyebrow {
  color: var(--muted);
}
.language-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.language-options a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  /* One pixel up from the middle: the code then sits exactly in the middle of
     the row, and the name on the same baseline. */
  padding: 11px 12px 13px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  text-align: left;
}
.language-options a:hover {
  background: var(--surface);
}
.language-options a[aria-current] {
  background: var(--deep);
}
/* The code sits on the baseline of the language name beside it. */
.language-options .eyebrow {
  flex: none;
  width: 30px;
  margin-top: 4px;
}
#language-dialog [aria-current] .eyebrow {
  color: var(--green);
}
@media (min-width: 1600px) {
  .hero {
    height: 950px;
  }
  .hero-inner {
    padding-top: 220px;
  }
}
@media (max-width: 1250px) {
  /* Below the design width the type scale changes, so baseline rows fall
     back to the browser's own baseline alignment. */
  .ab {
    align-items: baseline;
  }
  .ab > * {
    margin-top: 0;
  }
  .ab.b-18 > .eyebrow {
    position: relative;
    top: -2px;
  }
  :root {
    --gutter: 40px;
  }
  .main-nav {
    gap: 12px;
  }
  .header-account {
    gap: 12px;
  }
  .header-account .button {
    width: 150px;
  }
  .signin {
    width: auto;
    padding-inline: 8px;
  }
  .nav-dropdown > summary,
  .nav-link {
    font-size: 13px;
  }
  .nav-dropdown > summary > span:not(.icon),
  .nav-link {
    min-width: 0;
  }
  h1 {
    font-size: 56px;
    line-height: 64px;
  }
  h2 {
    font-size: 46px;
    line-height: 54px;
  }
  .t-48,
  .t-42 {
    font-size: 40px;
    line-height: 46px;
  }
  .row > .eyebrow.w,
  .row > .mono-32.w {
    flex-shrink: 0;
  }
}
@media (max-width: 1080px) {
  h1 {
    font-size: 52px;
    line-height: 60px;
  }
  h2 {
    font-size: 44px;
    line-height: 52px;
  }
  .t-48,
  .t-42 {
    font-size: 38px;
    line-height: 44px;
  }
  .g-120,
  .g-100,
  .g-96,
  .g-90,
  .g-80 {
    gap: 48px;
  }
  .g-64,
  .g-56 {
    gap: 40px;
  }
  /* Rows stack on tablets unless they are marked to keep (`keep`) or to
     hold three short columns until phones (`md`). */
  .row:not(.keep):not(.md) {
    flex-direction: column;
    align-items: stretch;
  }
  .row:not(.keep):not(.md) > .w:not(.button):not(.text-link),
  .row:not(.keep):not(.md) > .photo {
    width: 100%;
  }
  .row:not(.keep):not(.md) > .grow {
    flex: none;
  }
  .glossary > div {
    flex-direction: column;
    gap: 12px;
  }
  .glossary dt,
  .glossary dd {
    width: auto;
    flex: none;
  }
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-header {
    height: 88px;
  }
  .site-header.over-hero {
    margin-bottom: -88px;
  }
  .header-account > .signin,
  .header-account > .button {
    display: none;
  }
  .mobile-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    order: 3;
  }
  .header-account {
    margin-left: auto;
  }
  .main-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 88px;
    max-height: calc(100dvh - 88px);
    overflow: auto;
    background: var(--bg);
    padding: 16px var(--gutter) 32px;
    border-bottom: 1px solid var(--border);
  }
  .site-header.nav-open .main-nav {
    display: block;
  }
  .nav-dropdown > summary,
  .nav-dropdown > summary > span,
  .nav-link {
    width: auto;
  }
  .nav-dropdown > summary,
  .nav-link {
    font-size: 18px;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }
  .mega-menu {
    position: static;
    transform: none;
    width: 100%;
    margin: 12px 0;
    padding: 20px;
    gap: 16px;
  }
  .menu-top {
    justify-content: space-between;
  }
  .menu-top .eyebrow {
    flex: 0 1 auto;
  }
  .menu-links {
    flex: 1 1 auto;
  }
  .menu-feature {
    display: none;
  }
  .mobile-account {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 500;
  }
  .hero-inner {
    padding-top: 170px;
  }
  .hero-copy h1 {
    font-size: 64px;
    line-height: 72px;
  }
  .hero-operations > div {
    width: auto;
  }
  .hero-operations small {
    font-size: 13px;
  }
  .preview-tabs button {
    flex: 1 1 0;
  }
  .footer-grid {
    gap: 32px 24px;
  }
  .footer-utilities > * {
    width: auto !important;
  }
}
@media (max-width: 760px) {
  :root {
    --gutter: 24px;
  }
  h1 {
    font-size: 40px;
    line-height: 46px;
  }
  h1 br {
    display: none;
  }
  h2,
  .t-48,
  .t-42 {
    font-size: 32px;
    line-height: 38px;
  }
  h3,
  .t-26 {
    font-size: 22px;
    line-height: 30px;
  }
  .t-32 {
    font-size: 26px;
    line-height: 32px;
  }
  p,
  dd {
    font-size: 16px;
    line-height: 26px;
  }
  .lead {
    font-size: 18px;
    line-height: 26px;
  }
  .small {
    font-size: 14px;
    line-height: 22px;
  }
  .mono-32 {
    font-size: 24px;
    line-height: 32px;
  }
  .mono-48 {
    font-size: 36px;
    line-height: 42px;
  }
  .section {
    padding-block: 52px;
  }
  .plans-section {
    padding-top: 0;
  }
  .g-120,
  .g-100,
  .g-96,
  .g-90,
  .g-80,
  .g-64,
  .g-56,
  .g-48 {
    gap: 32px;
  }
  .p-64,
  .p-48,
  .p-40 {
    padding: 20px;
  }
  .p-32,
  .p-28 {
    padding: 24px;
  }
  .row:not(.keep) {
    flex-direction: column;
    align-items: stretch;
  }
  .row:not(.keep) > .w:not(.button):not(.text-link),
  .row:not(.keep) > .photo {
    width: 100%;
  }
  .row:not(.keep) > .grow {
    flex: none;
  }
  .actions {
    flex-wrap: wrap;
  }
  .row.keep > .eyebrow.w {
    width: 36px;
  }
  .button {
    height: auto;
    min-height: 56px;
    white-space: normal;
  }
  .centered > .container {
    align-items: stretch;
    text-align: left;
  }
  .hero {
    height: auto;
    min-height: 100svh;
  }
  .hero-inner {
    min-height: 100svh;
    padding-top: 150px;
    padding-bottom: 36px;
    gap: 56px;
  }
  .hero-image img {
    object-position: 64% center;
  }
  .hero-shade {
    background:
      linear-gradient(180deg, #080d0b99, transparent 180px),
      linear-gradient(90deg, #080d0be8 0%, #080d0ba6 70%, #080d0b55 100%);
  }
  .hero-copy h1 {
    font-size: 44px;
    line-height: 50px;
  }
  .hero-copy h1 br {
    display: inline;
  }
  .hero-operations {
    flex-direction: column;
    gap: 18px;
  }
  .hero-operations small {
    margin-top: 0;
  }
  .preview-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }
  .preview-tabs button {
    flex: 1 1 calc(50% - 4px);
  }
  .frame.p-12 {
    padding: 6px;
  }
  .frame.p-12 .ui-screen,
  .frame.p-16 .ui-screen,
  .frame.p-24 .ui-screen {
    border-radius: 8px;
  }
  .guide-steps li {
    gap: 16px;
    padding-inline: 0;
  }
  .guide-steps .eyebrow {
    width: 28px;
    margin-top: 8px;
  }
  .prompts .icon {
    margin-top: 2px;
  }
  .glossary > div {
    padding: 24px 0;
  }
  .table-scroll {
    margin-right: calc(-1 * var(--gutter));
    padding-right: var(--gutter);
  }
  .book-cover {
    gap: 24px;
  }
  .site-footer {
    padding: 48px 0;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }
  .footer-utilities {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
  .mega-menu {
    padding: 16px;
  }
  .menu-item {
    padding: 16px;
  }
  .mobile-account {
    gap: 20px;
  }
}
@media (max-width: 380px) {
  h1,
  .hero-copy h1 {
    font-size: 36px;
    line-height: 42px;
  }
  .header-inner {
    gap: 10px;
  }
  .mobile-toggle {
    gap: 4px;
    font-size: 14px;
  }
  .header-account .language-toggle {
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* The blog (src/blog): a mosaic of tiles for the list of articles, and the
   article page. Both stay on the dark surface, start under the header and use
   the same glass as the menus. */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font: 500 11px/17px var(--mono);
  text-transform: uppercase;
  color: var(--muted);
}
.glass {
  background: var(--raised);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 14%),
    inset 0 0 0 1px rgb(255 255 255 / 7%),
    0 18px 48px rgb(0 0 0 / 34%);
}
@supports (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .glass {
    background: rgb(25 39 31 / 58%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
  }
}
.go {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tag {
  width: fit-content;
  padding: 8px 12px 7px;
  border-radius: 8px;
  color: var(--text);
}
.mosaic-page {
  position: relative;
  overflow: hidden;
  padding: 156px 0 96px;
}
/* Light from the floodlights, top right. The page starts under the header,
   so the light runs up behind it and only the window cuts it. */
.mosaic-page::before,
.story::before {
  content: "";
  position: absolute;
  top: -420px;
  right: -260px;
  width: 1100px;
  height: 1100px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgb(87 217 144 / 18%) 0%,
    rgb(87 217 144 / 9%) 42%,
    rgb(87 217 144 / 0%) 100%
  );
}
.mosaic-page > .container,
.story > .container {
  position: relative;
}
.mosaic-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: end;
  gap: 64px;
}
.mosaic-head h1 {
  margin-top: 20px;
  font-size: clamp(56px, 8.4vw, 120px);
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.mosaic-head h1 em {
  font-style: normal;
  color: var(--green);
}
.segments {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin-top: 48px;
  padding: 6px;
  border-radius: 14px;
}
.segments a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition:
    background-color 0.18s,
    color 0.18s;
}
.segments a span {
  font: 500 10px/1 var(--mono);
  opacity: 0.7;
}
.segments a:hover {
  color: var(--text);
}
.segments a[aria-current] {
  background: var(--green);
  color: var(--ink);
}
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 292px;
  gap: 24px;
  margin-top: 32px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  padding: 28px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%);
  isolation: isolate;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s;
}
.tile:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px rgb(87 217 144 / 55%),
    0 28px 60px rgb(0 0 0 / 45%);
}
.tile > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tile:hover > img {
  transform: scale(1.05);
}
.tile.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(8 13 11 / 94%) 0%,
    rgb(8 13 11 / 58%) 38%,
    rgb(8 13 11 / 4%) 72%
  );
}
.tile .tag {
  position: absolute;
  top: 20px;
  left: 20px;
}
.tile h2,
.tile h3 {
  letter-spacing: -0.025em;
}
.tile h3 {
  font-size: 26px;
  line-height: 31px;
}
.tile.lead-tile {
  grid-column: span 8;
  grid-row: span 2;
  padding: 40px;
}
.tile.lead-tile h2 {
  max-width: 640px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.03;
  letter-spacing: -0.035em;
}
.tile.lead-tile .go {
  position: absolute;
  right: 40px;
  bottom: 40px;
  width: 72px;
  height: 72px;
}
.tile:hover .go {
  transform: translateX(6px);
}
.tile.s4 {
  grid-column: span 4;
}
.tile.s5 {
  grid-column: span 5;
}
.tile.s7 {
  grid-column: span 7;
}
/* a tile without a photograph: the date carries it */
.tile.note-tile {
  justify-content: space-between;
  background:
    radial-gradient(
      120% 90% at 100% 0%,
      rgb(87 217 144 / 16%),
      transparent 60%
    ),
    var(--deep);
}
.tile.note-tile .big-date {
  font: 500 64px/1 var(--mono);
  letter-spacing: -0.05em;
  color: var(--green);
}
.tile.note-tile .big-date small {
  display: block;
  margin-top: 10px;
  font: 500 11px/17px var(--mono);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
}
.tile .excerpt {
  max-width: 440px;
  font-size: 15px;
  line-height: 23px;
  color: var(--muted);
}
/* pages: numbers between two round steps, no bar */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 64px;
}
.pager ol {
  display: flex;
  gap: 4px;
}
.pager ol a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font: 500 13px/1 var(--mono);
  color: var(--muted);
  transition:
    background-color 0.18s,
    color 0.18s;
}
.pager ol a:hover {
  background: var(--raised);
  color: var(--text);
}
.pager ol a[aria-current] {
  background: var(--green);
  color: var(--ink);
}
.pager-step {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
  color: var(--text);
  transition:
    background-color 0.18s,
    box-shadow 0.18s;
}
.pager-step:hover {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px rgb(87 217 144 / 55%);
}
.pager-step[aria-disabled] {
  opacity: 0.32;
  pointer-events: none;
}
.pager-step.prev .icon {
  transform: rotate(180deg);
}
/* An article. */
.story {
  position: relative;
  overflow: hidden;
  padding: 148px 0 96px;
}
.story-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.back {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.back .icon {
  transform: rotate(180deg);
}
.story h1 {
  max-width: 1080px;
  margin: 32px 0 0 -0.04em;
  font-size: clamp(44px, 6.2vw, 90px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.story-lead {
  max-width: 760px;
  margin-top: 28px;
  font-size: 23px;
  line-height: 34px;
  color: var(--muted);
}
.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin-top: 40px;
  padding: 10px 20px 10px 10px;
  border-radius: 999px;
}
.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
  font: 500 11px/1 var(--mono);
  color: var(--ink);
}
.byline strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.story-cover {
  aspect-ratio: 1312 / 600;
  margin-top: 56px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%);
}
.story-cover img,
.prose figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-body {
  display: grid;
  grid-template-columns: 264px minmax(0, 720px) 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 72px;
}
.toc {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border-radius: 20px;
}
.toc .eyebrow {
  margin-bottom: 10px;
  padding: 0 12px;
}
.toc a {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--muted);
  transition:
    background-color 0.18s,
    color 0.18s;
}
.toc a:hover {
  color: var(--text);
}
.toc a.on {
  background: rgb(87 217 144 / 14%);
  color: var(--green);
}
.share {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-self: end;
}
.share a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  color: var(--text);
  transition:
    background-color 0.18s,
    box-shadow 0.18s;
}
.share a:hover {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px rgb(87 217 144 / 55%);
}
.read-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}
.read-progress span {
  display: block;
  height: 100%;
  background: var(--green);
  transform: scaleX(var(--read, 0));
  transform-origin: left;
}
.prose > * + * {
  margin-top: 24px;
}
.prose > p,
.prose li {
  font-size: 18px;
  line-height: 31px;
  color: rgb(242 246 239 / 80%);
}
.prose > p.intro {
  font-size: 23px;
  line-height: 35px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.prose h2 {
  margin-top: 72px;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.025em;
}
.prose h2 + * {
  margin-top: 20px;
}
.prose p a {
  font-weight: 600;
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: rgb(87 217 144 / 45%);
  text-underline-offset: 4px;
}
.prose ul,
.prose ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prose li {
  position: relative;
  padding-left: 28px;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.prose ol {
  counter-reset: step;
}
.prose ol > li {
  counter-increment: step;
  padding-left: 40px;
}
.prose ol > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 7px;
  font: 500 11px/17px var(--mono);
  color: var(--green);
}
.takeaways {
  margin-top: 40px;
  padding: 28px 32px 32px;
  border-radius: 20px;
}
.takeaways ul {
  margin-top: 18px;
  gap: 12px;
}
.takeaways li {
  font-size: 17px;
  line-height: 27px;
  color: var(--text);
}
.takeaways ul > li::before {
  top: 11px;
}
.takeaways + * {
  margin-top: 40px;
}
.prose figure {
  margin-top: 56px;
}
.prose figure.wide {
  margin-inline: -40px;
}
.prose figure img {
  aspect-ratio: 16 / 9;
  border-radius: 20px;
}
.prose figcaption {
  margin-top: 14px;
  font: 500 11px/17px var(--mono);
  text-transform: uppercase;
  color: var(--muted);
}
.prose figure.wide figcaption {
  padding-left: 40px;
}
.prose figure + * {
  margin-top: 56px;
}
.prose blockquote {
  margin: 64px 0 64px -40px;
  padding-left: 37px;
  border-left: 3px solid var(--green);
}
.prose blockquote p {
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
}
/* a table on the dark surface */
.prose .table-scroll {
  margin-top: 32px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%);
}
.prose table {
  min-width: 560px;
}
.prose th,
.prose td {
  font-size: 15px;
  color: var(--text);
}
.prose thead th {
  background: var(--raised);
}
.prose tbody th,
.prose tbody td {
  border-bottom: 1px solid rgb(255 255 255 / 9%);
}
.prose tbody tr:last-child > * {
  border-bottom: 0;
}
.note {
  margin-top: 40px;
  padding: 24px 28px 28px;
  border-radius: 20px;
  background:
    radial-gradient(
      120% 90% at 100% 0%,
      rgb(87 217 144 / 16%),
      transparent 60%
    ),
    var(--deep);
}
.note p + p {
  margin-top: 12px;
  color: var(--text);
}
.note + * {
  margin-top: 40px;
}
.author-card {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 72px;
  padding: 24px;
  border-radius: 20px;
}
.author-card .avatar {
  width: 56px;
  height: 56px;
  font-size: 13px;
}
.more {
  padding: 0 0 96px;
}
.more h2 {
  font-size: 44px;
  line-height: 48px;
  letter-spacing: -0.03em;
}
.more .mosaic {
  margin-top: 32px;
}
/* Tiles that stand alone in their row, and one beside the lead on its own. */
.tile.s12,
.tile.lead-tile.alone {
  grid-column: span 12;
}
.tile.tall {
  grid-row: span 2;
}
/* On a preview: a note that stays at the foot of the window. */
.preview-note {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 55;
  display: flex;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 12px;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 22px;
  color: var(--text);
}
.preview-note strong {
  font: 500 11px/22px var(--mono);
  text-transform: uppercase;
  color: var(--green);
}
.blog-empty {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 48px;
  padding: 40px;
  border-radius: 24px;
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.prose blockquote cite {
  display: block;
  margin-top: 16px;
  font: 500 11px/17px var(--mono);
  font-style: normal;
  text-transform: uppercase;
  color: var(--muted);
}
.prose h3 {
  margin-top: 48px;
}
.prose em {
  font-style: italic;
}
@media (max-width: 1100px) {
  .mosaic-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .tile.s4,
  .tile.s5,
  .tile.s7 {
    grid-column: span 6;
  }
  .tile.lead-tile {
    grid-column: span 12;
  }
  .story-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .toc,
  .share {
    position: static;
  }
  .share {
    flex-direction: row;
    justify-self: start;
  }
  .prose figure.wide,
  .prose blockquote {
    margin-inline: 0;
  }
  .prose figure.wide figcaption {
    padding-left: 0;
  }
  .prose blockquote {
    padding-left: 24px;
  }
}
@media (max-width: 640px) {
  .mosaic-page,
  .story {
    padding-top: 128px;
  }
  .mosaic {
    grid-auto-rows: 260px;
    gap: 16px;
  }
  .tile.lead-tile,
  .tile.s4,
  .tile.s5,
  .tile.s7,
  .tile.s12 {
    grid-column: span 12;
    grid-row: span 1;
    padding: 24px;
  }
  .tile.lead-tile {
    grid-row: span 2;
  }
  .tile.lead-tile .go {
    display: none;
  }
  .segments {
    width: 100%;
    overflow-x: auto;
  }
  .story-lead {
    font-size: 19px;
    line-height: 29px;
  }
  .byline {
    flex-wrap: wrap;
    border-radius: 20px;
  }
  .story-cover {
    aspect-ratio: 4 / 3;
    margin-top: 40px;
    border-radius: 16px;
  }
  .prose > p.intro {
    font-size: 20px;
    line-height: 31px;
  }
  .prose h2 {
    font-size: 27px;
    line-height: 34px;
  }
  .prose blockquote p {
    font-size: 27px;
    line-height: 34px;
  }
  /* the table scrolls inside its rounded box */
  .prose .table-scroll {
    margin-right: 0;
    padding-right: 0;
    overflow-x: auto;
  }
  .pager {
    gap: 12px;
  }
}