/* =====================================================================
   SurveyAll — the public home page (index.html).

   This is the only page a stranger might land on, so it argues for the
   tool instead of operating it. Everything here is drawn from the same
   tokens as the app (styles/base.css): same cream ground, same army
   green, same Fraunces/Inter pairing, so the marketing page and the
   product a visitor signs into look like one thing.

   Students never need this page — they go to /join — but a student who
   types the bare domain still gets a visible way through, so the join
   link sits in the masthead and again in the footer.
   ===================================================================== */

/* The accent is army green, and it lives in styles/base.css (and the
   Lecture Hall theme) rather than here, so the home page, the dashboard
   and the projector all carry the same colour on the same cream. */
body.home {
  height: auto;
  min-height: 100%;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border-radius: 8px;
  z-index: 10;
}
.skip-link:focus { left: var(--sp-3); }

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ------------------------------------------------------------ masthead */

.masthead {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
}

.wordmark {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}

.masthead nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* The student's way out of a page that isn't for them. Quiet, but a real
   link with real contrast — not a footnote in 60% grey. */
.student-link {
  font-size: .88rem;
  font-weight: 550;
  color: var(--ink-soft);
  text-decoration-color: color-mix(in srgb, var(--ink-soft) 40%, transparent);
  text-underline-offset: 3px;
}
.student-link:hover { color: var(--ink); }

/* A button label must never break mid-phrase. On a 375px screen the two
   buttons and the student link shared one row and "Sign in" came apart
   into two stacked words inside its own pill. */
.masthead .btn { white-space: nowrap; }

@media (max-width: 34rem) {
  .masthead { flex-wrap: wrap; row-gap: var(--sp-2); }
  .masthead nav {
    width: 100%; margin-left: 0;
    /* The student link takes the row above; the two instructor buttons
       sit together on the row below, which is also the order of
       importance for whoever landed here. */
    flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2);
  }
  .student-link { order: -1; width: 100%; }
  .masthead .btn { padding-inline: var(--sp-4); }
}

/* ---------------------------------------------------------------- hero */

/* The headline runs the full width; the argument and the loop share the
   row beneath it, with the loop taking the larger column. Sizing is set
   by what the master can carry: at ~670px the 1600-wide encode is still
   being scaled DOWN on a 2x display, so the loop stays crisp instead of
   the browser inventing pixels the way the full-bleed version did. */
.hero { padding-block: clamp(2rem, 6vw, 3.5rem) clamp(2.5rem, 6vw, 4rem); }

