/* Builderkind Labs — builderkindlabs.com
 *
 * Every rule below is a translation of a component in the Builderkind Labs
 * design system (design/project/_ds/.../_ds_bundle.js) or of the page layout in
 * the approved design files (design/project/*.dc.html). Values come from the
 * tokens in tokens.css; literals appear only where the design files use them.
 *
 * The design system switches component internals on a `mobile` prop set at
 * `window.innerWidth < 900`. That switch is reproduced here as a single
 * breakpoint: @media (max-width: 899.98px).
 */

/* ───────────────────────────────────────────────────────────── base ── */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover { color: var(--link-hover); }

img { display: block; }

/* Focus: 2px ink ring at 3px offset — ivory where the ground is ink. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.section--ink :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--focus-ring-inverse);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}

.skip-link:focus {
  left: var(--space-6);
  top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--radius-pill);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
}

/* ─────────────────────────────────────────────────────────── layout ── */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ──────────────────────────────────────────────────── core / Icon ── */

.icon {
  display: block;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────── core / Logo ── */

/* Brand marks carry width/height attributes for their desktop size; the mobile
   breakpoint below resizes the ones the design system scales down. */
.logo { display: block; }

/* ────────────────────────────────────────────────── core / Eyebrow ── */

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: var(--text-eyebrow-transform);
  color: var(--muted);
}

.eyebrow--on-dark { color: var(--on-dark-muted); }

/* ─────────────────────────────────────────────────── core / Button ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-color);
  border: none;
  background: transparent;
}

/* sizes */
.btn--hero    { height: var(--control-h-hero);    padding: 0 28px;  font-size: 17px;          gap: 10px; }
.btn--md      { height: var(--control-h);         padding: 0 26px;  font-size: var(--fs-ui);  gap: 10px; }
.btn--sm      { height: var(--control-h-sm);      padding: 0 22px;  font-size: var(--fs-meta); gap: 8px; }
.btn--nav     { height: auto;                     padding: 12px 22px; font-size: var(--fs-ui); gap: 8px; }
.btn--contact { height: var(--control-h-contact); padding: 0 32px;  font-size: 18px;          gap: 10px; }

.btn--block {
  display: flex;
  width: 100%;
}

/* skins */
.btn--primary {
  background: var(--ink);
  color: var(--ivory);
}

.btn--primary:hover {
  background: var(--ink-hover);
  color: var(--ivory);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: var(--border-width-strong) solid var(--ink);
}

.btn--outline:hover {
  background: var(--ink);
  color: var(--ivory);
}

/* ───────────────────────────────────────────────────── core / Card ── */

.card {
  border-radius: var(--radius-card);
  padding: var(--space-14);
}

.card--hero {
  background: var(--white);
  border: var(--border-width-hairline) solid var(--panel-border);
  color: var(--ink);
  border-radius: var(--radius-panel);
}

.card--ivory {
  background: var(--ivory);
  color: var(--ink);
  border: none;
}

.card--dashed {
  background: transparent;
  border: var(--border-width-strong) dashed var(--dark-dashed);
  color: var(--on-dark);
}

.card--floating {
  background: var(--white);
  border: var(--border-width-hairline) solid var(--panel-border);
  box-shadow: var(--shadow-floating);
  color: var(--ink);
}

/* ───────────────────────────────────────────── core / BackLink ── */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--muted);
  text-decoration: none;
  align-self: flex-start;
}

.back-link:hover { color: var(--ink); }

/* ─────────────────────────────────────────── layout / SiteHeader ── */

.site-header {
  height: var(--header-h);
  padding: 0 var(--page-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--ivory);
}

.site-header__home {
  display: flex;
  align-items: center;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
}

.site-nav__link {
  text-decoration: none;
  color: var(--ink);
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: var(--border-width-strong) solid var(--ink);
  background: transparent;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

/* The toggle holds both glyphs; aria-expanded picks the one on show. */
.menu-toggle .icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .icon--menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon--close { display: block; }

/* ─────────────────────────────────────────── layout / MobileMenu ── */

.mobile-menu {
  padding: var(--space-6) 20px var(--space-8);
  background: var(--ivory);
  border-top: var(--border-width-hairline) solid var(--hairline);
  border-bottom: var(--border-width-hairline) solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-menu[hidden] { display: none; }

.mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: 20px;
  font-weight: var(--fw-medium);
  color: var(--ink);
  text-decoration: none;
}

.mobile-menu .btn { margin-top: var(--space-4); }

/* ───────────────────────────────────────────────────────── hero ── */

.hero {
  padding: clamp(40px, 4vw, 72px) clamp(24px, 5.5vw, 80px) clamp(64px, 7vw, 96px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
}

.hero__copy {
  flex: 1 1 520px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.2vw, 32px);
}

.hero__title {
  margin: 0;
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h1);
  text-wrap: pretty;
}

.hero__lead {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: var(--lh-lead);
  color: var(--body);
  max-width: 620px;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  padding-top: var(--space-2);
}

.hero__panel {
  flex: 0 1 420px;
  min-width: 260px;
  display: flex;
  justify-content: flex-end;
}

