/**
 * The front door — `/`.
 *
 * Deliberately quieter than the shop. This page is read once, in order, before a
 * learner has any idea what the rest of the site is — so it is one column, wide
 * measure, and nothing competes with the numbered steps in the middle. Every
 * color and face is the site's own; a front door in a different accent would
 * teach the learner that Flowland is two things.
 */

.st { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }

/* --- the opening ---------------------------------------------------------- */

.st-hero h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.12;
  margin-block: 0.35rem 0.9rem;
  max-width: 20ch;
}
.st-hero__lede {
  font-size: clamp(1rem, 1.6vw, 1.13rem);
  line-height: 1.62;
  color: var(--ink-mid);
  max-width: 60ch;
  margin: 0 0 0.9rem;
}
.st-hero__lede:first-of-type { color: var(--ink); }

/* The two ways in, straight under the opening. A front door whose first action is
   three screens away is not a front door. */
.st-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }

/* --- the two halves ------------------------------------------------------- */

/* The one idea the page exists to plant: two products, one boundary. Side by
   side above 40rem, stacked below.

   The joint is a two-way arrow on purpose. A single → from FlowRunner to Flowland
   is the misreading the headline exists to correct: it is Flowland that calls the
   flow, and the flow that calls back. Both directions are real, so the mark shows
   both. */
.st-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.st-pair__side { padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.st-pair__side:last-child { background: var(--paper-warm); }
.st-pair__who {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.35rem;
}
.st-pair__what {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.st-pair__side p:last-child {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.st-pair__joint {
  display: grid;
  place-items: center;
  padding-inline: 0.9rem;
  background: var(--kraft);
  color: var(--green);
  font-size: 1.1rem;
}
.st-pair__joint span { display: block; }
@media (max-width: 40rem) {
  .st-pair { grid-template-columns: 1fr; }
  .st-pair__joint { padding: 0.5rem; }
  .st-pair__joint span { transform: rotate(90deg); }
}

/* --- the numbered path ---------------------------------------------------- */

.st-steps { counter-reset: step; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.st-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  padding-bottom: 1.5rem;
  max-width: 58ch;
}
.st-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.85rem;
}
/* The rail joining the numbers. Stops at the last one, which has nothing below
   it to join to. */
.st-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0.95rem;
  top: 2.1rem;
  bottom: 0.3rem;
  width: 1px;
  background: var(--hairline);
}
.st-steps h3 {
  font-size: 1.02rem;
  margin: 0 0 0.25rem;
  line-height: 1.35;
}
.st-steps p { margin: 0; color: var(--ink-soft); line-height: 1.55; font-size: 0.94rem; }
.st-steps .btn { margin-top: 0.6rem; }

/* --- the panel, explained ------------------------------------------------- */

.st-panel {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius);
  background: var(--paper-warm);
}
.st-panel dl { margin: 1rem 0 0; display: grid; gap: 0.55rem; }
.st-panel div { display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap; }
.st-panel dt {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--green);
  min-width: 15rem;
  font-weight: 500;
}
.st-panel dd { margin: 0; color: var(--ink-soft); font-size: 0.9rem; flex: 1 1 18rem; }
.st-panel__note { margin: 1rem 0 0; font-size: 0.88rem; color: var(--ink-faint); }

/* --- where things are ----------------------------------------------------- */

.st-map {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.st-map li { background: var(--paper); padding: 1rem 1.1rem; }
.st-map h3 { font-size: 0.98rem; margin: 0 0 0.3rem; }
.st-map h3 a { text-decoration: none; }
.st-map h3 a:hover { text-decoration: underline; }
.st-map p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }

/* --- the honest disclaimers ----------------------------------------------- */

.st-not { margin-top: clamp(2rem, 5vw, 3rem); }
.st-not ul { margin: 0.8rem 0 0; padding-left: 1.1rem; max-width: 62ch; }
.st-not li { margin-bottom: 0.45rem; color: var(--ink-soft); line-height: 1.55; }

.st-end {
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}
.st-end p { margin: 0 auto 0 0; color: var(--ink-soft); font-size: 0.92rem; max-width: 40ch; }

/* Inside the card the heading is a label, not a page band — at the site's default
   h2 size it shouted louder than "Your first fifteen minutes", which is the thing
   the page actually wants read. */
.st-panel h2 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin: 0 0 0.5rem; }
.st-panel__lede { color: var(--ink-soft); max-width: 68ch; margin: 0; }

.st-sub { color: var(--ink-soft); max-width: 58ch; }

/* What a first-timer needs before step 1 makes sense. Quiet, under the buttons,
   because it is a prerequisite rather than a pitch. */
.st-need {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 54ch;
}