/* The landing page: hero with the app mock, the features grid, and the
   "coming soon" card. */

/* Buttons */
.home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  font-weight: 800;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.home-button:active {
  transform: translateY(1px);
}

.home-button__icon {
  width: 20px;
  height: 20px;
}

.home-button--primary {
  color: var(--on-primary);
  background: var(--primary);
}

.home-button--primary:hover {
  color: var(--on-primary);
  background: var(--primary-hover);
}

.home-button--secondary {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
}

.home-button--secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Hero */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 48px;
  padding: 24px 0 72px;
}

.home-hero__text {
  display: grid;
  justify-items: start;
  gap: 24px;
}

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--chip);
  font-size: .95rem;
  font-weight: 800;
}

.home-hero__eyebrow-icon {
  width: 20px;
  height: 20px;
  color: var(--primary-text);
}

.home-hero__heading {
  font-size: clamp(2.6rem, 3.8vw + 1.3rem, 5.1rem);
  line-height: .98;
  letter-spacing: -.035em;
}

.home-hero__line {
  display: block;
}

.home-hero__line--accent {
  margin-top: .12em;
  color: var(--primary-text);
}

.home-hero__lead {
  max-width: 34em;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1.55;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* The phone in front of a big split coin, the logo's two halves. */
.home-hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 680px;
}

.home-hero__coin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(520px, 100%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.home-hero__half {
  position: absolute;
  top: 0;
  width: 48%;
  height: 100%;
}

.home-hero__half--left {
  left: 0;
  border-radius: 999px 0 0 999px;
  background: var(--coral);
}

.home-hero__half--right {
  top: 6%;
  right: 0;
  border-radius: 0 999px 999px 0;
  background: var(--sun);
}

.home-hero__half--left::after {
  content: "";
  position: absolute;
  top: 26%;
  left: 24%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #FFFFFF;
}

.home-hero__visual .app-mock {
  position: relative;
  transform: rotate(3deg);
}

/* Section heads */
.home-section-head {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-bottom: 32px;
}

.home-section-head__eyebrow {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--chip);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.home-section-head__heading {
  max-width: 16em;
  font-size: clamp(2rem, 2.6vw + 1rem, 3.25rem);
}

/* "Plus" chip: what needs Saldo Plus (docs/product.md). Quiet on purpose:
   an outlined pill, ink text, the violet category color as its border. */
.home-plus {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 1px 10px;
  border: 2px solid var(--violet);
  border-radius: 999px;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .02em;
  white-space: nowrap;
}

.home-plus--small {
  margin-left: 4px;
  padding: 0 7px;
  border-width: 1.5px;
  font-size: .72rem;
  vertical-align: 1px;
}

.home-section-head__note {
  color: var(--muted);
  font-size: 1.1rem;
}

/* Inline, so on phones the text wraps beside the chip, not below it. */
.home-section-head__note .home-plus {
  display: inline-block;
  margin-right: 10px;
  vertical-align: 2px;
}

.home-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Features */
.home-features {
  padding: 24px 0 8px;
  scroll-margin-top: 24px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.home-card--wide {
  grid-column: span 2;
}

/* The page's one highlight card. */
.home-card--highlight {
  color: var(--on-primary);
  background: var(--primary);
}

.home-card--highlight .home-card__text {
  color: var(--on-primary);
}

.home-card--row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}

.home-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-card__tile {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 18px;
  color: var(--on-tile);
}

.home-card__tile--coral { background: var(--coral); }
.home-card__tile--sun { background: var(--sun); }
.home-card__tile--mint { background: var(--mint); }
.home-card__tile--violet { background: var(--violet); }
.home-card__tile--sky { background: var(--sky); }
.home-card__tile--pink { background: var(--pink); }

.home-card__icon {
  width: 28px;
  height: 28px;
}

.home-card__title {
  font-size: 1.55rem;
  line-height: 1.1;
}

.home-card__text {
  color: var(--muted);
}

.home-card--wide .home-card__text {
  max-width: 36em;
}

/* Chips: split methods, transaction details, tags */
.home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 6px 0 0;
  list-style: none;
}

.home-chips li {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--chip);
  font-size: .92rem;
  font-weight: 800;
}

.home-chips--on-primary {
  margin: 0;
  padding: 0;
}

.home-chips--on-primary li {
  color: var(--primary);
  background: var(--on-primary);
}

/* Split: overlapping avatars and the ways to split */
.home-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: auto;
  padding-top: 8px;
}

.home-split__avatars {
  display: flex;
  padding-left: 10px;
}

.home-split__avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: -10px;
  border: 3px solid var(--primary);
  border-radius: 999px;
  color: var(--on-tile);
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 800;
}

.home-split__avatar--coral { background: var(--coral); }
.home-split__avatar--sun { background: var(--sun); }
.home-split__avatar--mint { background: var(--mint); }
.home-split__avatar--sky { background: var(--sky); }

/* Categories: a row of tiles */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.home-tiles__tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 14px;
  color: var(--on-tile);
}