.hero__panel .card {
  width: 100%;
  padding: 0;
}

.hero__panel-inner {
  height: clamp(360px, 42vw, 500px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ──────────────────────────────────────────── layout / Section ── */

/* The approved pages set their own fluid section padding (see .products,
   .principles, .about, .contact); only the ink tone is shared. */
.section--ink {
  background: var(--ink);
  color: var(--on-dark);
}

/* ───────────────────────────────────────────────────── products ── */

.products {
  padding: clamp(72px, 9vw, 112px) clamp(24px, 5.5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.products__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(24px, 3vw, 48px);
}

.products__heading {
  flex: 1 1 480px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.products__title {
  margin: 0;
  font-size: clamp(34px, 3.7vw, 52px);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h2);
  max-width: 720px;
}

.products__lead {
  margin: 0;
  flex: 0 1 440px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-dark-body);
}

.products__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: stretch;
}

.products__slot {
  display: flex;
  flex: 2 1 600px;
  min-width: 280px;
}

.products__slot--narrow {
  flex: 1 1 280px;
  min-width: 260px;
}

.products__slot > * { width: 100%; }

/* ─────────────────────────────────────── content / ProductCard ── */

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.product-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.product-card__lockup {
  display: flex;
  align-items: center;
  gap: 42px;
}

.product-card__tagline {
  font-size: var(--fs-product-line);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  padding-top: var(--space-4);
}

.product-card__description {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 600px;
}

.product-card__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  border-top: var(--border-width-hairline) solid var(--hairline);
  padding-top: var(--space-8);
}

.product-card__feature {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-card__feature-title {
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
}

.product-card__feature-body {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--muted);
}

/* ─────────────────────────────────── content / PlaceholderCard ── */

.placeholder-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-10);
}

.placeholder-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.placeholder-card__title {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-h3);
}

.placeholder-card__text {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--on-dark-body);
}

.placeholder-card__mark { opacity: 0.9; }

/* ─────────────────────────────────────────────────── principles ── */

.principles {
  padding: clamp(80px, 10vw, 128px) clamp(24px, 5.5vw, 80px) clamp(72px, 9vw, 112px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 72px);
}

.principles__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.principles__title {
  margin: 0;
  font-size: clamp(34px, 3.7vw, 52px);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h2);
  max-width: 820px;
  text-wrap: pretty;
}

.principles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  column-gap: var(--space-12);
  row-gap: var(--space-10);
}

/* ────────────────────────────────── content / PrincipleItem ── */

.principle {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-top: var(--border-width-rule) solid var(--ink);
  padding-top: var(--space-7);
}

.principle__number {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--muted);
}

.principle__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.principle__body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
}

/* ────────────────────────────────────────────────────────── about ── */

.about {
  padding: clamp(72px, 9vw, 112px) clamp(24px, 5.5vw, 80px);
  background: var(--white);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 48px);
}

.about__head {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about__title {
  margin: 0;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h2);
  text-wrap: pretty;
}

.about__prose {
  flex: 1 1 440px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: var(--lh-prose);
  color: var(--body);
}

.about__prose p { margin: 0; }

/* ──────────────────────────────────────────────────────── contact ── */

.contact {
  padding: clamp(72px, 8vw, 96px) clamp(24px, 5.5vw, 80px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
}

.contact__copy {
  flex: 1 1 480px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 760px;
}

.contact__title {
  margin: 0;
  font-size: clamp(34px, 3.7vw, 52px);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h2);
}

.contact__lead {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: var(--lh-body);
  color: var(--body);
}

/* ─────────────────────────────────────────── layout / SiteFooter ── */

.site-footer {
  padding: var(--space-16) var(--page-pad-x) var(--space-12);
  background: var(--ink);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.site-footer__top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-10);
}

.site-footer__columns {
  display: flex;
  justify-content: flex-start;
  width: auto;
  gap: 96px;
  font-size: var(--fs-meta);
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__column-title {
  font-weight: var(--fw-semibold);
  color: var(--on-dark-muted);
}

.site-footer__link {
  color: var(--on-dark);
  text-decoration: none;
}

.site-footer__link:hover { color: var(--white); }

.site-footer__legal {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--space-2);
  border-top: var(--border-width-hairline) solid var(--dark-hairline);
  padding-top: var(--space-6);
  font-size: var(--fs-fine);
  color: var(--on-dark-muted);
}

/* ──────────────────────────────────── feedback / CookieBanner ── */

.cookie-card {
  position: fixed;
  left: var(--space-6);
  right: auto;
  bottom: var(--space-6);
  width: 440px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  border-radius: var(--radius-card-m);
  padding: var(--space-7);
}

.cookie-card[hidden] { display: none; }

.cookie-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cookie-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--fw-semibold);
}

.cookie-card__body {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-lead);
  color: var(--body);
}

.cookie-card__actions {
  display: flex;
  gap: var(--space-3);
}

.cookie-card__actions .btn { flex-grow: 1; }

/* ────────────────────────────────────────────────── legal pages ── */

