/* Instant Archive — combined landing.
 *
 * Layered on /assets/trial.css rather than restating it, so the console, the buttons, the type
 * scale and the grain all come from the shipped design system and cannot drift away from it.
 * Only what this page introduces lives here: the three-up "how it works" block, the sample label
 * on the console, and the signup dialog.
 *
 * Deliberately absent: the small uppercase kicker above a heading. It was doing no work except
 * making every block look like every other block, and it is the tell that reads as generated.
 */

/* The console demo is illustrative. Saying so on the chassis is cheaper than having a visitor
   work out for themselves that "1,284 clips indexed" is not a real corpus, and much cheaper than
   having them notice after they have signed up. */
.sample {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line-2); border-radius: 4px; padding: 4px 8px;
}

/* Three beats, headings only. */
.how { display: grid; gap: 26px; margin-top: 26px; }
.how-item h3 {
  font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  margin-bottom: 8px;
}
.how-item p { color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 52ch; }
@media (min-width: 860px) {
  .how { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .how-item p { max-width: none; }
}

.closer { border-top: 1px solid var(--line); }

/* ── the dialog ────────────────────────────────────────────────────────────────────────────── */
.auth-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.auth-modal[hidden] { display: none; }
.auth-scrim { position: absolute; inset: 0; background: rgba(5, 8, 11, .78); backdrop-filter: blur(6px); }
.auth-card {
  position: relative; width: 100%; max-width: 430px;
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2); border-radius: 16px; padding: 28px 26px 26px;
  box-shadow: var(--shadow); max-height: calc(100vh - 40px); overflow-y: auto;
}
.auth-card h2 { font-size: 24px; letter-spacing: -.028em; line-height: 1.1; }
.auth-card > .fine { margin-top: 8px; }
.auth-x {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  background: transparent; border: 0; color: var(--dim); font-size: 22px; line-height: 1;
  cursor: pointer; border-radius: 8px;
}
.auth-x:hover { color: var(--text); }

#form-auth { display: grid; gap: 14px; margin-top: 22px; }
#form-auth .field { display: grid; gap: 6px; }
#form-auth label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
#form-auth input {
  background: rgba(11, 15, 20, .72); border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--text); font-family: var(--sans);
  /* The 16px that stops iOS zooming on focus is trial.css's global input rule, not this one.
     Restated here only so the dialog matches; do not treat this as the load-bearing copy. */
  font-size: 16px; padding: 14px 15px; min-height: 50px; width: 100%;
}
#form-auth input:focus { outline: none; border-color: var(--blue); }
#form-auth input[aria-invalid="true"] { border-color: var(--red); }
#form-auth .hint { font-size: 12.5px; color: var(--dim); }
#form-auth .btn { width: 100%; margin-top: 4px; }


body.auth-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .auth-scrim { backdrop-filter: none; }
}

/* ── the six stages, on the post-signup screen ─────────────────────────────────────────────────
   Numbered because these genuinely happen in order and the order is the information: a visitor
   waiting on stage 04 wants to know what is left. Not a decorative counter. */
.stages { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; }
.stage-row {
  background: var(--surface); padding: 15px 18px; display: grid;
  grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline;
}
.stage-row .n { font-family: var(--mono); font-size: 11px; color: var(--blue); }
.stage-row b { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.stage-row p { color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 3px; max-width: 56ch; }
@media (min-width: 780px) { .stages { grid-template-columns: 1fr 1fr; } }

/* Tap targets. #signin-link is the only route back for anyone who signed up on a phone yesterday,
   and it was 19px tall. Negative margins buy the height without moving anything. */
.link { padding: 12px 4px; margin: -12px -4px; }
.tabs button { padding: 13px 15px; }
.auth-x { width: 44px; height: 44px; top: 8px; right: 8px; }

/* .linkish:hover in trial.css sets color:var(--ink), which on this dark card is the background:
   the control vanishes. iOS holds :hover after a tap, so it disappears under the finger mid
   password reset. Almost certainly a rule copied from a light surface. */
.auth-card .linkish:hover, .auth-card .linkish:focus-visible { color: var(--text); }

/* The demo's typed query is the most persuasive thing on the page and trial.css truncates it to
   one ellipsised line. At 375px the box is 217px against queries up to 375px wide, so the visitor
   read "find what did she say about the ..." and then results highlighting words they never saw.
   The length of the query is the point; let it wrap. */
@media (max-width: 620px) {
  .con-search { align-items: flex-start; }
  .con-search .qt { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* The signed-out footer. Sits above the closing CTA rather than below it, so the last thing on the
   page is still the button. */
.landing-foot {
  border-top: 1px solid var(--line); padding: 26px 0 4px; color: var(--dim);
  font-size: 12.5px; line-height: 1.6;
}
.landing-foot b { color: var(--muted); font-weight: 500; }
.landing-foot a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
.landing-foot a:hover { color: var(--text); }
.landing-foot p + p { margin-top: 6px; }