/* docs.h2o.ai landing page. Layout from Mark Herring's design (2026-10-16), on the h2o-styles.css tokens.
   Scoped under .ld so it never touches the sub pages. */

/* Colours come only from the H2O.ai brand kit (h2o.ai/company/brand-kit) */
.ld {
  --ld-pad: clamp(72px, 6.944vw, 100px);
  --ld-light-gray: #f9f9f9;
  --ld-light-gray-2: #ebebeb;
  --ld-light-yellow-1: #fff199;
  --ld-light-yellow-2: #fff8cc;
  --ld-dark-gray: #373630;
  --color-body: #666666;
  font-family: var(--font-sans);
  color: var(--color-body);
}
.ld-wrap { max-width: 1240px; margin-inline: auto; }
.ld section { padding-inline: var(--gutter); }
.h2o-content.ld :is(.ld-tiles, .ld-chips) { list-style: none; margin: 0; padding: 0; }
.h2o-content.ld :is(.ld-tiles, .ld-chips) > li { margin: 0; }

/* Arrow icon, drawn in the current text colour */
.ld-arrow { display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor; transition: transform 200ms var(--ease);
  -webkit-mask: var(--h2o-arrow) center / contain no-repeat; mask: var(--h2o-arrow) center / contain no-repeat; }

/* Eyebrow: mono label after a short yellow bar */
.ld-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: normal;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-body); }
.ld-eyebrow::before { content: ""; flex: none; width: 24px; height: 3px; background: var(--color-summer); }

/* Hero: black band, display title, pixel field down the right edge */
.ld-hero { position: relative; overflow: hidden; background: #000; padding-top: clamp(56px, 5.5vw, 88px); padding-bottom: clamp(48px, 4.4vw, 72px); }
.ld-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }
.ld-eyebrow--hero { color: var(--color-summer); }
.h2o-content.ld .ld-hero h1 { margin: 0; max-width: 17ch; font-family: var(--font-heading); font-weight: 500; font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.02; letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.ld-hl { color: var(--color-summer); }
.h2o-content.ld .ld-hero__lead { margin: 0; max-width: 54ch; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; color: var(--ld-light-gray-2); }
.ld-pixels { position: absolute; top: 0; right: 0; display: grid; grid-template-columns: repeat(6, 56px); grid-auto-rows: 56px; }
.ld-pixels span { background: var(--color-summer); }
@media (max-width: 720px) { .ld-pixels { display: none; } }

/* Hero search: the white bar itself lives in docs-hub.css */
.ld-search { max-width: 600px; margin-top: 8px; }

/* Just launched strip */
.ld-launched { background: var(--color-summer); padding-top: 20px; padding-bottom: 20px; line-height: normal; }
.ld-launched__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.ld-launched__label { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-charcoal); }
.ld-launched__links { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.h2o-content.ld .ld-launched__links a { display: flex; align-items: center; gap: 8px; min-height: 32px; font-family: var(--font-heading); font-size: 19px; font-weight: 500;
  color: var(--color-charcoal); text-decoration: none; }
.h2o-content.ld .ld-launched__links a:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-color: var(--color-charcoal); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Sections and heads */
.ld-section { background: #fff; padding-top: var(--ld-pad); padding-bottom: var(--ld-pad); }
.ld-section--grey { background: var(--ld-light-gray); }
.ld-section--flush-top { padding-top: 0; }
.ld-stack { display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 56px); }
.ld-stack--tight { gap: clamp(32px, 3.3vw, 48px); }
.ld-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.h2o-content.ld .ld-head h2 { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.025em; color: var(--color-ink); }
.h2o-content.ld .ld-lead { margin: 0; max-width: 643px; font-size: 17px; line-height: 1.6; color: var(--color-body); text-wrap: pretty; }
.h2o-content.ld .ld-headrow .ld-lead { max-width: 665px; }
.ld-headrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.ld-headlinks { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.h2o-content.ld a.ld-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; line-height: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); text-decoration: none; }
.ld-more > span:first-child { padding-bottom: 3px; border-bottom: 1px solid var(--color-summer); }
.ld-more .ld-arrow { width: 14px; height: 14px; }
.ld-sublinks { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; line-height: 1.5; }

/* H2O AI Cloud: one Light Gray 2 card per group, its products as white tiles inside.
   Three groups across the top, the two small ones share the row underneath. */
.ld-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.ld-cat { grid-column: span 2; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 16px; background: var(--ld-light-gray-2); }
.ld-cat--data, .ld-cat--admin { grid-column: span 3; }
.h2o-content.ld .ld-cat__name { margin: 0; padding-inline: 4px; font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: 0; color: var(--color-ink); }

