/* The landing (apps/site/landing/page.ts): tokens only (apps/site/src/tokens.css).
   One breakpoint, layout.wide-min (900px — a media query cannot read a custom property). */

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

body {
  margin: 0;
  overflow-x: clip;
  color: var(--color-text);
  font-family: var(--type-body-font);
  font-weight: var(--type-body-weight);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  /* The ambient bloom (gradients.ambient): its radius is a fraction of the width, so it is drawn on a
     square box one viewport wide at the top of the page. */
  background:
    radial-gradient(
        var(--bloom-orange-radius) var(--bloom-orange-radius) at var(--bloom-orange-x)
          var(--bloom-orange-y),
        var(--color-ambient-orange),
        transparent
      )
      top left / 100vw 100vw no-repeat,
    var(--color-surface);
}

h1,
h2,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: var(--size-ring-strong) solid var(--color-focus);
  outline-offset: var(--size-ring-gap);
}

.column {
  max-width: var(--layout-column-max-wide);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

/* Header */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--size-header-height);
  padding-top: var(--space-2);
}

.brand {
  display: flex;
  align-items: center;
  min-height: var(--size-touch-min);
}

.lockup {
  width: var(--size-wordmark-width);
}

.top-sign-in {
  display: flex;
  align-items: center;
  min-height: var(--size-touch-min);
  color: var(--color-accent-fg);
  font-weight: var(--type-body-strong-weight);
  text-decoration: none;
}

/* Hero */

.hero {
  padding-top: var(--space-10);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: flex;
  align-items: center;
  min-height: var(--size-chip-height);
  padding: var(--space-1) var(--size-chip-padding);
  border-radius: var(--radius-full);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  font-weight: var(--type-eyebrow-weight);
}

.chip-level {
  background: var(--color-accent-surface);
  color: var(--color-accent-fg);
}

.chip-free {
  background: var(--color-tint-green);
  color: var(--color-tint-green-fg);
}

h1 {
  margin-top: var(--space-5);
  font-family: var(--type-web-headline-font);
  font-weight: var(--type-web-headline-weight);
  font-size: var(--type-web-headline-size);
  line-height: var(--type-web-headline-line);
  letter-spacing: var(--type-web-headline-tracking);
}

/* "holandês": accent-fg on a tint-yellow highlight bar along its foot. */
.em {
  color: var(--color-accent-fg);
  background: linear-gradient(var(--color-tint-yellow), var(--color-tint-yellow)) left bottom / 100%
    var(--size-web-highlight) no-repeat;
}

.lead {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-family: var(--type-web-lead-font);
  font-weight: var(--type-web-lead-weight);
  font-size: var(--type-web-lead-size);
  line-height: var(--type-web-lead-line);
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* The official artwork, unmodified; the gap is both badges' clear space (¼ of their height). */
.store {
  display: block;
  border-radius: var(--radius-xs);
}

.badge {
  display: block;
  width: auto;
  height: var(--size-web-store-badge);
}

.button-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-button-height);
  margin-top: var(--space-4);
  padding: 0 var(--space-6);
  border: var(--size-ring) solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  line-height: var(--type-button-line);
  text-decoration: none;
}

.stores + .button-secondary {
  margin-top: var(--space-3);
}

.icon {
  width: var(--size-icon-nav);
  height: var(--size-icon-nav);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--size-tab-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: var(--space-10);
}

.phone {
  flex: none;
  width: var(--size-web-phone);
  padding: var(--size-web-phone-bezel);
  border-radius: var(--radius-web-phone);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-float);
}

.screen {
  width: 100%;
  border-radius: var(--radius-web-phone-screen);
}

.phone-back {
  transform: rotate(var(--angle-web-phone-back));
}

.phone-front {
  margin-top: var(--size-web-phone-drop);
  margin-left: calc(-1 * var(--space-10));
  transform: rotate(var(--angle-web-phone-front));
}

.tulip {
  display: none;
}

/* Features */

.card {
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-card);
}

