/* Clay landing — not in the Figma file. Built from the same tokens and the
   same section vocabulary as the home page. */

/* ---- Hero ---- */
.clay-hero {
  position: relative;
  padding: 120px 80px 72px;
  background: var(--off-white);
  box-shadow: inset 0 -2px 0 var(--obsidian);
}

.clay-hero h1 {
  max-width: 1120px;
  margin: 0;
  font-size: 68px;
  font-weight: 500;
  line-height: 0.98;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.clay-hero p {
  max-width: 727px;
  margin: 36px 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.clay-hero .btn { margin-top: 40px; width: 214px; height: 45px; padding: 13px 24px; justify-content: center; }

.clay-hero__seal {
  position: absolute;
  right: 80px;
  bottom: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.clay-hero__seal img { width: 185px; height: 83px; }

.clay-hero__seal span {
  width: 132px;
  font-family: var(--font-onest);
  font-size: 16px;
  font-weight: 300;
  line-height: 21px;
  letter-spacing: 2px;
  color: var(--muted);
}

/* ---- Section headers shared by the Clay-only blocks ---- */
.clay-section {
  position: relative;
  padding: 120px 80px;
  background: var(--off-white);
  box-shadow: inset 0 -2px 0 var(--obsidian);
}

.clay-section > h2 {
  max-width: 1000px;
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 49.5px;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.clay-section > .lede {
  max-width: 727px;
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.clay-section .btn { margin-top: 40px; height: 47px; padding: 14px 28px; justify-content: center; }

/* ---- Module grid: 3 x 2, ruled like the home page's module rows ---- */
.clay-mods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
  box-shadow: inset 0 0 0 2px var(--muted);
}

.clay-mod {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding: 40px;
  box-shadow: inset -2px -2px 0 var(--muted);
}

.clay-mod b {
  font-size: 45px;
  font-weight: 500;
  line-height: 49.5px;
  color: var(--orange);
  transform: translateY(var(--figma-baseline-shift));
}

.clay-mod h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 500;
  line-height: 28.8px;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.clay-mod p {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.clay-mods__note {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
}

.clay-mods__note p { margin: 0; max-width: 620px; }
.clay-mods__note p + p { font-weight: 700; color: var(--obsidian); }

/* ---- Community ---- */
.clay-community {
  padding: 120px 80px;
  background: var(--obsidian);
  box-shadow: inset 0 -2px 0 var(--obsidian);
}

.clay-community h2 {
  max-width: 1000px;
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 49.5px;
  color: var(--off-white);
  transform: translateY(var(--figma-baseline-shift));
}

.clay-community p {
  max-width: 727px;
  margin: 28px 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: var(--muted-on-dark);
  transform: translateY(var(--figma-baseline-shift));
}

.clay-community a {
  display: inline-block;
  margin-top: 36px;
  font-size: 16px;
  font-weight: 700;
  line-height: 19.2px;
  color: var(--lime);
  text-decoration: none;
  border-bottom: 2px solid var(--lime);
  padding-bottom: 4px;
  transform: translateY(var(--figma-baseline-shift));
}

/* ---- Accreditations: text cells in the dark band ----
   The home's version is a fixed 324px frame with an absolutely placed header
   and row; here the cells hold wrapping text, so the section flows. */
.clay-certs { height: auto; }
.clay-certs .certs__head { position: static; height: 111px; }
.clay-certs .certs__head h2 { position: static; padding: 42px 0 0 var(--gutter); }

.clay-certs__row { display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: inset 0 0 0 2px var(--muted); }

.clay-certs__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 209px;
  padding: 32px 24px;
  box-shadow: inset -1px 0 0 var(--muted);
}

.clay-certs__cell:last-child { box-shadow: none; }

/* Square badges at 100px; the Artisan pill is a wide lockup, not a disc. */
.clay-certs__cell img { width: 100px; height: 100px; }
.clay-certs__cell:first-child img { width: 229px; height: 80px; }

/* The home's FAQ block is a fixed 326px for four items; this page has six. */

/* ---- Overrides where this page has a different item count than the home ----
   Those sections are pinned to the Figma frame's exact heights and row slots;
   here the content decides the height instead. */

.clay-diag { height: auto; padding-bottom: 120px; }
.clay-diag .diag__title,
.clay-diag .diag__sub,
.clay-diag .diag__head { position: static; width: auto; max-width: 1280px; margin-left: 80px; }
.clay-diag .diag__title { padding-top: 120px; }
.clay-diag .diag__sub { margin-top: 20px; }
.clay-diag .diag__head { margin-top: 64px; height: 30px; }
.clay-diag .diag__head span { position: static; margin-right: 0; }
/* Align the column heads to the cells below: the cells sit at x 80/272/622,
   so the tracks are 192px and 350px wide. (The home keeps the Figma frame's
   own 80/230/580 heads, which do not line up with its cells — reproduced
   there on purpose, not repeated here.) */
.clay-diag .diag__head { display: grid; grid-template-columns: 192px 350px 1fr; }
.clay-diag .diag__table { position: static; height: auto; margin: 16px 0 0; width: 1440px; }
.clay-diag .diag__table::before { height: 100%; }
.clay-diag .diag__table::after { top: auto; bottom: 0; }
/* Rows keep their own positioning context (the cell text inside is absolutely
   placed), but the home's per-row `top` slots must be cleared: left in place
   they offset each row from its flow position and scramble the order. */
.clay-diag .diag__row { position: relative; top: 0; height: 92px; }


/* Five client logos, evenly spread across the 1440 canvas */
.clay-logos .logo-strip__set { flex: 0 0 1590px; }
.clay-logos .logo-strip__set img:nth-child(1) { left: 0;      width: 156px; top: 97px; height: 30px; }
.clay-logos .logo-strip__set img:nth-child(2) { left: 321px;  width: 53px;  top: 97px; height: 30px; }
.clay-logos .logo-strip__set img:nth-child(3) { left: 539px;  width: 115px; top: 97px; height: 30px; }
.clay-logos .logo-strip__set img:nth-child(4) { left: 819px;  width: 152px; top: 97px; height: 30px; }
.clay-logos .logo-strip__set img:nth-child(5) { left: 1136px; width: 141px; top: 97px; height: 30px; }
@keyframes clay-marquee { from { transform: translateX(0); } to { transform: translateX(-1590px); } }
.clay-logos .logo-strip__track { animation-name: clay-marquee; }

/* ---- Closing band, Clay wording: headline plus a subline ---- */
.closing--clay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  height: auto;
  min-height: 224px;
  padding: 56px 80px;
}

.closing--clay > div { max-width: 780px; }

.closing--clay p {
  position: static;
  width: auto;
  margin: 0;
}

.closing--clay .closing__sub {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}

.closing--clay .btn {
  position: static;
  flex: 0 0 auto;
  width: 212px;
  height: 45px;
}

/* ---- Case rows ----
   These used the blog index's .blog-row until the blog was rebuilt to the v4
   card grid, which took those rules with it. Restated here, where they are now
   the only user, in the same row grammar as the diagnosis table. */
.clay-cases { background: var(--off-white); box-shadow: inset 0 2px 0 var(--obsidian); }

.clay-case {
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: 32px;
  padding: 36px 80px;
  box-shadow: inset 0 -2px 0 var(--obsidian);
  text-decoration: none;
}

.clay-case__marker { display: flex; align-items: center; gap: 10px; }

.clay-case__marker b {
  font-family: var(--font-inter);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift-inter));
}

/* <s> is the design's short rule between the number and the label, not a
   strikethrough — hence the text-decoration reset. */
.clay-case__marker s { flex: 0 0 22px; height: 2px; background: var(--obsidian); text-decoration: none; }

.clay-case__marker span {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.clay-case h2 {
  margin: 12px 0 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.clay-case img { width: 24px; height: 24px; justify-self: end; }
.clay-case:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }