@charset "UTF-8";
/*-----------------------------------------------------------------------------------

	PeopleForward — Demo Landing Page
	landing/landing.css

	The live preview's front page (index.html at the project root, built by
	tools/build_landing.py). It loads the theme's style.css first and uses its
	tokens, buttons, logo and type, so it follows the light and dark themes and
	the colour schemes, then adds the parts below. It is not in the download.

	Table of Contents
	1. Page
	2. Top Bar
	3. Hero
	4. Sections and Page Tickets
	5. Portal and Dashboard
	6. Themes
	7. What's Inside
	8. Closing and Footer

-----------------------------------------------------------------------------------*/

/* ================================================================
	1. Page
================================================================ */

body {
  background: var(--c-white);
}

/* The top bar is sticky, so a section reached from its links starts below it. */
.lp-section {
  padding-block: var(--space-section);
  scroll-margin-top: 4.5rem;
}

.lp-section--surface {
  background: var(--c-surface);
}

/* White rings on the navy hero, closing band and footer. */
.lp-hero :focus-visible,
.lp-closing :focus-visible,
.lp-foot :focus-visible {
  outline-color: var(--c-on-color);
}

/* A light outline button for the navy bands. */
.lp-btn-light {
  --bs-btn-color: var(--c-on-color);
  --bs-btn-border-color: rgb(255 255 255 / 0.45);
  --bs-btn-hover-color: #0c1838;
  --bs-btn-hover-bg: var(--c-on-color);
  --bs-btn-hover-border-color: var(--c-on-color);
  --bs-btn-active-color: #0c1838;
  --bs-btn-active-bg: var(--c-on-color);
  --bs-btn-active-border-color: var(--c-on-color);
}

/* ================================================================
	2. Top Bar
================================================================ */

/* The logo, this page's sections from 992px and the purchase link. */
.lp-top {
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
}

.lp-top__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.lp-top__nav {
  display: none;
}

@media (min-width: 992px) {
  .lp-top__nav {
    display: block;
    margin-inline-start: auto;
  }
}

.lp-top__nav ul {
  display: flex;
  gap: 1.75rem;
}

.lp-top__nav a {
  color: var(--c-text-2);
  font: 650 var(--fs-sm) var(--font-display);
  text-decoration: none;
}

.lp-top__nav a:hover {
  color: var(--c-primary);
}

.lp-top__buy {
  margin-inline-start: auto;
}

/* Phones: the logo alone; the hero's own Buy button is a screen away. */
@media (max-width: 575.98px) {
  .lp-top__buy {
    display: none;
  }
}

@media (min-width: 992px) {
  .lp-top__buy {
    margin-inline-start: 0;
  }
}

/* ================================================================
	3. Hero
================================================================ */

/* Navy, so the screenshots read as the brightest thing on the page. */
.lp-hero {
  overflow: clip;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(4.5rem, 3rem + 5vw, 7.5rem);
  background: var(--c-deep);
  color: var(--c-on-dark-2);
}

.lp-hero__inner {
  display: grid;
  align-items: center;
  gap: clamp(3rem, 2rem + 4vw, 4.5rem);
}

@media (min-width: 992px) {
  .lp-hero__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.lp-hero__title {
  margin: 0;
  color: var(--c-on-color);
  font: 800 clamp(2.375rem, 1.6rem + 3vw, 4rem) / 1.04 var(--font-display);
  letter-spacing: -0.035em;
}

.lp-hero__lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Four facts under a hairline: the figure over its words. */
.lp-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--fs-sm);
}

.lp-hero__facts strong {
  display: block;
  color: var(--c-on-color);
  font: 800 1.625rem / 1.1 var(--font-display);
}

/* The screenshots: the dashboard behind and up to the right, the home page in
   front, and the portal on a phone over the corner, which stands on the
   coral block the theme puts behind its hero photos. */
.lp-hero__stage {
  position: relative;
  padding-bottom: 1.5rem;
}

.lp-hero__stage::before {
  content: "";
  position: absolute;
  bottom: -1rem;
  inset-inline-end: -1.5rem;
  width: 34%;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  background: var(--c-accent);
}

.lp-browser {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
}