.home-tiles__tile--coral { background: var(--coral); }
.home-tiles__tile--sun { background: var(--sun); }
.home-tiles__tile--mint { background: var(--mint); }
.home-tiles__tile--violet { background: var(--violet); }
.home-tiles__tile--sky { background: var(--sky); }
.home-tiles__tile--pink { background: var(--pink); }

.home-tiles__icon {
  width: 55%;
  height: 55%;
}

.home-tiles + .home-chips {
  margin-top: 0;
}

/* Reports: a small bar chart */
.home-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 112px;
  margin-top: auto;
  padding: 0 4px 8px;
  border-bottom: 2px solid var(--line);
}

.home-bars__bar {
  flex: 1;
  border-radius: 10px 10px 4px 4px;
}

.home-bars__bar:nth-child(1) { height: 46%; }
.home-bars__bar:nth-child(2) { height: 72%; }
.home-bars__bar:nth-child(3) { height: 58%; }
.home-bars__bar:nth-child(4) { height: 88%; }
.home-bars__bar:nth-child(5) { height: 64%; }
.home-bars__bar:nth-child(6) { height: 38%; }
.home-bars__bar:nth-child(7) { height: 80%; }

.home-bars__bar--coral { background: var(--coral); }
.home-bars__bar--sun { background: var(--sun); }
.home-bars__bar--mint { background: var(--mint); }
.home-bars__bar--violet { background: var(--violet); }
.home-bars__bar--sky { background: var(--sky); }
.home-bars__bar--pink { background: var(--pink); }

/* Exports: file tiles */
.home-files {
  display: flex;
  gap: 12px;
  margin: auto 0 0;
  padding: 6px 0 0;
  list-style: none;
}

.home-files__file {
  display: flex;
  align-items: flex-end;
  width: 76px;
  height: 92px;
  padding: 10px 12px;
  border-radius: 8px 22px 16px 16px;
  color: var(--on-tile);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
}

.home-files__file:nth-child(2) {
  transform: translateY(-8px) rotate(4deg);
}

.home-files__file--coral { background: var(--coral); }
.home-files__file--mint { background: var(--mint); }
.home-files__file--sun { background: var(--sun); }

/* Currencies: solid chips in the category colors */
.home-currencies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-currencies li {
  padding: 12px 22px;
  border-radius: 999px;
  color: var(--on-tile);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 800;
}

.home-currencies li:nth-child(6n + 1) { background: var(--coral); }
.home-currencies li:nth-child(6n + 2) { background: var(--sun); }
.home-currencies li:nth-child(6n + 3) { background: var(--mint); }
.home-currencies li:nth-child(6n + 4) { background: var(--violet); }
.home-currencies li:nth-child(6n + 5) { background: var(--sky); }
.home-currencies li:nth-child(6n + 6) { background: var(--pink); }

.home-currencies li:nth-child(odd) {
  transform: rotate(-3deg);
}

.home-currencies li:nth-child(even) {
  transform: rotate(2deg);
}

/* Coming soon */
.home-soon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon text text"
    "icon stores contact";
  align-items: center;
  gap: 20px 28px;
  margin-top: 72px;
  padding: 36px 40px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.home-soon__icon {
  grid-area: icon;
  align-self: start;
  width: 88px;
  height: 88px;
  border-radius: 22%;
}

.home-soon__text {
  display: grid;
  grid-area: text;
  gap: 8px;
}

.home-soon__heading {
  font-size: clamp(1.75rem, 1.6vw + 1rem, 2.4rem);
}

.home-soon__lead {
  color: var(--muted);
  font-size: 1.1rem;
}

/* The store placeholders: components/app-stores.css. */
.home-soon__stores {
  grid-area: stores;
}

.home-soon__contact {
  grid-area: contact;
}

/* Tablet */
@media (max-width: 1000px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 48px;
  }

  .home-hero__visual {
    min-height: 660px;
  }

  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-soon {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon text"
      "icon stores"
      "icon contact";
    justify-items: start;
  }
}

/* Phone */
@media (max-width: 640px) {
  .home-hero__heading {
    letter-spacing: -.03em;
  }

  .home-hero__lead {
    font-size: 1.1rem;
  }

  .home-hero__actions,
  .home-hero__actions .home-button {
    width: 100%;
  }

  .home-hero__visual {
    min-height: 640px;
  }

  .home-hero__coin {
    width: min(400px, 100%);
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-card--wide {
    grid-column: auto;
  }

  .home-card--row {
    grid-template-columns: 1fr;
  }

  .home-card {
    padding: 24px 22px;
  }

  .home-currencies {
    justify-content: flex-start;
  }

  .home-soon {
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "text"
      "stores"
      "contact";
    margin-top: 56px;
    padding: 28px 22px;
  }

  .home-soon__icon {
    width: 72px;
    height: 72px;
  }

  .home-soon__stores,
  .home-soon__contact {
    width: 100%;
  }
}