/* ============================================================================
   home.css — the PC home page (2026-09-16, Robert).

   Loaded ONLY by home.html. Nothing here is shared, so it can't regress
   another page, and style.css doesn't grow for a one-page layout.

   ⚠️ COLOURS ARE THEME VARIABLES, NEVER LITERALS. The site has eight themes
   (see theme.js) and every one of them redefines --bg/--panel/--hero/--text.
   A hardcoded hex here would look correct in whichever theme it was written
   against and wrong in the other seven.
   ============================================================================ */

/* One gutter for the whole page, set once, so nothing can scroll sideways. */
.home {
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px 24px 60px;
}

/* ------------------------------------------------------------- intro --- */
/* Deliberately short. It exists to name the thing and get out of the way of
   the two doors below it.

   ⚠️ CENTRED (Robert, 2026-10-08). The lede has a 62ch cap so it stays
   readable; centring the TEXT without also centring the BOX leaves that cap
   hugging the left edge, so it needs `margin-inline: auto` as well. */
.home-intro {
  padding: 8px 0 26px;
  text-align: center;
}
.home-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.home-title {
  margin: 0 0 12px;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
}
.home-lede {
  margin: 0 auto;
  max-width: 62ch;
  font-size: clamp(15px, 1.3vw, 17.5px);
  line-height: 1.6;
  color: var(--text-dim);
}

/* ------------------------------------------------------------- doors --- */
/* THE TWO WAYS IN, side by side at the top of the page. Everything below is
   quieter on purpose — these are the only loud things here, which is what
   stops the page being confusing. */
