/* The landing page: the co-founder's mockup, re-cut onto the tokens.
 *
 * This is the one page that is not a card for somebody standing in front of a
 * box — it is a page somebody scrolls, and the mockup drew it wide: a hero, a
 * row of step cards and a band of label cards. So it gets its own file rather
 * than a hundred lines of Python string, which is what `landing()` used to
 * carry for a page that was three sentences and one button.
 *
 * It comes after `theme.css`, so it names tokens and adds only what is this
 * page's: the grid, the hero, the pills' minimum width. Everything the two
 * share — the page's white, the text colour, the font, the button, the card's
 * background and border — is `theme.css`'s, and a rule here overrides it only
 * where the mockup says something different.
 *
 * Every colour here is a token, named and not written. The mockup's card
 * white, its card border and its translucent hover shadow are `var(--white)`,
 * `var(--line)` and a `color-mix` of `var(--navy)` — a colour written out
 * would not follow the palette into a dark `:root`, which is the whole
 * promise `theme.css` makes.
 */

html { scroll-behavior: smooth; }

.wrap { max-width: 1180px; margin: auto; padding: 0 24px; }

header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The wordmark at header size. `theme.css` sizes every other one at 26px,
   where it sits above a heading on a phone page. */
.brand img { height: 34px; }

/* The nav pill. Smaller than the page's buttons because it is a way in, not
   the thing the page is asking for. */
.navbtn {
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 24px;
  font-weight: 800;
}

.hero { text-align: center; padding: 20px 0 65px; }
/* `height: auto` because the tag carries `height="600"` to reserve its space
   while it loads: without it the width rule above would squash the picture. */
.hero img {
  width: min(100%, 900px);
  height: auto;
  display: block;
  margin: 0 auto 20px;
  border-radius: 28px;
}

h1 {
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.02;
  margin: 10px auto 20px;
  color: var(--navy);
  letter-spacing: -2px;
  max-width: 900px;
}

.one {
  font-size: clamp(18px, 2.2vw, 25px);
  line-height: 1.5;
  max-width: 850px;
  margin: 0 auto 30px;
  color: var(--muted);
}

.actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.actions .button { min-width: 210px; }

section { padding: 72px 0; }
.section-title { text-align: center; font-size: 38px; color: var(--navy); margin: 0 0 12px; }
.section-sub { text-align: center; color: var(--muted); font-size: 18px; margin: 0 auto 38px; }

/* The mockup's four steps: "Name your box" was held back until the box page
   had a field to name a box with, and came back with it (feature-box-details).
   Two columns at 800px and one at 560px, as the mockup draws them. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* `theme.css` holds what a card is — the light background, the line, the
   radius. This is where a step card's text sits. */
.card { padding: 28px; text-align: center; }

.num {
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--orange);
  /* Navy on the orange, not the mockup's white: white on that orange is about
     2.4:1, which fails WCAG AA even for large text. Do not "fix" it back. */
  color: var(--navy);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.card h3 { color: var(--navy); margin: 8px 0; }
.card p { line-height: 1.5; color: var(--muted); margin: 0; }

.labels {
  background: var(--light);
  border-radius: 30px;
  padding: 55px 30px;
  text-align: center;
}

.label-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 22px;
  max-width: 800px;
  margin: 35px auto 0;
}
/* The ORDER card is a form around a button, so the form is the grid cell and
   the button fills it — which is what makes the two cards the same size. */
.label-options form { display: flex; }

/* One card, whichever element it is. The `<a>` and the `<button>` beside it
   must look the same, and a button brings its own font, its own centring and
   its own cursor unless it is told otherwise. */
.label {
  display: block;
  width: 100%;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  text-decoration: none;
  color: var(--navy);
  transition: .2s;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.label:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--navy) 12%, transparent);
}
.icon { display: block; font-size: 42px; margin-bottom: 10px; }
.label strong { display: block; font-size: 20px; }
.label small { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; }

/* The one line carried from the front door that the mockup does not have:
   signing in is not access. It sits in the band, under the two cards. */
.switch { display: block; margin: 1.5rem 0 0; color: var(--muted); font-size: 1rem; }

/* Kept although nothing uses it: the mockup's two `.start` bands became the
   sign-in and the coming-soon page. A rule in a file costs nothing. */
.start {
  text-align: center;
  padding: 70px 20px;
  background: var(--navy);
  color: var(--white);
  border-radius: 30px;
  margin: 0 0 70px;
}
.start h2 { font-size: 42px; margin: 0 0 12px; }
.start p { font-size: 18px; opacity: .9; margin-bottom: 25px; }

footer { text-align: center; padding: 25px; color: var(--footer); font-size: 14px; }

@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  header .navbtn { display: none; }
  .steps, .label-options { grid-template-columns: 1fr; }
  section { padding: 50px 0; }
}