/* Landing: the offer in three stages, the questions and the contact block,
   in the same warm charcoal and type scale as the colony sections. */
.offer {
  padding: 100px 7vw;
  background: #15120e;
  scroll-margin-top: 25px;
  border-top: 1px solid #c3b78a1f;
}
.offer-intro {
  max-width: 760px;
}
.offer h2 {
  font-size: clamp(40px, 4.3vw, 70px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 1.08;
  margin: 0 0 28px;
}
.offer h2 em {
  color: #d9c29f;
}
.offer-intro > p:last-child,
.offer-start > p:not(.eyebrow) {
  color: #c9c5b5;
  max-width: 600px;
  font-size: 15px;
  line-height: 1.9;
  margin: 0;
}
.offer-stages {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 34px;
  margin: 60px 0 0;
  padding: 0;
}
.offer-stages li {
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  border-top: 1px solid #c3b78a52;
}
.stage-name {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
  font:
    11px Mono,
    monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e6b584;
}
.stage-name span {
  font-size: 34px;
  letter-spacing: -0.04em;
  color: #f1e7d3;
}
.offer-stages h3 {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: #f1e7d3;
  margin: 0 0 14px;
}
.offer-stages li > p:not(.stage-name):not(.stage-result):not(.stage-proof) {
  color: #bdb9a8;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 22px;
}
.stage-result {
  margin: 0 0 22px;
  padding: 14px 0 0 16px;
  border-left: 1px solid #d9b07a;
  color: #e4dccb;
  font-size: 14px;
  line-height: 1.7;
}
.stage-result b {
  display: block;
  margin-bottom: 4px;
  font:
    10px Mono,
    monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b8b29f;
}
.offer-promises {
  margin-top: 70px;
}
.offer-bridge {
  margin-top: 40px;
}
.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  margin-top: 50px;
}
.faq-item {
  padding: 26px 0 30px;
  border-top: 1px solid #c3b78a35;
}
.faq-item h3 {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #f1e7d3;
  margin: 0 0 12px;
}
.faq-item p {
  color: #bdb9a8;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
  max-width: 560px;
}
.offer-start {
  background: #120f0b;
}
.start-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  margin-top: 36px;
}
.start-actions .enter-button {
  margin: 0;
}
@media (max-width: 900px) {
  .offer-stages {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .faq {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 650px) {
  .offer {
    padding: 70px 6vw;
  }
  .offer-stages {
    margin-top: 44px;
  }
  .offer-stages h3 {
    font-size: 20px;
  }
  .faq {
    margin-top: 30px;
  }
}
/* Even line breaks where the browser supports it. */
.invitation-copy,
.offer-intro > p,
.offer-stages h3,
.offer-stages p,
.faq-item h3,
.faq-item p {
  text-wrap: pretty;
}
@media (max-width: 650px) {
  /* The colony stays one tap away under the main button. */
  .surface-nav .nav-colony {
    display: none;
  }
}

/* Proof from real work under each stage. */
.stage-proof {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px dashed #c3b78a33;
  color: #bdb9a8;
  font-size: 13px;
  line-height: 1.7;
}
.stage-proof b {
  display: block;
  margin-bottom: 4px;
  font:
    10px Mono,
    monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b8b29f;
}
.stage-proof a,
.stage-proof span {
  color: #e4c89e;
}
.stage-proof a {
  border-bottom: 1px solid #b2a17b80;
}
.offer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 34px;
  margin-top: 40px;
}

/* Author box on the guide and contact pages. */
.author {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  max-width: 640px;
  margin-top: 60px;
  padding: 26px 0 0;
  border-top: 1px solid #c3b78a35;
}
/* On the contact page the full portrait fills the second column. */
.contact-layout .author {
  flex-direction: column;
  align-self: start;
  margin-top: 0;
  padding: 0;
  border-top: 0;
}
.author img {
  width: 120px;
  height: auto;
  flex-shrink: 0;
  border: 1px solid #c3b78a52;
}
.contact-layout .author img {
  width: 100%;
  max-width: 420px;
}
.author p {
  margin: 0 0 10px;
  color: #cdc6b6;
  font-size: 14px;
  line-height: 1.8;
}
.author .author-name {
  margin-bottom: 6px;
  color: #f1e7d3;
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* The guide reads like the journey pages. */
.breadcrumb {
  display: flex;
  gap: 10px;
  margin-bottom: 40px;
  font:
    10px Mono,
    monospace;
  letter-spacing: 1px;
  color: #b8b29f;
}
.guide .journey-intro h1 {
  max-width: 900px;
}
.guide .journey-intro > p.guide-lead {
  font-size: 17px;
  line-height: 1.85;
  color: #e4dccb;
}
.guide .journey-intro > p.guide-byline,
.guide > p.guide-byline {
  font:
    10px/1.8 Mono,
    monospace;
  letter-spacing: 1px;
  color: #b8b29f;
}
.guide-questions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: question;
}
.guide-questions li {
  counter-increment: question;
  padding-top: 18px;
  border-top: 1px solid #c3b78a35;
}
.guide-questions h3::before {
  content: counter(question, decimal-leading-zero) "  ";
  font:
    12px Mono,
    monospace;
  color: #e6b584;
}
.guide-questions h3,
.guide-law dt {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #f1e7d3;
}
.guide-questions p,
.guide-law dd {
  margin: 0;
  color: #bdb9a8;
  font-size: 14px;
  line-height: 1.8;
}
.guide-list,
.guide-checklist {
  max-width: 760px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}
.guide-list li,
.guide-checklist li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid #c3b78a1f;
  color: #cdc6b6;
  font-size: 15px;
  line-height: 1.7;
}
.guide-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 23px;
  width: 10px;
  height: 1px;
  background: #d9b07a;
}
.guide-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 14px;
  height: 14px;
  border: 1px solid #d9b07a;
}
.guide-caution,
.guide-note {
  max-width: 720px;
  margin: 24px 0;
  padding: 14px 0 14px 18px;
  border-left: 1px solid #d9b07a;
  color: #e4dccb;
  font-size: 14px;
  line-height: 1.8;
}
.guide-law {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px 40px;
  margin: 36px 0 0;
}
.guide-law > div {
  padding-top: 18px;
  border-top: 1px solid #c3b78a35;
}
.guide-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 36px;
  font-size: 13px;
}
.guide-sources b {
  font:
    10px Mono,
    monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b8b29f;
  align-self: center;
}
.guide-sources a,
.guide-offer {
  color: #e4c89e;
}
.guide .offer-stages {
  margin-top: 36px;
}
.guide-offer {
  margin-top: 30px;
}
.guide-cta {
  padding: 70px 0 10px;
}
.guide-cta h2 {
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.1;
  margin: 0 0 20px;
}
.guide-cta h2 em {
  color: #d9c29f;
}
.guide-cta > p {
  color: #cdc6b6;
  font-size: 15px;
  line-height: 1.9;
  margin: 0;
}
.guide-cta .enter-button {
  margin: 0;
}
/* The architect and the engineer, side by side. */
.role-table {
  width: 100%;
  max-width: 980px;
  margin: 30px 0 0;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.75;
}
.role-table caption {
  padding-bottom: 14px;
  text-align: left;
  font:
    10px Mono,
    monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b8b29f;
}
.role-table th,
.role-table td {
  padding: 16px 22px 16px 0;
  border-top: 1px solid #c3b78a35;
  text-align: left;
  vertical-align: top;
}
.role-table thead th {
  border-top: 0;
  font:
    11px Mono,
    monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e6b584;
}
.role-table tbody th {
  width: 18%;
  font-size: 15px;
  font-weight: 400;
  color: #f1e7d3;
}
.role-table td {
  color: #cdc6b6;
}
.roles-projects a {
  color: #f1e7d3;
  text-decoration: underline;
  text-decoration-color: #e6b58480;
  text-underline-offset: 4px;
}
.roles-projects b {
  font-weight: 400;
  color: #f1e7d3;
}
/* On phones each row becomes a card, every cell labelled with its role. */
@media (max-width: 650px) {
  .role-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .role-table,
  .role-table caption,
  .role-table tbody,
  .role-table tr,
  .role-table tbody th,
  .role-table td {
    display: block;
    width: auto;
  }
  .role-table tr {
    padding: 16px 0 6px;
    border-top: 1px solid #c3b78a35;
  }
  .role-table tbody th,
  .role-table td {
    padding: 0 0 12px;
    border-top: 0;
  }
  .role-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font:
      10px Mono,
      monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #e6b584;
  }
}
.footer-links {
  display: flex;
  gap: 18px;
}
.footer-links a {
  color: #d4cdbf;
}
@media (max-width: 650px) {
  .author img {
    width: 96px;
  }
  .guide .journey-intro > p.guide-lead {
    font-size: 15px;
  }
}
/* The footer menu wraps on the narrowest phones; French words run longer. */
.profile-footer nav {
  flex-wrap: wrap;
  row-gap: 10px;
}
/* The address under the booking button, for people whose browser opens no mail app. */
.offer-start > p.start-email,
.guide-cta > p.start-email,
.contact-intro > p.start-email {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #bdb9a8;
}
.start-email a {
  color: #f1e7d3;
  text-decoration: underline;
  text-decoration-color: #e6b58480;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
/* "Confidentialité." is one long word; on the narrowest phones it fits a size down. */
@media (max-width: 360px) {
  .privacy .journey-intro h1 {
    font-size: 44px;
  }
}

/* The 1-minute AI check under the hero: one question at a time, the result
   with the form to send it, then what to sort out first. */
.offer-check {
  background: #171410;
}
.check {
  margin-top: 50px;
  scroll-margin-top: 25px;
}
.check-progress {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 4px;
}
.check-progress p {
  margin: 0;
  white-space: nowrap;
  font:
    11px Mono,
    monospace;
  letter-spacing: 1.5px;
  color: #b8b29f;
}
.check-track {
  position: relative;
  flex: 1;
  max-width: 420px;
  height: 2px;
  background: #c3b78a35;
}
.check-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: #e6b584;
  transition: width 0.3s;
}
.check[data-step="2"] .check-track span {
  width: 40%;
}
.check[data-step="3"] .check-track span {
  width: 60%;
}
.check[data-step="4"] .check-track span {
  width: 80%;
}
.check[data-step="5"] .check-track span {
  width: 100%;
}
.check-questions {
  list-style: none;
  margin: 0;
  padding: 0;
}
.check-questions li {
  border-top: 1px solid #c3b78a35;
}
.check.is-stepping .check-questions li {
  border-top: 0;
}
.check.is-stepping .check-questions li:not(.is-current) {
  display: none;
}
.check-questions fieldset {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.7fr);
  gap: 16px 40px;
  min-width: 0;
  margin: 0;
  padding: 26px 0;
  border: 0;
}
/* A floated legend takes part in the grid like any other child. */
.check-questions legend {
  float: left;
  padding: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #f1e7d3;
  text-wrap: pretty;
}
.check-topic {
  display: block;
  margin-bottom: 10px;
  font:
    10px Mono,
    monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e6b584;
}
.check-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.check-options label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #c3b78a35;
  color: #cdc6b6;
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.check-options label:hover {
  border-color: #c3b78a80;
}
.check-options label:has(input:checked) {
  border-color: #e6b584;
  background: #e6b58414;
  color: #f1e7d3;
}
.check-options input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #e6b584;
}
.check-options input:focus-visible {
  outline: 2px solid #f4ce97;
  outline-offset: 3px;
}
.check-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
  padding-top: 10px;
}
.check-bar .enter-button {
  margin: 0;
}
.check-back {
  font-size: 13px;
}
.check-status {
  margin: 0;
  color: #e6b584;
  font-size: 13px;
  line-height: 1.6;
}
.check-status:empty {
  display: none;
}
.check-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-areas:
    "verdict next"
    "gaps next";
  align-items: start;
  gap: 36px 56px;
  margin-top: 50px;
  padding: 36px;
  border: 1px solid #e6b58466;
  background: #120f0b;
  scroll-margin-top: 25px;
}
.check-verdict {
  grid-area: verdict;
}
.check-next {
  grid-area: next;
}
.check-gaps {
  grid-area: gaps;
}
.check-result .eyebrow {
  margin-bottom: 14px;
}
.check-score {
  margin: 0 0 22px;
  font:
    11px Mono,
    monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b8b29f;
}
.check-score b {
  margin: 0 2px 0 10px;
  font:
    400 54px/1 Inter,
    Arial,
    sans-serif;
  letter-spacing: -0.04em;
  color: #f1e7d3;
}
.check-stage h3 {
  margin: 0 0 12px;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: #e6b584;
}
.check-stage p,
.check-next > p {
  margin: 0 0 14px;
  color: #cdc6b6;
  font-size: 14px;
  line-height: 1.8;
  text-wrap: pretty;
}
.check-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
}
.check-gaps h3,
.check-next h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #f1e7d3;
}
.check-gaps h3 {
  font-size: 18px;
}
.check-gaps .guide-list {
  margin: 0;
}
.check-gaps .guide-list li {
  font-size: 14px;
  text-wrap: pretty;
}
.check-next > p.start-email {
  margin: 14px 0 0;
  font-size: 13px;
  color: #bdb9a8;
}
@media (prefers-reduced-motion: reduce) {
  .check-track span {
    transition: none;
  }
}
@media (max-width: 900px) {
  .check-questions fieldset,
  .check-options {
    grid-template-columns: minmax(0, 1fr);
  }
  .check-result {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "verdict"
      "next"
      "gaps";
    gap: 34px;
    padding: 26px 22px;
  }
}
@media (max-width: 650px) {
  .check {
    margin-top: 30px;
  }
  .check-questions legend {
    font-size: 18px;
  }
  .check-score b {
    font-size: 44px;
  }
}