.legal {
  flex-grow: 1;
  padding: clamp(32px, 4vw, 80px) clamp(24px, 5.5vw, 80px) clamp(80px, 10vw, 128px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 72px);
}

.legal__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 880px;
}

.legal__title {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  line-height: var(--lh-h1-m);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h1);
}

.legal__intro {
  margin: 0;
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: var(--lh-body);
  color: var(--body);
}

.legal__updated {
  font-size: var(--fs-meta);
  color: var(--muted);
}

.legal__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-6) var(--space-12);
}

.legal__clauses {
  flex: 3 1 520px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.5vw, 40px);
}

/* ─────────────────────────────────────────── content / TocNav ── */

.toc {
  flex: 1 1 200px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: var(--space-8);
}

.toc__label {
  font-size: var(--fs-fine-m);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

.toc__link {
  text-decoration: none;
  color: var(--body);
  font-size: var(--fs-meta);
  line-height: var(--lh-tight-ui);
}

.toc__link:hover { color: var(--ink); }

.toc__footer {
  border-top: var(--border-width-hairline) solid var(--hairline);
  margin-top: var(--space-3);
  padding-top: var(--space-5);
}

.toc__footer-link {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

/* ──────────────────────────────────── content / LegalSection ── */

.legal-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-top: var(--border-width-hairline) solid var(--hairline);
  padding-top: var(--space-8);
}

.legal-section__heading {
  margin: 0;
  font-size: var(--fs-h2-legal);
  line-height: var(--lh-legal-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h3);
}

.legal-section__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: var(--fs-body);
  line-height: var(--lh-legal);
  color: var(--body);
}

.legal-section__body p { margin: 0; }

/* ──────────────────────────────────────────────── mobile (<900px) ── */

@media (max-width: 899.98px) {

  /* SiteHeader */
  .site-header {
    height: var(--header-h-m);
    padding: 0 20px;
  }

  .site-header__home .logo--wordmark {
    width: 200px;
    height: 63px;
  }

  .site-nav { display: none; }

  .menu-toggle { display: flex; }

  /* hero */
  .hero__panel .logo--symbol {
    width: 150px;
    height: 169px;
  }

  /* ProductCard */
  .product-card {
    gap: var(--space-8);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-card-m);
  }

  .product-card__head { gap: 10px; }

  .product-card__lockup { gap: 33px; }

  .product-card__lockup .logo--imanu-mark {
    width: 49px;
    height: 70px;
  }

  .product-card__lockup .logo--imanu-wordmark {
    width: 139px;
    height: 37px;
  }

  .product-card__tagline {
    font-size: var(--fs-product-line-m);
    padding-top: var(--space-3);
  }

  .product-card__description {
    font-size: var(--fs-body-sm);
    max-width: none;
  }

  .product-card__features {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-top: var(--space-6);
  }

  .product-card__feature { gap: var(--space-1); }

  /* On mobile the CTA goes full width. */
  .product-card__cta .btn {
    display: flex;
    width: 100%;
  }

  /* PlaceholderCard */
  .placeholder-card {
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-card-m);
  }

  .placeholder-card__title { font-size: var(--fs-card-title-m); }

  .placeholder-card__text { font-size: var(--fs-ui); }

  .placeholder-card__mark {
    width: 48px;
    height: 54px;
    margin-top: var(--space-3);
  }

  /* Eyebrow */
  .eyebrow--responsive { font-size: var(--fs-eyebrow-m); }

  /* PrincipleItem */
  .principle {
    gap: var(--space-3);
    padding-top: var(--space-5);
  }

  .principle__number { font-size: var(--fs-fine); }

  .principle__title { font-size: var(--fs-h3-m); }

  .principle__body { font-size: var(--fs-body-sm); }

  /* Contact CTA. The approved page keeps the 60px desktop pill at every width,
     which pushes `hello@builderkindlabs.com` past the viewport on a 320px
     screen. This applies the design system's documented mobile button rule
     instead — full width at 54px — and tightens the side padding on the
     narrowest screens so the address always fits. */
  .contact .btn--contact {
    width: 100%;
    height: 54px;
    font-size: var(--fs-ui);
    padding: 0 clamp(16px, 5vw, 26px);
  }

  /* SiteFooter */
  .site-footer { padding: var(--space-14) var(--page-pad-x-m) var(--space-10); }

  .site-footer__top { flex-direction: column; }

  .site-footer__columns {
    justify-content: space-between;
    width: 100%;
    gap: var(--space-4);
  }

  .site-footer__logo {
    width: 200px;
    height: 63px;
  }

  .site-footer__legal {
    flex-direction: column;
    font-size: var(--fs-fine-m);
  }

  /* CookieBanner */
  .cookie-card {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
  }

  /* LegalSection */
  .legal-section { padding-top: var(--space-6); }

  .legal-section__heading { font-size: var(--fs-h2-legal-m); }

  .legal-section__body { font-size: var(--fs-body-sm); }

  /* TocNav — the approved design keeps the contents nav on mobile; the flex-wrap
     in .legal__body stacks it above the clauses. */
  .toc {
    max-width: none;
    padding-top: var(--space-5);
  }
}