.ld-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ld-cat--data .ld-tiles, .ld-cat--admin .ld-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h2o-content.ld a.ld-tile { position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 44px 18px 18px; border-radius: 10px;
  border: 1px solid var(--ld-light-gray-2); background: #fff; color: var(--color-ink); text-decoration: none; transition: background 200ms var(--ease), border-color 200ms var(--ease); }
.ld-tile__name { font-family: var(--font-heading); font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--color-ink);
  }
.ld-tile__desc { font-size: 14px; line-height: 1.5; color: var(--color-body); text-wrap: pretty; }
.ld-tile > .ld-arrow { position: absolute; top: 21px; right: 18px; width: 14px; height: 14px; color: var(--color-body); }
.h2o-content.ld :is(a.ld-tile, a.ld-chip):is(:hover, :focus-visible) { border-color: var(--ld-light-yellow-1); background: var(--ld-light-yellow-2); }
.h2o-content.ld a.ld-tile:is(:hover, :focus-visible) > .ld-arrow { color: var(--color-ink); transform: translateX(3px); }
@media (max-width: 1100px) {
  .ld-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-cat, .ld-cat--data, .ld-cat--admin { grid-column: span 1; }
  .ld-cat--data .ld-tiles, .ld-cat--admin .ld-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ld-cats { grid-template-columns: minmax(0, 1fr); }
  .ld-cat { padding: 16px; }
}

/* Name tiles: Standalone products, API clients, resources. Same white tile as above. */
.ld-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .ld-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ld-chips { grid-template-columns: minmax(0, 1fr); } }
.h2o-content.ld a.ld-chip { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; min-height: 56px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--ld-light-gray-2); background: #fff;
  font-family: var(--font-heading); font-weight: 500; font-size: 20px; color: var(--color-ink); text-decoration: none; transition: background 200ms var(--ease), border-color 200ms var(--ease); }
.h2o-content.ld a.ld-chip:is(:hover, :focus-visible) .ld-arrow { transform: translateX(3px); }

/* Foundation models: white band, five Light Gray 2 cards that fill both rows. Hover matches the product tiles. */
.ld-models { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.ld-model { grid-column: span 2; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--radius-lg);
  background: var(--ld-light-gray-2); border: 1px solid transparent; transition: background 200ms var(--ease), border-color 200ms var(--ease); }
.ld-model:nth-child(n+4) { grid-column: span 3; }
.ld-model > .ld-arrow { position: absolute; top: 36px; right: 32px; color: var(--color-ink); }
.h2o-content.ld .ld-model h3 { margin: 0; padding-right: 32px; font-family: var(--font-heading); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: 0; }
.h2o-content.ld .ld-model h3 a { color: var(--color-ink); text-decoration: none; }
.h2o-content.ld .ld-model h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ld-model:has(h3 a:is(:hover, :focus-visible)) { border-color: var(--ld-light-yellow-1); background: var(--ld-light-yellow-2); }
.ld-model:has(h3 a:is(:hover, :focus-visible)) > .ld-arrow { transform: translateX(3px); }
.h2o-content.ld .ld-model h3 a:focus-visible { outline: 0; }
.h2o-content.ld .ld-model:has(h3 a:focus-visible) { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.h2o-content.ld .ld-model p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-body); text-wrap: pretty; }
.ld-model__links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: auto; padding-top: 12px; }
.h2o-content.ld .ld-model__links a { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; font-weight: 500; line-height: normal; color: var(--color-ink);
  text-decoration: underline; text-decoration-color: var(--color-summer); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.h2o-content.ld .ld-model__links a:is(:hover, :focus-visible) { text-decoration-color: var(--color-ink); }
.ld-model__links .ld-arrow { width: 14px; height: 14px; }
.h2o-content.ld :is(.ld-launched__links a, .ld-model__links a, a.ld-more):is(:hover, :focus-visible) .ld-arrow { transform: translateX(3px); }
@media (max-width: 960px) {
  .ld-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-model, .ld-model:nth-child(n+4) { grid-column: span 1; }
  .ld-model:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ld-models { grid-template-columns: 1fr; }
}

/* Phones: launch links start on the left, small links get 44px tap targets */
@media (max-width: 640px) {
  .ld-sublinks { flex-direction: column; gap: 0; }
  .h2o-content.ld :is(.ld-sublinks a, .ld-launched__links a, .ld-model__links a, a.ld-more) { min-height: 44px; display: inline-flex; align-items: center; }
}