/* Full-width bands share a reading measure as the navigation opens and closes. */
.home-product {
  --home-gutter: clamp(1rem, 3.5vw, 3rem);
  --home-measure: 62rem;
  --floor-inset: max(var(--home-gutter), calc((100% - var(--home-measure)) / 2));
  --floor-space: clamp(2.5rem, 6vw, 5rem);
  --floor-title: clamp(1.9rem, 4vw, 3.2rem);
  color: var(--text-color);
  background: var(--bg-surface);
  font-family: var(--font-ui);
  padding-top: var(--mley-header-height, 61px);
}
.home-product .home-floor {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--floor-space) var(--floor-inset);
  margin: 0;
  background: var(--bg-surface);
}
.home-product .home-floor--tutorial,
.home-product .home-floor--news { background: var(--bg-surface-2); }
.home-floor--tutorial:has(> [hidden]) { display: none; }

.home-product-intro { margin: 0 auto 1.65rem; text-align: center; }
.home-product-brand {
  display: flex; justify-content: center; align-items: center; gap: .45rem;
  margin: 0 0 1.35rem; font: 720 clamp(1.35rem, 2vw, 1.75rem)/1.15 var(--font-ui);
  letter-spacing: -.045em;
}
.home-product-brand .project-portada__brand {
  min-width: 1.5em; min-height: 1.5em; border-radius: .4em;
  font: 750 .73em/1 var(--font-ui); letter-spacing: -.05em;
}
.home-product-brand__tagline {
  padding: .1em 0 .1em .7em; margin-inline-start: .2em; border-inline-start: 1px solid var(--border-color);
  color: var(--text-color); font-size: .75em; letter-spacing: -.035em;
}
.home-product-intro h1 {
  margin: 0 auto; max-width: 18ch; color: var(--text-color);
  font: 720 clamp(2.4rem, 5.9vw, 5.25rem)/.99 var(--font-ui);
  letter-spacing: -.055em; text-wrap: balance;
}
.home-product-intro h1 em { color: var(--brand-color); font-style: normal; }
.home-product-intro__lead, .home-library-copy p {
  margin: 1rem auto 0; max-width: 50ch; color: var(--text-muted);
  font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.45; text-wrap: pretty;
}
.home-product .home-floor--hero { padding-block: clamp(2rem, 5.6vw, 5rem); }
body[data-page-kind="home"] .home-floor--hero .mley-home-search-card.card {
  margin: 0 auto; width: 100%; max-width: 56rem; view-transition-name: catalog-search;
}
body[data-page-kind="home"] .home-floor--hero .mley-home-search-card.card > .card-body {
  padding: clamp(.65rem, 1.7vw, 1.4rem);
}
.home-product .home-floor__head, .home-library-layout {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 2rem;
}
.home-product .home-floor__head { margin-bottom: 1.5rem; }
body[data-page-kind="home"] .home-product #mley-home-catalog-heading,
.home-product .mley-article-demo__heading h2,
.home-product .mley-updates__heading h2, .home-product .home-library-copy h2 {
  margin: 0; color: var(--text-color);
  font: 700 var(--floor-title)/1.07 var(--font-ui); letter-spacing: -.045em; text-wrap: balance;
}
.home-product .mley-article-demo__heading h2 { margin-top: .3rem; }
body[data-page-kind="home"] .home-product #mley-article-demo,
body[data-page-kind="home"] .home-product #mley-home-laws {
  margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.home-product #mley-article-demo > .card-body, .home-product #mley-home-laws > .card-body { padding: 0; }