.home-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.home-door {
  position: relative;
  display: flex;
  min-height: 300px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position is per-door and inline: the two pieces of art put
     their subject in different places. */
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.home-door:hover {
  transform: translateY(-3px);
  border-color: var(--hero);
}
/* The scrim. Strong at the bottom where the words are, barely there at the top
   so the artwork still reads. */
.home-door::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 6, 12, 0.1) 0%,
    rgba(4, 6, 12, 0.55) 48%,
    rgba(4, 6, 12, 0.93) 100%
  );
  transition: background 0.15s ease;
}
.home-door:hover::before {
  background: linear-gradient(
    180deg,
    rgba(4, 6, 12, 0) 0%,
    rgba(4, 6, 12, 0.45) 48%,
    rgba(4, 6, 12, 0.92) 100%
  );
}
.home-door-inner {
  position: relative;      /* above the scrim */
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;        /* text sits over the darkest part */
  padding: 20px 22px;
}
.home-door-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hero);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.home-door-title {
  font-size: clamp(22px, 2.3vw, 29px);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.home-door-text {
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
.home-door-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--hero);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 800;
}
.home-door:hover .home-door-go {
  background: color-mix(in srgb, var(--hero) 85%, #fff);
}

/* ---- product screenshots -------------------------------------------------
   Real captures of the real pages. They carry the explanation as much as the
   text does, so they get a frame that reads as "a picture of the app" rather
   than decoration: a border, a soft shadow and a slight lift. */
.home-shot {
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--sunken);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.home-shot img {
  display: block;
  width: 100%;
  height: auto;
}
/* Inside a flow row the picture must not set the row height: step 1's
   capture is near-square (860x840) and at column width it rendered ~645px
   tall, dwarfing the sentence it illustrates. Cap it and crop from the top
   left, which is where the thing being explained always is. */
.home-flow-row .home-shot img {
  max-height: 300px;
  object-fit: cover;
  object-position: top left;
}

/* ---- how it works: alternating picture / text rows ---------------------- */
.home-flow {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.home-flow-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 26px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
/* Alternate which side the picture sits on so the page has a rhythm instead
   of three identical rows.

   ⚠️ THE COLUMN WIDTHS SWAP TOO. `order` alone moves the picture into the
   narrow column, and the flipped row's screenshot came out half the size
   of the others. */
.home-flow-flip {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
}
.home-flow-flip .home-flow-text {
  order: 2;
}
.home-flow-text h3 {
  margin: 10px 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}
.home-flow-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 46ch;
}

/* Decorative character strip. One row, clipped, fading at both ends so it
   reads as a band rather than a list that got cut off. aria-hidden in the
   markup — it carries no information a screen reader needs. */
.home-faces {
  display: flex;
  gap: 8px;
  margin: 34px 0 6px;
  overflow: hidden;
  /* Both spellings: Safari still needs the -webkit- prefix here. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.home-faces img {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-2);
  object-fit: cover;
  opacity: 0.62;
  /* Same optical correction .face-icon-sm applies: home.js sets --face-zoom on
     the handful of portraits framed wider than the rest. Scales the painted
     image only, so the 40px box and the row layout are unchanged. */
  transform: scale(var(--face-zoom, 1));
}

/* ------------------------------------------------------------ sections --- */
.home-section {
  margin-top: 40px;
}
.home-section-title {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------------------------------------------------------- how it works --- */
.home-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.home-step {
  position: relative;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.home-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--hero-dim);
  color: var(--hero);
  font-size: 13px;
  font-weight: 800;
}
.home-step h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.home-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* -------------------------------------------------------------- cards --- */
/* auto-fit + minmax means the column count follows the width with no
   breakpoints — 3 up on a desktop, 2 on a small laptop, 1 on a phone. */
.home-cards {
  display: grid;
  /* 300px, not 240: at the page's 1032px content width that settles on
     THREE columns, so the six secondary cards form two clean rows. At 240
     it made four columns and left the last card orphaned on a row of its
     own. Still breakpoint-free — 2 up on a small laptop, 1 up on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.home-card-body {
  position: relative;      /* above the scrim */
  margin-top: auto;        /* text sits at the bottom, over the darkest part */
  padding: 16px 18px;
}

.home-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 44px 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.home-card:hover {
  transform: translateY(-2px);
  border-color: var(--hero);
  background: var(--panel-2);
}
.home-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
}
.home-card-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
}
.home-card-go {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 16px;
  color: var(--text-faint);
  transition: color 0.12s ease, transform 0.12s ease;
}
.home-card:hover .home-card-go {
  color: var(--hero);
  transform: translateX(2px);
}
/* The Optimizer is the one card people should land on, so it gets the accent
   edge and the full row on wide screens. */
.home-card-main {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--hero) 45%, var(--border));
  background: linear-gradient(135deg, var(--hero-dim), var(--panel));
}
.home-card-main .home-card-title {
  font-size: 18px;
}
/* Five cards never divide evenly into the auto-fit grid, so Discord was
   left dangling alone on a third row. Give it the full width like the
   Optimizer card and the page reads as three deliberate bands:
   Optimizer / the four pages / Discord. */
.home-card-discord {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  border-color: color-mix(in srgb, var(--gold) 35%, var(--border));
}
.home-card-discord:hover {
  border-color: var(--gold);
}
.home-card-discord:hover .home-card-go {
  color: var(--gold);
}

/* -------------------------------------------------------------- narrow --- */
/* The PC layout is the point of this page, but it still has to survive a phone:
   the mobile chrome (mobile.js) renders this page with its tab bar, and a page
   that scrolls sideways is broken everywhere. */
@media (max-width: 760px) {
  .home {
    padding: 24px 16px 48px;
  }
  /* Stack the flow rows: side-by-side at this width leaves the screenshot too
     small to read, which defeats the point of showing one. */
  .home-doors {
    grid-template-columns: 1fr;
  }
  .home-door {
    min-height: 240px;
  }
  .home-flow-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  .home-flow-flip .home-flow-text {
    order: 0;
  }
  /* Back to stacked: side by side, the Discord blurb squeezes to a
     two-word column at this width. */
  .home-card-discord {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .home-steps {
    grid-template-columns: 1fr;
  }
}