.features {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.feature {
  padding: var(--layout-card-padding);
}

.disc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--size-icon-tile-intro);
  height: var(--size-icon-tile-intro);
  border-radius: var(--radius-unit-icon);
}

.feature .illustration {
  width: var(--size-chapter-illustration);
  filter: var(--filter-illustration);
}

.tint-blue {
  background: var(--color-tint-blue);
}
.tint-yellow {
  background: var(--color-tint-yellow);
}
.tint-red {
  background: var(--color-tint-red);
}
.tint-violet {
  background: var(--color-tint-violet);
}
.tint-green {
  background: var(--color-tint-green);
}

.feature h2 {
  margin-top: var(--space-5);
  font-family: var(--type-web-card-title-font);
  font-weight: var(--type-web-card-title-weight);
  font-size: var(--type-web-card-title-size);
  line-height: var(--type-web-card-title-line);
  letter-spacing: var(--type-web-card-title-tracking);
}

.feature p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

/* The course */

.course {
  margin-top: var(--space-16);
}

.eyebrow {
  color: var(--color-accent-fg);
  font-weight: var(--type-body-strong-weight);
}

.course h2 {
  margin-top: var(--space-2);
  font-family: var(--type-web-title-font);
  font-weight: var(--type-web-title-weight);
  font-size: var(--type-web-title-size);
  line-height: var(--type-web-title-line);
  letter-spacing: var(--type-web-title-tracking);
}

.units {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--size-web-unit-card-min)), 1fr));
  gap: var(--layout-card-gap);
  margin-top: var(--space-6);
}

.unit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-row-unit);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
}

.disc.round {
  width: var(--size-unit-disc);
  height: var(--size-unit-disc);
  border-radius: var(--radius-full);
}

.unit .illustration {
  width: var(--size-unit-illustration);
  filter: var(--filter-illustration);
}

.unit-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kicker {
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight);
}

.unit-pt {
  font-weight: var(--type-body-strong-weight);
}

.unit-nl {
  color: var(--color-text-muted);
  font-size: var(--type-callout-size);
  line-height: var(--type-callout-line);
  font-weight: var(--type-callout-weight);
}

/* Footer */

.foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  color: var(--color-text-muted);
}

.foot::before {
  content: "";
  display: block;
  height: 1px;
  margin-top: calc(-1 * var(--space-8));
  margin-bottom: var(--space-4);
  background: var(--color-border-subtle);
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch-min);
  text-decoration: none;
}

.foot a:hover {
  text-decoration: underline;
}

.foot .credit {
  font-weight: var(--type-caption-weight);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}

/* layout.wide-min */
@media (min-width: 900px) {
  .top {
    padding-top: var(--space-4);
  }

  .hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--space-16);
  }

  .chip {
    font-size: var(--type-callout-size);
    line-height: var(--type-callout-line);
  }

  h1 {
    font-size: var(--type-web-headline-wide-size);
    line-height: var(--type-web-headline-wide-line);
    letter-spacing: var(--type-web-headline-wide-tracking);
  }

  .em {
    background-size: 100% var(--size-web-highlight-wide);
  }

  .lead {
    font-size: var(--type-web-lead-wide-size);
    line-height: var(--type-web-lead-wide-line);
  }

  .hero-art {
    margin-top: 0;
  }

  .phone {
    width: var(--size-web-phone-wide);
  }

  .tulip {
    display: block;
    position: absolute;
    right: calc(-1 * var(--space-4));
    bottom: var(--space-6);
    width: var(--size-illustration-hero);
    filter: var(--filter-illustration);
  }

  .features {
    grid-template-columns: repeat(4, 1fr);
    margin-top: var(--space-16);
  }

  .course h2 {
    font-size: var(--type-web-title-wide-size);
    line-height: var(--type-web-title-wide-line);
    letter-spacing: var(--type-web-title-wide-tracking);
  }

  .foot {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .foot::before {
    flex-basis: 100%;
  }
}