.home-catalog-switch {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 2rem; background: var(--bg-surface-3);
}
.home-catalog-switch a {
  display: grid; min-height: 44px; place-items: center; padding: 0 1rem;
  border-radius: inherit; color: var(--text-muted); font-weight: 600; text-decoration: none;
}
.home-catalog-switch a[aria-current], .home-catalog-switch a:hover { color: var(--text-color); background: var(--bg-surface); }
.home-product .home-floor--tutorial:has(> [hidden]) + .home-floor--catalog { border-top: 1px solid var(--border-color); }
.home-product .home-floor--news { padding-inline: 0; }
.home-floor--news > [data-updates-floor],
.home-floor--news .mley-home-carousel > :not(.mley-home-carousel-track) { margin-inline: var(--floor-inset); }
.home-floor--news .mley-updates { view-transition-name: catalog-updates; }
.home-floor--news .mley-updates__heading { padding-inline: 0; }
.home-floor--news .mley-updates__days { width: fit-content; background: var(--bg-surface); }
.home-floor--news .mley-updates__body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1rem; align-items: start;
}
.home-floor--news .mley-updates__card { margin: 0; }
.home-floor--news .mley-updates__timezone { grid-column: 1 / -1; }
.home-floor--news .mley-home-carousel-track { gap: .5rem; padding-inline: 0; }
.home-floor--news .mley-home-carousel-slide {
  flex: 0 0 clamp(12rem, 73%, 16rem); border-radius: .8rem; background: var(--bg-surface);
}
.home-floor--news .mley-catalog-update a { justify-content: center; gap: .25rem; padding: .65rem .85rem; }
.home-floor--news .mley-catalog-update h4 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.home-floor--news .mley-catalog-update a:focus-visible,
.home-floor--news .mley-home-carousel-track:focus-visible { outline-offset: -2px; }
.mley-home-carousel__button[hidden],
[data-carousel-rotation] [data-play-icon],
[data-carousel-rotation].is-paused [data-pause-icon] { display: none; }
[data-carousel-rotation].is-paused [data-play-icon] { display: inline; }
.home-product .home-floor--library {
  display: block; position: relative; margin: 0; border: 0; border-radius: 0;
  background: color-mix(in srgb, var(--brand-color) 7%, var(--bg-surface));
}
.home-product .home-floor--library[hidden] { display: none; }
.home-library-copy { flex: 1 1 20rem; }
.home-library-copy p { max-width: 39ch; margin-inline: 0; }
.home-library-copy .btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.25rem; padding-inline: 1.25rem; }
.home-library-example {
  flex: 1 1 15rem; max-width: 22rem; display: grid; grid-template-columns: auto 1fr;
  gap: 1.15rem .85rem; align-items: center; padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--border-color); border-radius: 1rem; background: var(--bg-surface);
}
.home-library-example__icon { color: var(--brand-color); }
.home-library-example small { display: block; color: var(--text-muted); }
.home-library-example strong { display: block; font-size: 1.35rem; }
.home-library-example ul {
  grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: .45rem;
  padding: .85rem 0 0; margin: 0; border-top: 1px solid var(--border-color);
}
.home-library-example li { color: var(--text-muted); font-size: var(--text-small); }
.home-library-example li + li::before { content: '·'; padding-inline-end: .45rem; }
.home-product .home-product-footer { margin: 0; padding: .75rem var(--floor-inset); }
.home-product :is(a, button, [tabindex="0"]):focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

@media (min-width: 1081px) {
  .home-product { --home-measure: min(62rem, calc(100vw - 280px - 2 * var(--home-gutter))); }
  body[data-page-kind="home"].mley-sidebar-collapsed:has(.home-product):not(.mley-pdf-layout-active,.mley-dof-reader-open) #panel {
    margin-left: 0 !important; width: 100%;
  }
}
@media (min-width: 1081px) and (prefers-reduced-motion: no-preference) {
  body[data-page-kind="home"]:has(.home-product) #panel { transition-property: margin-left, width; }
}
@media (max-width: 480px) {
  .home-product-intro { margin-bottom: 1.1rem; }
  .home-product-brand { margin-bottom: .9rem; }
  .home-library-example { max-width: none; }
  .home-product .mley-about-footer { column-gap: .75rem; }
}