.hero-row {
  display: grid;
  /* The copy column's floor is set by the call-to-action pair: any
     narrower and the two buttons break onto separate lines, which reads
     as two decisions rather than one choice with a fallback. Everything
     left over goes to the loop, which is the thing worth looking at. */
  grid-template-columns: minmax(21rem, 0.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: var(--sp-5);
}

@media (max-width: 56rem) {
  .hero-row {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    margin-top: var(--sp-4);
  }
}

.hero h1 {
  /* One line, deliberately. The headline sets the width of the whole
     page, and broken across two lines it read as a stacked slogan rather
     than a sentence.
     The sizing is measured, not guessed. Fraunces is optical-size
     variable, so the line's width per em changes with the size itself —
     it runs about 14.4em at these sizes, not the 12.5em a probe at 100px
     suggests. The cap and the vw term are both set from that worst case
     against the column width (minus a scrollbar), which is why they look
     oddly specific.
     No `max-width` here: a ch cap is what forced the wrap in the first
     place.
     The floor is min(2.4rem, 7.4vw) rather than a bare rem so that the
     locked line below cannot overflow: a reader browsing at 150% text
     size scales the rem but not the vw, and a nowrap headline with
     nowhere to go takes the whole page into horizontal scroll. */
  font-size: clamp(min(2.4rem, 7.4vw), 6vw, 4.3rem);
  font-weight: 650;
  letter-spacing: -.02em;
  margin-bottom: var(--sp-4);
}

@media (min-width: 56rem) {
  .hero h1 { white-space: nowrap; }
}

.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.55;
  max-width: 42ch;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.fine {
  margin-top: var(--sp-4);
  font-size: .86rem;
  color: var(--ink-soft);
  max-width: 40ch;
  text-wrap: pretty;
}
.fine code {
  font-family: var(--body);
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  padding: .1em .35em;
  border-radius: 5px;
}

/* ---------------------------------------------------------- the video

   A 61-second silent loop of the app being used, in place of the mock
   this hero used to draw by hand. It sits beside the headline and takes
   the larger half of the row, with a real frame — border, shadow, the
   page's own corner radius — rather than floating unbounded.
   ------------------------------------------------------------------- */

.scene { position: relative; margin: 0; }

.hero-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* Always on screen, not just when the loop is stopped: a minute of
   motion next to text somebody is reading should have an obvious way to
   stop. Sits inside the video's own frame, bottom right, where it covers
   nothing the loop is doing. */
.video-toggle {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  min-width: 4.5rem;
  padding: .4rem .9rem;
  border: 1px solid var(--edge-strong);
  border-radius: 999px;
  /* Opaque, not a wash: the frame underneath is a light UI screenshot in
     some seconds of the loop and a dark theme tile in others, and a
     translucent pill would fail contrast in one of them. */
  background: var(--surface);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 550;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: .9;
  transition: opacity var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.video-toggle:hover,
.video-toggle:focus-visible { opacity: 1; border-color: var(--cta); color: var(--cta); }

/* -------------------------------------------------------------- claims

   A specification list, not a grid of look-alike cards: term on the
   left, plain sentence on the right, hairline between rows.
   ------------------------------------------------------------------- */

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.section h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 650;
  letter-spacing: -.015em;
  max-width: 24ch;
}

.spec {
  margin: var(--sp-6) 0 0;
  display: grid;
  grid-template-columns: minmax(11rem, 18rem) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

.spec dt {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  padding: var(--sp-4) 0 var(--sp-2);
  border-top: 1px solid var(--edge);
}

.spec dd {
  margin: 0;
  padding: var(--sp-4) 0 var(--sp-5);
  border-top: 1px solid var(--edge);
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}
.spec dd strong { color: var(--ink); font-weight: 600; }

/* The last row already sits above a section boundary; its own bottom
   padding would double the gap. */
.spec > :last-child { padding-bottom: 0; }

@media (max-width: 44rem) {
  .spec { grid-template-columns: 1fr; }
  .spec dt { padding-bottom: var(--sp-1); }
  .spec dd { border-top: 0; padding-top: 0; }
}

/* The question types, as a plain set of names — a snapshot of a list
   that grows, which is why the heading above it does not count them. */
.types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: 0;
  list-style: none;
}
.types li {
  font-size: .84rem;
  font-weight: 550;
  padding: .28rem .7rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface);
}

/* ----------------------------------------------------------- data band

   The one place the page raises its voice, because it's the one claim
   that is unusual: not "we're careful with student data" but that there
   is none to be careful with.
   ------------------------------------------------------------------- */

.band {
  background: var(--accent);
  color: var(--on-accent);
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}
.band h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 650; letter-spacing: -.02em; }
/* Full width, like every other section. The 60ch measure that used to
   be here is the right rule for a long read and the wrong one here: it
   is three sentences, and holding them to half the column left a bare
   half-band of green and made the whole thing twice as tall as it needed
   to be. At the 68rem column this lands in two lines. */
.band p { max-width: none; margin-top: var(--sp-4); text-wrap: pretty; }
.band a { color: inherit; text-underline-offset: 3px; }

/* ----------------------------------------------------------- close CTA */

.close {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--edge);
  text-align: center;
}
.close h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-inline: auto; }
.close p {
  margin: var(--sp-3) auto 0;
  max-width: 48ch;
  color: var(--ink-soft);
  text-wrap: balance;
}
.close .cta-row { justify-content: center; }

.home-foot {
  border-top: 1px solid var(--edge);
  padding-block: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  font-size: .84rem;
  color: var(--ink-soft);
}
.home-foot a { color: var(--ink-soft); text-underline-offset: 3px; }
.home-foot a:hover { color: var(--ink); }
.home-foot .spacer { flex: 1; }