@import url("/fonts.css");
html, body { margin: 0; background: #0A0A0A; }
/* The bar: the hero's dark grey, see-through, fixed over the page. */
.home-bar {
  position: fixed; inset: 0 0 auto; z-index: 10; height: 64px; box-sizing: border-box; padding: 0 32px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; /* logo left, product/blog/docs centred on the screen, the rest right */
  background: rgb(10 10 10 / 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(244 241 232 / 0.1);
}
.home-bar-logo { display: flex; }
.home-bar-logo img { width: 36px; height: auto; }
.home-nav { display: flex; gap: 28px; justify-self: end; }
.home-nav-mid { justify-self: center; }
.home-nav a { color: #F4F1E8; text-decoration: none; font-size: 15px; letter-spacing: 0.02em; opacity: 0.85; }
.home-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* On a phone the five links and the logo don't fit with the middle links centred on the screen, so the bar packs them in a row with tighter gaps and smaller type; no link wraps. */
@media (max-width: 480px) {
  .home-bar { grid-template-columns: auto 1fr auto; padding: 0 16px; }
  .home-nav { gap: 12px; }
  .home-nav a { font-size: 13px; letter-spacing: 0; white-space: nowrap; }
}
/* The hero: plain dark grey. hero.js still puts the title's baselines on its (unseen) 16px lines. */
.home-main { position: relative; overflow: hidden; background: #0A0A0A; } /* the galaxy fills it, clipped here */
/* The footer: plain, on the page's dark grey. */
.home-foot { background: #0A0A0A; }
.home-main {
  box-sizing: border-box; padding: 98px 32px 88px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.home-title { position: relative; z-index: 1; text-shadow: 0 0 28px rgb(10 10 10 / 0.9), 0 0 8px rgb(10 10 10 / 0.8); /* over the galaxy, readable */
  margin: 0; max-width: 21ch; text-align: center; color: #fff;
  /* Each line a whole number of the hero's 16px squares; hero.js puts the baselines on grid lines. */
  font-weight: 500; font-size: clamp(2.7rem, 6.2vw, 5.76rem); line-height: round(up, 1.02em, 16px);
  letter-spacing: -0.03em; text-wrap: balance;
}
.baseline-mark { display: inline-block; width: 0; height: 0; }
/* The graphic's square is empty above its top nodes and below the codebase (about 3%); the margins take most
   of that back. A node's highest point is 8.8% down the square, less its 17px clash ring, so two squares stay clear of the title. */
/* The galaxy: galaxy.js draws it, square, under the title where the node graphic was. */
.home-figure { position: relative; z-index: 1; width: min(920px, 100%); margin: 0 auto; padding-top: 420px; } /* room for the galaxy's core and arms under the title */
.home-caption { position: relative; text-align: center; font-family: "Alliance No.1", ui-sans-serif, system-ui, sans-serif; font-size: 14px; letter-spacing: 0.04em; color: #FFFFFF; text-shadow: 0 0 12px rgb(10 10 10 / 0.9); }
.home-galaxy { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* the hero's background layer */

/* The sections below the first screen, all on the hero's dark grey. One scale for every section: --h2 its heading,
   --h3 a name or figure inside it, --body its words, --label its small grey labels; every section has the same
   room above it (--sec-y) and from its heading to what it holds (--gap), and the same width as the bar's content. */
.home-more { --cream: #F4F1E8; --h2: clamp(2.75rem, 6vw, 5.5rem); --h3: clamp(2.25rem, 3.6vw, 3.5rem); --body: 1.125rem; --label: 13px;
  --sec-x: max(2rem, (100% - 1240px) / 2); --sec-y: 6rem; --gap: 4rem; color: var(--cream); padding-bottom: var(--sec-y); }
/* A short window takes less room around every section alike, so What we're building still fits it. */
@media (max-height: 820px) { .home-more { --sec-y: 4rem; } }
.home-more :is(h2, h3, p, ul) { margin: 0; }
.home-more ul { padding: 0; }
.sr-only { clip-path: inset(50%); white-space: nowrap; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; }
.headline { font-weight: 500; letter-spacing: -0.055em; line-height: 0.84; text-wrap: balance; }
.dotgrid { background-image: radial-gradient(circle, rgb(244 241 232 / 0.35) 0.9px, transparent 1.1px); background-size: 6px 6px; }
.desk-dots { position: absolute; inset: 0; opacity: 0.5; }
.desk-tag { position: absolute; left: 0; top: 0; z-index: 10; background: #1E1E1E; padding-inline: 0.25rem; font-size: 17px; line-height: 1.5rem; color: var(--cream); }
.os { border: 1px solid #1E1E1E; background: #DDDDDD; color: #1E1E1E; }
.os-bar { display: flex; align-items: center; gap: 0.5rem; background: #1E1E1E; padding-left: 0.25rem; font-size: 17px; line-height: 1.25rem; color: #DDDDDD; }
.os-body { margin: 3px; border: 1px solid #1E1E1E; }

.problem, .building, .first, .cta { position: relative; padding: var(--sec-y) var(--sec-x) 0; }
.problem-head { padding: 1.5rem 1rem; }
/* decay.js's grid sits behind, showing through the heading; the cards stay plain over it. */
.decay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.problem-grid { position: relative; }
.problem-title { text-align: center; font-size: var(--h2); padding: 0.25em 0.2em 0.35em; }
.problem-grid { margin-top: var(--gap); display: grid; }
/* What we solve's three problems, laid out as the product page's two halves are: a small number, the name large, the
   line under it, side by side on the page's grey with a thin divider between them and no frame around each. */
.problem-card { position: relative; min-width: 0; padding: 2.5rem 2rem; }
.problem-card + .problem-card { border-top: 1px solid rgb(244 241 232 / 0.3); }
.problem-n { position: absolute; top: 1.4rem; right: 1.6rem; margin: 0; font-size: var(--label); letter-spacing: 0.12em; color: rgb(244 241 232 / 0.55); }
/* The number sits in the box's top right corner; a faint line splits the name from its words. */
.home-more .problem-name { margin: 0 0 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgb(244 241 232 / 0.15); font-size: var(--h3); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.problem-card > p:last-child { margin: 0; max-width: 34ch; font-size: var(--body); line-height: 1.45; color: rgb(244 241 232 / 0.8); text-wrap: pretty; }

.building > :not(.decay) { position: relative; }
.building-head { width: fit-content; max-width: 100%; margin-inline: auto; padding: 1.5rem 1rem; } /* centred, its brackets hugging the heading */
.building-title { width: fit-content; max-width: 100%; text-align: center; padding: 0.25em 0.2em 0.35em; font-size: var(--h2); }
.building-grid { margin-top: var(--gap); display: grid; gap: 3rem; }
.building-col { min-width: 0; }
.acro { position: relative; overflow: hidden; background: #0A0A0A; color: var(--cream); }
.home-more .acro-list { position: relative; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 2.5rem 1rem 1rem; }
.acro-card .os-body { background: #FEFEFE; padding: 0.5rem; }
.acro-1 { z-index: 0; } .acro-2 { z-index: 1; } .acro-3 { z-index: 2; } .acro-4 { z-index: 3; }
.acro-letter { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; background: #1E1E1E; font-size: 3.75rem; line-height: 1; color: #DDDDDD; }
.home-more .acro-word { margin-top: 0.5rem; font-size: 1.5rem; line-height: 1.5rem; }
.building-label { font-size: 1.125rem; line-height: 1.25rem; }
.building-text { margin-top: 2.5rem; display: flex; max-width: 600px; flex-direction: column; gap: 1.5rem; font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; text-wrap: pretty; }

/* Talk to the founders: a readout panel like the others, the line large and Contact a clear button. */
.cta-panel.readout { margin-top: 0; }
.cta-box { display: flex; flex-direction: column; gap: 2rem; padding: 2.5rem 2rem; }
.cta-title { font-size: var(--h3); font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.cta-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.5rem; border: 1px solid rgb(244 241 232 / 0.6); color: var(--cream); font-size: var(--body); font-weight: 500; letter-spacing: -0.02em; text-decoration: none; transition: background 0.15s, color 0.15s; }
.cta-arrow { transition: translate 0.15s; }
.cta-link:hover, .cta-link:focus-visible { background: var(--cream); color: #0A0A0A; }
.cta-link:hover .cta-arrow, .cta-link:focus-visible .cta-arrow { translate: 4px 0; }

/* What we solve: three equal cards in one row from 960px, their titles and texts lined up across them; stacked below. */
@media (min-width: 60rem) {
  .problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .problem-card + .problem-card { border-top: 0; border-left: 1px solid rgb(244 241 232 / 0.3); }
}
@media (min-width: 48rem) {
  .cta-box { flex-direction: row; align-items: center; justify-content: space-between; }
  .cta-link { align-self: center; }
  .building-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
  .acro { height: 540px; }
  .home-more .acro-list { display: block; padding: 0; }
  .acro-card { position: absolute; width: 230px; }
  /* glad.agent starts past the end of "Lineage" (glad.lineage's left + 130px) where the panel has room, glad.decisions a step on, both kept inside. */
  .acro-1 { left: 7%; top: 60px; } .acro-2 { left: 22%; top: 150px; }
  .acro-3 { left: min(calc(22% + 130px), calc(85% - 238px)); top: 240px; }
  .acro-4 { left: min(calc(37% + 130px), calc(100% - 238px)); top: 330px; }
}
/* Where the panel is too narrow for that, the cards are narrower and two to a row, each next card starting past the
   word on the one before, so no word is covered: glad.agent and glad.decisions a row below "Lineage". */
@media (min-width: 48rem) and (max-width: 1199px) {
  .acro-card { width: 200px; }
  .acro-1 { left: calc(50% - 158px); } .acro-2 { left: calc(50% - 63px); }
  .acro-3 { left: calc(50% - 138px); top: 290px; } .acro-4 { left: calc(50% - 43px); top: 380px; }
}
/* As in the redesign: its headlines and text of 20px and up are Alliance No.2. */
.home-more :is(.headline, .cta-link, .problem-name, .way-name, .acro-letter, .acro-word, .building-text, .cta-title) { font-family: "Alliance No.2", ui-sans-serif, system-ui, sans-serif; }

/* The footer: the insignia and the abloh wordmark, turned white, side by side. */
.home-foot { height: 192px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.home-foot img { display: block; height: 48px; width: auto; }
.home-foot .wordmark { height: 40px; filter: invert(1); }

/* The redesign's corner marks around each section heading (never the hero title), in the section's text colour.
   The headings' line height (0.84) leaves descenders outside the line box; their em padding keeps them clear of the marks. */
.problem-head, .building-head { position: relative; }
.corners { position: absolute; inset: 0; pointer-events: none; opacity: 0.7; }
.corners span { position: absolute; width: 0.625rem; height: 0.625rem; border: 0 solid currentColor; }
.corners span:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.corners span:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.corners span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.corners span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }


/* First of its kind: a readout panel on the hero's grey and grid; the measured latency large, the rest as labelled lines. */
/* First of its kind and Security share one dark grey stretch, decay.js's spider silk drawn across both at once. */
.silk { position: relative; }
.silk > :not(.decay) { position: relative; }
.readout { margin-top: var(--gap); border: 1px solid rgb(244 241 232 / 0.3); background: rgb(10 10 10 / 0.85); }
.readout-bar { display: flex; justify-content: space-between; padding: 0.5rem 1rem; border-bottom: 1px solid rgb(244 241 232 / 0.3); font-size: var(--label); letter-spacing: 0.12em; color: rgb(244 241 232 / 0.7); }
/* First of its kind's and Security's panels keep their dark backing over the lines behind, with no frame round them. */
.first > .readout { border: 0; }
.first > .readout > :is(.readout-bar, .readout-body) { padding-inline: 0; } /* with no frame, their contents start at the section's edge */
.readout-body { display: grid; gap: 3rem; padding: 2.5rem 2rem; }
.readout-number { font-family: "Alliance No.2", ui-sans-serif, system-ui, sans-serif; font-size: var(--h3); font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.readout-number span { margin-left: 0.15em; font-size: 0.35em; letter-spacing: 0; color: rgb(244 241 232 / 0.7); }
.home-more .readout-caption { margin-top: 1rem; font-size: var(--body); color: rgb(244 241 232 / 0.7); }
.readout-lines { margin: 0; }
.readout-lines div { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; padding: 0.9rem 0; border-top: 1px solid rgb(244 241 232 / 0.15); }
.readout-lines dt { font-size: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(244 241 232 / 0.55); padding-top: 0.2em; }
.readout-lines dd { margin: 0; font-size: var(--body); line-height: 1.35; }
.first:not(.security) .readout-lines div:last-child dd::after { content: ""; display: inline-block; width: 0.55em; height: 1.05em; margin-left: 0.2em; vertical-align: -0.15em; background: var(--cream); animation: readout-blink 1.1s steps(2, jump-none) infinite; }
@keyframes readout-blink { 50% { opacity: 0; } }
@media (min-width: 64rem) { .readout-body { grid-template-columns: 1fr 1.25fr; align-items: center; } }
@media (prefers-reduced-motion: reduce) { .first:not(.security) .readout-lines div:last-child dd::after { animation: none; } }

/* Security: the three ways to run glad side by side, a thin line over each, as What we solve's three; stacked on a phone. */
.ways { margin-top: var(--gap); display: grid; gap: 3rem; }
.ways > div { padding-top: 1.25rem; border-top: 1px solid rgb(244 241 232 / 0.3); }
.home-more .way-name { margin-bottom: 1rem; font-size: var(--h3); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.ways p { font-size: var(--body); line-height: 1.45; color: rgb(244 241 232 / 0.8); }
@media (min-width: 48rem) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* What we're building as a readout beside the glad.Acronym panel. */
.building-readout { margin-top: 0; align-self: center; border: 0; background: none; } /* the words on the page, centred beside the acronym */
.building-readout .readout-body { display: block; padding: 0 0 0 2rem; }
.building-paras { display: flex; flex-direction: column; gap: 1.25rem; font-size: var(--body); line-height: 1.45; color: rgb(244 241 232 / 0.8); }
/* Alliance ships no italic here, so the italic words use Helvetica Neue's real Medium Italic, never a synthesised slant. */
.home-more .headline-em { font-family: "Helvetica Neue", ui-sans-serif, system-ui, sans-serif; font-style: italic; font-synthesis: none; letter-spacing: -0.04em; margin-left: 0.06em; }

/* The IDE section: the line under the heading, a band of dots moving in slow waves (hero.js draws it), then Coming soon, centred. */
.install { position: relative; padding: var(--sec-y) var(--sec-x) var(--gap); } /* room under "Coming soon" before First of its kind's silk starts */
.install-art { display: block; width: 100%; height: 300px; margin-top: 3rem; }
.home-more .install-say { margin-top: var(--gap); text-align: center; font-family: "Alliance No.2", ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.install-ways { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: center; align-items: center; gap: 1rem; }
.install-dl { display: flex; align-items: center; justify-content: center; gap: 0.65rem; min-height: 4rem; padding: 0 1rem; border: 1px solid var(--cream); background: var(--cream); color: #0A0A0A; font-family: "Alliance No.2", ui-sans-serif, system-ui, sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.install-ways.soon { display: flex; justify-content: center; }
.install-ways.soon .install-soon { display: inline-block; margin: 0; width: auto; min-height: 0; padding: 11px 20px; border: 1px dashed rgb(244 241 232 / 0.35); background: none; color: rgb(244 241 232 / 0.6); font-size: 1rem; font-weight: 500; cursor: default; } /* as /ide's: muted, plainly not a button */
/* First of its kind's figure stands a little larger than the other names, its caption a little larger than the lines beside it. */
.first:not(.security) .readout-number { font-size: calc(var(--h3) * 1.4); }
.first:not(.security) .readout-caption { font-size: 1.25rem; line-height: 1.35; }
/* Talk to the founders has no frame round it; its label, line and words start at the section's edge like every other section's. */
.cta-panel.readout { border: 0; background: none; }
.cta-panel .readout-bar, .cta-box { padding-inline: 0; }
/* Talk to the founders stands apart from Security, with twice the room above it of any other section. */
.cta { padding-top: calc(var(--sec-y) * 2); }
/* The cookie choice (analytics.js): a corner card on the page's dark grey, as styles.css has it on the other pages. */
.consent { position: fixed; left: 24px; bottom: 24px; z-index: 20; width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 20px; border: 1px solid #F4F1E8; background: #0A0A0A; color: #F4F1E8; font-family: "Alliance No.1", ui-sans-serif, system-ui, sans-serif; }
.consent-copy { margin: 0; font-size: 12px; line-height: 1.7; letter-spacing: 0.02em; color: #DCE3DD; }
.consent-copy a { color: inherit; white-space: nowrap; text-underline-offset: 3px; }
.consent-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent-actions .btn { height: 40px; padding: 0; border: 1px solid #F4F1E8; border-radius: 0; font: inherit; font-size: 13px; letter-spacing: 0.06em; cursor: pointer; }
.consent-actions .b-in { background: #F4F1E8; color: #0A0A0A; }
.consent-actions .b-out { background: transparent; color: #F4F1E8; }
@media (max-width: 620px) { .consent { left: 16px; right: 16px; bottom: 16px; width: auto; } .consent-actions .btn { height: 44px; } }
/* On a phone: the sections closer to the screen's edges and to each other, every text column the screen's full width,
   the readout's labels over their lines, and no tall empty stretch between sections. */
@media (max-width: 760px) {
  .home-main { padding: 96px 20px 48px; }
  .home-figure { padding-top: 360px; }
  .home-caption { font-size: 15px; }
  .home-more { --sec-x: 20px; --sec-y: 4.5rem; --gap: 2rem; --body: 1.0625rem; }
  .problem-card { padding: 2rem 0; }
  .problem-n { top: 2.2rem; right: 0; }
  .problem-card > p:last-child { max-width: none; }
  .building-readout { margin-top: 0; }
  .building-readout .readout-body { padding: 0; }
  .building-grid { gap: 2rem; }
  .install-say { text-wrap: balance; }
  .install-art { height: 200px; margin-top: 2rem; }
  .install-ways { margin-top: 2rem; }
  .readout-body { gap: 2rem; }
  .readout-lines div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.875rem; padding: 1rem 0; } /* still a two-column table: label, line */
  .readout-lines dt { font-size: 11px; letter-spacing: 0.08em; padding-top: 0.35em; }
  .ways { gap: 2rem; }
  .cta { padding-top: var(--sec-y); }
  .cta-box { gap: 1.5rem; }
  .cta-link { justify-content: center; align-self: stretch; min-height: 52px; box-sizing: border-box; }
  .home-foot { height: 144px; }
}