/* Interactive product tour. The screen stays mounted as the tool changes. */
[data-demo-laptop] {
  scroll-margin-top: calc(var(--mley-header-height, 61px) + 1rem);
}
.home-product [data-demo-laptop] .mley-article-demo__heading {
  position: relative; display: grid; justify-items: center; justify-content: stretch;
  margin: 0 0 clamp(1.5rem, 4vw, 3rem); text-align: center;
}
[data-demo-laptop] .mley-article-demo__heading > div { max-width: 42rem; padding-inline: 4rem; }
[data-demo-laptop] .mley-demo-intro {
  margin: .65rem auto 0; max-width: 48ch; color: var(--text-muted);
  font-size: clamp(1rem, 1.5vw, 1.17rem); line-height: 1.45; text-wrap: balance;
}
.home-product [data-demo-laptop] .mley-article-demo__dismiss {
  position: absolute; inset: 0 0 auto auto; min-height: 44px;
}
[data-demo-laptop] .mley-article-demo__layout {
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr);
  grid-template-rows: auto auto; gap: 1.1rem clamp(1.25rem, 3vw, 2.5rem); align-items: start;
}
[data-demo-laptop] .mley-article-demo__menu { grid-area: 1 / 1 / span 2; gap: .15rem; }
[data-demo-laptop] .mley-article-demo__tab { min-height: 44px; align-items: start; }
[data-demo-laptop] .mley-article-demo__tab > :first-child { margin-block-start: .15rem; }
.mley-demo-tool-summary { display: none; }
[data-demo-laptop] .mley-article-demo__tab[aria-selected="true"] .mley-demo-tool-summary {
  display: block; margin-top: .45rem; color: var(--text-muted); font: 400 .84rem/1.45 var(--font-ui);
}
[data-demo-laptop] .mley-article-demo__track { grid-area: 2 / 2; }
[data-demo-laptop] .mley-article-demo__guide { padding: 0; }
[data-demo-laptop] .mley-article-demo__card-heading h3 { margin: 0; }
.mley-demo-device {
  grid-area: 1 / 2; min-width: 0; position: relative; margin: 0 .8rem .55rem;
  padding: .68rem .32rem .36rem; border: 1px solid var(--device-rim);
  border-radius: .9rem .9rem .42rem .42rem;
  background: var(--device-bezel); box-shadow: inset 0 1px var(--device-glint);
}
.mley-demo-device::before {
  content: ''; position: absolute; top: .21rem; left: 50%; transform: translateX(-50%);
  width: .23rem; height: .23rem; border-radius: 50%; background: var(--device-rim);
  pointer-events: none;
}
.mley-demo-device::after {
  content: ''; position: absolute; top: 100%; inset-inline: -.75rem; height: .44rem;
  border-radius: 0 0 1rem 1rem / 0 0 .4rem .4rem;
  background: radial-gradient(ellipse at 50% 0%, var(--device-rim) 68%, transparent 74%) center top / 14% 48% no-repeat,
              linear-gradient(var(--device-glint), var(--device-rim) 60%, var(--device-bezel));
  box-shadow: 0 .34rem .48rem -.23rem var(--device-rim); pointer-events: none;
}
.home-product [data-demo-laptop] .mley-demo-device.is-phone { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.mley-demo-device.is-phone::before, .mley-demo-device.is-phone::after { display: none; }
.mley-demo-device .mley-article-demo__stage {
  height: clamp(23rem, 53cqi, 33rem); min-height: 0; overflow: auto;
  border-radius: .45rem; background: var(--bg-surface); overscroll-behavior: contain;
}
/* Reserve the same screen height when moving between the laptop and phone. */
[data-demo-laptop] .mley-demo-device { --demo-screen-height: clamp(23rem, 53cqi, 33rem); }
[data-demo-laptop] .mley-demo-device.is-phone {
  min-height: calc(var(--demo-screen-height) + 1.35rem + 2px);
}
[data-demo-laptop] .mley-demo-device.is-phone > .mley-article-demo__stage {
  width: min(100%, 20rem, calc(var(--demo-screen-height) * 9 / 16));
}
.mley-demo-device.is-map .mley-article-demo__maps { position: static; }
.mley-demo-device.is-map iframe { min-height: 100%; }
.mley-demo-device.is-pdf .mley-article-demo__pdf,
.mley-demo-device.is-pdf .mley-article-demo__pdf iframe { display: block; width: 100%; height: 100%; border: 0; }
.mley-demo-device .mley-article-demo__empty { padding: 0; border: 0; border-radius: 0; }
.mley-demo-device .mley-article-demo__empty:has([data-demo-document]:not([hidden])) > :not([data-demo-document]) { display: none; }
.mley-demo-document {
  display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0;
  text-align: start; color: var(--text-color); background: var(--bg-surface);
}
.mley-demo-document header {
  padding: clamp(.85rem, 2.5cqi, 1.5rem) clamp(1rem, 4cqi, 2rem);
  border-bottom: 1px solid var(--border-color); display: grid; gap: .15rem;
}
.mley-demo-document header span { font: 600 .92rem/1.3 var(--font-ui); color: var(--text-muted); }
.mley-demo-document header a { width: fit-content; color: var(--accent-color); font: 700 clamp(1.4rem, 3cqi, 2rem)/1.15 var(--font-ui); }
.mley-demo-document__text { flex: 1; min-height: 0; padding: .9rem clamp(1rem, 4cqi, 2rem); overflow: auto; }
.mley-demo-document .mley-demo-document__text :is(p, li) {
  max-width: none; text-align: start; color: var(--text-color); font-size: 1rem; line-height: 1.55;
}
.mley-demo-document .mley-demo-document__text p { margin: 0 0 .8em; }
.mley-demo-document .mley-demo-document__text strong { color: inherit; }
.mley-demo-document__text .text-right:first-child { display: none; } /* Book/chapter navigation belongs to the full law. */
.mley-demo-document__text [data-action="display-modal"] { color: var(--accent-color); background: var(--surface-accent); }
.mley-demo-caption { grid-area: 3 / 2; min-width: 0; }
.mley-demo-caption > [data-demo-help-for] { display: none; }
.mley-demo-caption .mley-article-demo__actions { gap: .5rem 1rem; }
@media (max-width: 700px) {
  .home-product [data-demo-laptop] .mley-article-demo__heading { padding-top: 2.9rem; margin-bottom: 1.25rem; }
  [data-demo-laptop] .mley-article-demo__heading > div { padding-inline: 0; }
  [data-demo-laptop].is-carousel .mley-article-demo__layout { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
  [data-demo-laptop].is-carousel .mley-article-demo__track { width: 100%; }
  [data-demo-laptop].is-carousel .mley-article-demo__preview p { display: none; }
  [data-demo-laptop] .mley-article-demo__card-heading { margin: 0; }
  [data-demo-laptop] .mley-demo-device { margin: 0 .35rem .25rem; padding: .48rem 2px 3px; }
  .mley-demo-device::before { top: .12rem; }
  .mley-demo-device::after { inset-inline: -.32rem; height: .27rem; }
  [data-demo-laptop].is-carousel .mley-demo-device { --demo-screen-height: clamp(18rem, 56svh, 29rem); }
  [data-demo-laptop].is-carousel .mley-demo-device.is-phone { min-height: calc(var(--demo-screen-height) + 2px); }
  [data-demo-laptop].is-carousel .mley-demo-device:where(:not(.is-phone)) .mley-article-demo__stage { min-height: 0; height: clamp(18rem, 56svh, 29rem); }
  .mley-demo-caption > [data-demo-help-for]:not([hidden]) { display: block; font-size: .9rem; line-height: 1.5; color: var(--text-muted); }
  .mley-demo-caption p { margin: 0 0 .65rem; }
  .mley-demo-caption strong { color: var(--text-color); }
}

.home-catalog-viewport { position: relative; overflow-x: clip; }
.home-catalog-viewport > [hidden] { display: none; }
.home-catalog-viewport > .is-leaving { position: absolute; inset: 0 0 auto; pointer-events: none; }
[data-catalog-switch-status]:empty { margin: 0; }
