/* Two rendering fixes for the exported homepage (public/home.html).
 *
 * Nothing here changes Jeanne's design. The export renders the page inside the
 * design tool's own artboard (data-kin-id="kin-5"): a fixed 1440x900 box that
 * scrolls inside itself, is scaled with a CSS transform to fit the window, and
 * sits in a clipped, centred wrapper (#root). In a browser that shows up as a
 * second scrollbar beside the browser's own, a cream inset around the page,
 * and a sticky nav that floats over the copy because the scroll it listens to
 * is the artboard's, not the page's.
 *
 * These rules hand the scrolling back to the document. The runtime re-applies
 * the inline sizes on resize, so they have to win with !important.
 *
 * Same fix as nulu-landing/nulu.css — see that file's notes.
 */
[data-kin-id="kin-5"] {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

#root {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
}

html,
body,
#dc-root {
  height: auto !important;
  min-height: 100%;
}

/* The hero was sized against the artboard's 900px, not the window. */
[data-kin-id="kin-27"] {
  min-height: 100vh !important;
}

/* Hero "Browse experiences" (17 Sep): the kit's inverse pill draws its
   outline at 16% cream, which disappears over the hero photo. Cream at 72%
   (the kit's inverse secondary text) keeps it reading as an outline pill
   beside the lime Take the Quiz. */
button[data-hero-browse] {
  border-color: rgba(250, 246, 240, 0.72) !important;
}