/* The hero photo is the way into the colony: the side with the ant and the
   tunnel is one link, and pointing at it carries the view into the tunnel. */
.ant-door {
  position: absolute;
  z-index: -1;
  top: 12%;
  right: 0;
  bottom: 12%;
  left: max(57%, calc(7vw + 724px));
  color: #eee2c9;
  text-decoration: none;
}
/* Warm light from the tunnel; it fades out inside its own circle, so it
   never shows an edge. */
.ant-door::before {
  content: "";
  position: absolute;
  top: 32%;
  left: 58%;
  width: 75%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(closest-side, #f3c98a3d, transparent);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.ant-door-label {
  position: absolute;
  top: 44%;
  left: max(8%, 32px);
  max-width: calc(100% - 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
/* A slim pill: enough to read over the bright tunnel, no more. */
.ant-door-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 20px 7px 7px;
  border: 1px solid #e6b58457;
  border-radius: 999px;
  background: #11130fa6;
  backdrop-filter: blur(6px);
  transition:
    border-color 0.6s ease,
    background-color 0.6s ease;
}
.ant-door .marker-ring {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-color: #f4ce97;
  transition:
    scale 0.6s ease,
    border-color 0.6s ease;
}
.ant-door .marker-ring:after {
  inset: 12px;
  background: #f4ce97;
}
.ant-door-text {
  display: flex;
  flex-direction: column;
}
.ant-door-text small {
  font:
    9px/1.6 Mono,
    monospace;
  letter-spacing: 1.8px;
  color: #f4ce97;
}
.ant-door-text b {
  font:
    500 15px/1.35 Inter,
    Arial,
    sans-serif;
  letter-spacing: -0.01em;
  color: #fbf3e4;
}
.ant-door-end {
  white-space: nowrap;
}
.ant-door-end span {
  display: inline-block;
  transition: translate 0.6s ease;
}
/* The line under the pill appears on hover or focus. */
.ant-door-line {
  max-width: 280px;
  padding-left: 10px;
  font:
    13px/1.55 Inter,
    Arial,
    sans-serif;
  color: #f1e7d3;
  text-shadow:
    0 1px 10px #11130f,
    0 0 3px #11130f;
  opacity: 0;
  translate: 0 -4px;
  transition:
    opacity 0.6s ease,
    translate 0.6s ease;
}
.ant-door:focus-visible {
  outline: none;
}
.ant-door:focus-visible .ant-door-pill {
  outline: 2px solid #f4ce97;
  outline-offset: 4px;
}
.ant-door:hover::before,
.ant-door:focus-visible::before {
  opacity: 1;
}
.ant-door:hover .ant-door-line,
.ant-door:focus-visible .ant-door-line {
  opacity: 1;
  translate: none;
}
.ant-door:hover .ant-door-pill,
.ant-door:focus-visible .ant-door-pill {
  border-color: #f4ce97;
  background-color: #11130fd1;
}
.ant-door:hover .marker-ring,
.ant-door:focus-visible .marker-ring {
  scale: 1.15;
}
.ant-door:hover .ant-door-end span,
.ant-door:focus-visible .ant-door-end span {
  translate: 4px 0;
}
/* The push into the tunnel, around the tunnel's opening. */
.surface-image {
  transform-origin: 80% 34%;
  transition:
    scale 1.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 1.2s ease;
}
.surface:has(.ant-door:hover) .surface-image,
.surface:has(.ant-door:focus-visible) .surface-image {
  scale: 1.07;
  filter: saturate(0.9) brightness(1.08);
}
/* Where the photo side is narrow, the words may wrap inside the pill. */
@media (max-width: 1150px) {
  .ant-door-label {
    top: 32%;
    left: 16px;
    right: 16px;
    max-width: none;
  }
  .ant-door-pill {
    border-radius: 24px;
    padding: 9px 14px 9px 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .surface:has(.ant-door:hover) .surface-image,
  .surface:has(.ant-door:focus-visible) .surface-image {
    scale: none;
  }
}
[data-motion="paused"] .surface:has(.ant-door:hover) .surface-image,
[data-motion="paused"] .surface:has(.ant-door:focus-visible) .surface-image {
  scale: none;
}
@media (max-width: 1000px) {
  .ant-door {
    top: 10%;
    bottom: 14%;
    left: calc(84vw + 4px);
  }
  .ant-door-label {
    top: 36%;
    left: 10px;
    right: 10px;
  }
  .ant-door-pill {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 18px;
    padding: 10px;
  }
  .ant-door-line {
    display: none;
  }
}
/* On phones the hero text sits at the bottom and the photo fills the space
   above it, so the door takes that space in the flow and its label always
   sits just above the text, whatever the screen height. */
@media (max-width: 650px) {
  .ant-door {
    position: relative;
    inset: auto;
    order: 1;
    flex: 1 0 64px;
  }
  .invitation {
    order: 2;
  }
  .surface-footer {
    order: 3;
  }
  .ant-door-label {
    top: auto;
    right: 6vw;
    bottom: 6px;
    left: 6vw;
    gap: 6px;
  }
  .ant-door-pill {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    border-radius: 999px;
    padding: 7px 18px 7px 7px;
  }
}

/* About: the portrait, what Elias brings, then what he has built. The
   portrait always shows whole, never cropped. */
.about {
  padding: 100px 7vw;
  background: #120f0b;
  border-top: 1px solid #c3b78a1f;
  scroll-margin-top: 25px;
}
.about-person {
  display: grid;
  grid-template-columns: minmax(220px, 380px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.about-photo {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #c3b78a52;
}
.about h2 {
  font-size: clamp(36px, 3.8vw, 62px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.08;
  margin: 0 0 26px;
}
.about h2 em {
  color: #d9c29f;
}
.about-text > p:not(.eyebrow) {
  max-width: 640px;
  margin: 0;
  color: #c9c5b5;
  font-size: 15px;
  line-height: 1.9;
  text-wrap: pretty;
}
.about-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.about-facts li {
  padding: 7px 12px;
  border: 1px solid #c3b78a40;
  color: #e4dccb;
  font-size: 12px;
  line-height: 1.5;
}
.about-text h3,
.about-built h3 {
  margin: 44px 0 18px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #f1e7d3;
}
.about-skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-skills li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid #c3b78a35;
}
.about-skills b {
  color: #f1e7d3;
  font-size: 15px;
  font-weight: 500;
}
.about-skills span {
  color: #bdb9a8;
  font-size: 13px;
  line-height: 1.7;
  text-wrap: pretty;
}
.about-text .start-actions {
  margin-top: 34px;
}
.about-built {
  margin-top: 90px;
  padding-top: 60px;
  border-top: 1px solid #c3b78a1f;
}
.about-built .eyebrow {
  margin-bottom: 14px;
}
.about-built h3 {
  margin-top: 0;
  font-size: clamp(26px, 2.6vw, 38px);
  letter-spacing: -0.04em;
}
.built-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.built-card {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border: 1px solid #c3b78a35;
  background: #15120e;
}
.built-card .built-domain {
  margin: 0 0 16px;
  font:
    9px/1.7 Mono,
    monospace;
  letter-spacing: 1.6px;
  color: #e6b584;
}
.built-card h4 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #f1e7d3;
}
.built-card .built-title {
  color: #e4dccb;
  font-size: 15px;
  line-height: 1.5;
}
.built-card p {
  margin: 0 0 14px;
  color: #bdb9a8;
  font-size: 13px;
  line-height: 1.75;
  text-wrap: pretty;
}
.built-card .product-link {
  margin-top: auto;
  align-self: flex-start;
}
.built-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
  margin-top: 34px;
}
.built-more h4 {
  margin: 0;
  font:
    9px/1.7 Mono,
    monospace;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #b8b29f;
}
.built-more ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.built-more ul a {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid #c3b78a40;
  color: #e4dccb;
  font-size: 13px;
  text-decoration: none;
}
.built-more ul a:hover,
.built-more ul a:focus-visible {
  border-color: #e6b584;
  color: #f1e7d3;
}

/* Other AI builders get their own way in, beside the client call. */
.builders {
  max-width: 600px;
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid #c3b78a35;
}
.builders h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #f1e7d3;
}
.offer-start .builders p,
.offer-research .builders p {
  margin: 0 0 16px;
  color: #c9c5b5;
  font-size: 15px;
  line-height: 1.8;
}
@media (max-width: 1100px) {
  .built-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .about-person {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .about-photo {
    max-width: 360px;
  }
}
@media (max-width: 650px) {
  .about {
    padding: 70px 6vw;
  }
  .about-skills,
  .built-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .about-photo {
    max-width: 100%;
  }
  .about-built {
    margin-top: 60px;
    padding-top: 44px;
  }
}

/* Languages, environments and clouds, in the first version's groups. */
.stack {
  display: grid;
  gap: 16px;
  margin: 0;
}
.stack > div {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: 6px 24px;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid #c3b78a35;
}
.stack dt {
  font:
    9px/1.7 Mono,
    monospace;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #e6b584;
}
.stack dd {
  margin: 0;
  color: #e4dccb;
  font-size: 15px;
  line-height: 1.7;
}
.about-text > p.stack-support {
  margin-top: 16px;
  color: #bdb9a8;
  font-size: 13px;
}
@media (max-width: 650px) {
  .stack > div {
    grid-template-columns: minmax(0, 1fr);
  }
}
.stack-note {
  color: #bdb9a8;
  font-size: 13px;
}
.builders .guide-list {
  margin: 0 0 18px;
}
.builders .guide-list li {
  font-size: 15px;
  text-wrap: pretty;
}

/* Research: the two experiments side by side, the builders' invite under them. */
.research-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1100px;
}
.research-email {
  color: #bdb9a8;
  font-size: 14px;
}
.research-email a {
  color: #e4dccb;
}
@media (max-width: 900px) {
  .research-list {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Hidden where About is hidden too, so the short menu stays as it was. */
  .surface-nav .nav-research {
    display: none;
  }
}