/* The window's bar with its three dots, drawn in CSS. */
.lp-browser::before {
  content: "";
  display: block;
  height: 1.625rem;
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(circle at 0.875rem 50%, #f0625a 0.25rem, transparent 0.27rem),
    radial-gradient(circle at 1.5rem 50%, #f2bd3c 0.25rem, transparent 0.27rem),
    radial-gradient(circle at 2.125rem 50%, #3fc152 0.25rem, transparent 0.27rem),
    var(--c-surface);
}

.lp-browser img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-hero__stage .lp-browser {
  z-index: 1;
  width: 84%;
  margin-top: 22%;
}

.lp-hero__stage .lp-browser--back {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 0;
  width: 70%;
  margin: 0;
}

.lp-phone {
  position: absolute;
  bottom: 0;
  inset-inline-end: 3%;
  z-index: 2;
  width: clamp(6.5rem, 21%, 11rem);
  margin: 0;
  padding: 0.375rem;
  border-radius: 1.5rem;
  background: #0b1222;
  box-shadow: var(--shadow-float);
}

.lp-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.125rem;
}

/* ================================================================
	4. Sections and Page Tickets
================================================================ */

.lp-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.lp-head__title {
  margin: 0;
  color: var(--c-navy);
  font: 800 var(--fs-h2) / 1.08 var(--font-display);
  letter-spacing: -0.03em;
}

.lp-head__text {
  margin-top: 1rem;
  color: var(--c-text-2);
  font-size: var(--fs-lead);
}

.lp-group + .lp-group {
  margin-top: clamp(2.75rem, 2rem + 2.5vw, 4.5rem);
}

.lp-group__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0 0 1.25rem;
  color: var(--c-navy);
  font: 800 var(--fs-h3) / 1.2 var(--font-display);
}

.lp-group__title span {
  color: var(--c-text-3);
  font: 600 var(--fs-sm) var(--font-text);
}

.lp-tickets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}

.lp-tickets--homes {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

/* A page as the theme's shift ticket: the screenshot, a dashed tear line with
   a notch at each end, then the page's name. The notches are centred on the
   card's edges and its overflow clips their outer halves (as on .ticket). */
.lp-ticket {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.lp-ticket:hover {
  border-color: transparent;
  box-shadow: var(--shadow-card);
  transform: translateY(-0.25rem);
}

.lp-ticket:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

.lp-ticket__shot {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-surface);
}

.lp-ticket--home .lp-ticket__shot {
  aspect-ratio: 1;
}

.lp-ticket__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.lp-ticket__foot {
  position: relative;
  display: grid;
  flex-grow: 1;
  align-content: start;
  gap: 0.125rem;
  padding: 1rem 1.125rem 1.125rem;
  border-top: 2px dashed var(--c-line);
}

.lp-ticket__foot::before,
.lp-ticket__foot::after {
  content: "";
  position: absolute;
  top: -0.6875rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-white);
}

.lp-ticket__foot::before {
  inset-inline-start: -0.6875rem;
}

.lp-ticket__foot::after {
  inset-inline-end: -0.6875rem;
}

.lp-ticket__foot strong {
  color: var(--c-navy);
  font: 750 1rem / 1.3 var(--font-display);
  transition: color var(--dur-fast) var(--ease-out);
}

.lp-ticket:hover .lp-ticket__foot strong {
  color: var(--c-primary);
}

.lp-ticket__foot span {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.lp-ticket--home .lp-ticket__foot strong {
  font-size: 1.125rem;
}

.lp-ticket--home .lp-ticket__foot span {
  font-size: var(--fs-sm);
}

/* ================================================================
	5. Portal and Dashboard
================================================================ */

.lp-account {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}

.lp-account .lp-browser {
  justify-self: stretch;
  box-shadow: var(--shadow-card);
}

.lp-account__title {
  margin: 0.5rem 0 0;
  color: var(--c-navy);
  font: 800 var(--fs-h3) / 1.2 var(--font-display);
}

.lp-checks {
  display: grid;
  gap: 0.625rem;
}

.lp-checks li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  color: var(--c-text-2);
}

.lp-checks .icon {
  flex: none;
  color: var(--c-mint-ink);
}

/* ================================================================
	6. Themes
================================================================ */

/* One home page in both themes: the dark screenshot over the light one,
   clipped to the right of a slanted line. */
.lp-split {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.lp-split img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-split .lp-split__dark {
  position: absolute;
  inset: 0;
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%);
}

.lp-schemes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

@media (min-width: 768px) {
  .lp-schemes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .lp-schemes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.lp-scheme {
  margin: 0;
}

.lp-scheme img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
}

.lp-scheme figcaption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.625rem;
  color: var(--c-navy);
  font: 700 var(--fs-sm) var(--font-display);
}

/* The scheme's primary colour, set on the dot by the builder. */
.lp-scheme__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

/* ================================================================
	7. What's Inside
================================================================ */

/* A spec sheet: each subject over, or beside from 768px, what it holds. */
.lp-spec {
  margin: 0;
  border-top: 1px solid var(--c-line);
}

.lp-spec > div {
  display: grid;
  gap: 0.25rem 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--c-line);
}

@media (min-width: 768px) {
  .lp-spec > div {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
}

.lp-spec dt {
  color: var(--c-navy);
  font: 750 1rem / 1.5 var(--font-display);
}

.lp-spec dd {
  max-width: 48rem;
  margin: 0;
  color: var(--c-text-2);
}

/* ================================================================
	8. Closing and Footer
================================================================ */

.lp-closing {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--c-deep);
}

.lp-closing__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}

.lp-closing__title {
  max-width: 34rem;
  margin: 0;
  color: var(--c-on-color);
  font: 800 var(--fs-h2) / 1.08 var(--font-display);
  letter-spacing: -0.03em;
}

.lp-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.lp-foot {
  padding-block: 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  background: var(--c-deep);
  color: var(--c-on-dark-2);
  font-size: var(--fs-sm);
}

.lp-foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}