/* Landing route only. */

/* A single-screen, centered hero: black canvas, the beam in the upper right, one
   sentence, two controls. The product facts that used to sit beside it now run
   as a full-width instrument strip underneath, which is what lets the hero stay
   quiet without losing the evidence. */
.hero {
  display: grid; place-items: center; text-align: center;
  min-height: min(76vh, 640px);
  padding-block: clamp(3.2rem, 11vh, 6.5rem) clamp(2.6rem, 7vh, 4.5rem);
}
/* width:100% is load-bearing: a grid item in a centered place-items container is
   otherwise sized to max-content, which laid the whole headline out on one line
   and pushed 239px of words past a 390px viewport. */
.hero-in { display: block; width: 100%; max-width: 60rem; }
.hero-line {
  font-size: clamp(2.45rem, 7.4vw, 4.5rem); font-weight: 500;
  letter-spacing: -.045em; line-height: 1.03;
  width: min(100%, 20ch); margin-inline: auto;
  /* The words carry their own stagger, so the block around them must not animate. */
  animation: none; opacity: 1;
}
.w-grad {
  background-image: linear-gradient(180deg, #fff 0, #cbcbcb 46%, #7b7b7b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-sub { margin: 1.5rem auto 0; max-width: 50ch; color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.14rem); line-height: 1.65; }

.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.3rem; }
.account-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: 1.15rem; }
.account-row[hidden] { display: none; }

/* landing.js flips #auth-area's `hidden` attribute once /api/visit resolves.
   display:contents keeps its two pills as direct members of the flex row;
   base.css's [hidden]{display:none !important} still wins while it is hidden. */
#auth-area { display: contents; }
#auth-pill img { width: 18px; height: 18px; border-radius: 50%; flex: none; }
#auth-out { font: inherit; cursor: pointer; touch-action: manipulation; }

/* ------------------------------------------------------ spec sheet as a strip */
/* The hero's evidence, demoted from a side card to a full-width instrument row.
   Data only: every cell is one label and one value, no explanatory prose. */
.strip-sec { padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.strip {
  margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--metal-line); border-radius: var(--radius);
  background: var(--card); overflow: hidden;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .045);
}
.strip-cell { min-width: 0; display: grid; gap: .35rem; padding: 1.05rem 1.2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip-cell:nth-child(3n) { border-right: 0; }
.strip-cell:nth-child(n + 4) { border-bottom: 0; }
.strip-cell dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.strip-cell dd { margin: 0; font-family: var(--mono); font-size: .88rem; color: #fff; overflow-wrap: anywhere; }
.strip-cell .pending { color: var(--faint); font-style: italic; font-family: var(--body); }
@media (max-width: 820px) {
  .strip { grid-template-columns: minmax(0, 1fr); }
  .strip-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .strip-cell:nth-child(3n) { border-right: 0; }
  .strip-cell:nth-child(n + 4) { border-bottom: 1px solid var(--line); }
  .strip-cell:last-child { border-bottom: 0; }
}

/* Landing only: base.css's section padding was sized for the long version of
   this page and left more black than content once the copy was cut. */
section { padding-block: clamp(2.2rem, 5vw, 3.8rem); }
/* .hero overrides it by class specificity, so the first screen keeps its air. */

/* Steps: numbered rows on a rule, each one action plus a single clause. */
.steps { list-style: none; counter-reset: step; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .1rem; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.steps > li:last-child { border-bottom: 0; }
.steps > li::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: .8rem; color: var(--faint); padding-top: .15rem; }
.steps h3 { font-size: .98rem; letter-spacing: -.01em; }
.steps p { color: var(--muted); font-size: .9rem; margin-top: .25rem; }

/* Changelog teaser: date + title only, the bodies stay on /changelog. */
.log-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.log-head h2 { margin: 0; }
.log-head a { font-family: var(--mono); font-size: .76rem; color: var(--faint); }
.log-head a:hover { color: #fff; }
.log { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 0; }
.log > li { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.log time { font-family: var(--mono); font-size: .76rem; color: var(--faint); padding-top: .12rem; }
.log h3 { font-size: .98rem; margin: 0; }

.cta-band {
  display: grid; gap: 1.2rem; justify-items: start;
  border: 1px solid var(--metal-line); border-radius: 18px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: linear-gradient(180deg, #101010, #060606);
  box-shadow: inset 0 1px 0 0 var(--metal-hi);
}
.cta-band h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 0; }
/* The invite link is null until it is published, so the fallback says that in
   one line instead of explaining why a button is missing. */
.no-invite { margin: 0; color: var(--muted); font-size: .9rem; }