/* ---------- hero ---------- */
.hero {
  /* padding-top/bottom only (not the padding shorthand) - .hero and .wrap
     are the same element, and the shorthand would silently reset .wrap's
     horizontal padding to 0 instead of layering with it, since shorthand
     properties replace rather than merge. That's what was pinning the
     headline, lede, CTA and trust line flush against the viewport edges
     on mobile. Same bug class as .nav-row and .site-footer-row. */
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 0 2rem;
}
.cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.trust-line {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.trust-line strong { color: var(--ink-soft); }

/* ---------- hero card stack ---------- */
.stack {
  position: relative;
  height: clamp(280px, 34vw, 380px);
}
.job-card {
  position: absolute;
  width: min(15rem, 78%);
  background: var(--card-bg);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  box-shadow: 0 10px 26px var(--shadow);
  padding: 1rem 1.1rem;
  transition: transform 0.2s ease;
}
.job-card:hover { transform: translateY(-4px) rotate(0deg) !important; }
.job-card .role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 0.2rem;
  letter-spacing: -0.01em;
}
.job-card .biz { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.7rem; }
.job-card .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.job-card .pay { color: var(--ink); font-weight: 600; }
.job-card .tag {
  background: var(--chip);
  color: var(--chip-ink);
  border: 1px solid var(--paper-line);
  border-radius: 5px;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 400;
}
.card-a { top: 4%; left: 2%; transform: rotate(-6deg); z-index: 3; }
.card-b { top: 20%; right: 0; transform: rotate(4deg); z-index: 2; }
.card-c { bottom: 2%; left: 14%; transform: rotate(-2deg); z-index: 1; }

/* ---------- sections ---------- */
section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section-head {
  max-width: 34rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

/* Puts a section's header text and its content side by side instead of
   stacked, alternating which side the header sits on (--reverse) so the
   page reads as a zigzag going down instead of everything hugging the
   left edge the same way every time. order is used (not just swapping
   HTML) so heading text stays first in reading/DOM order either way. */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.split-section > :first-child { order: 1; }
.split-section > :last-child { order: 2; }
.split-section--reverse { grid-template-columns: 1.35fr 1fr; }
.split-section--reverse > :first-child { order: 2; }
.split-section--reverse > :last-child { order: 1; }
.split-section .section-head { max-width: none; margin-bottom: 0; }
.section-label {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  color: var(--accent);
  margin: 0 0 0.6rem;
}
h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.section-desc { color: var(--ink-soft); margin: 0.75rem 0 0; }

/* ---------- why: an editorial list of full-width rows, not a card grid -
   deliberately different from the timeline and split-panel sections below
   it, so three sections in a row don't all read as the same box shape. */
.feature-list { border-top: 1px solid var(--paper-line); }
.feature-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--paper-line);
  align-items: start;
}
.feature-row .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  color: var(--accent);
  line-height: 1;
  margin: 0;
}
.feature-row h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}
.feature-row p { color: var(--ink-soft); margin: 0; font-size: 0.97rem; }

/* ---------- how it works: numbered nodes connected by a line, instead
   of another grid of boxes - reinforces that these steps are sequential. */
.timeline { display: flex; flex-direction: column; }
.timeline-step {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1.5rem;
  position: relative;
  padding-bottom: 2.5rem;
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 2.75rem;
  bottom: 0;
  width: 2px;
  background: var(--paper-line);
}
.timeline-marker {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  position: relative;
  z-index: 1;
}
.timeline-content h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}
.timeline-content p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- for employers: a compact split panel (short checklist + one
   CTA card) instead of a third grid of boxes - this audience is secondary
   on a student-first site, so it doesn't need as much visual weight. */
.employer-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 44rem;
  margin: 0 auto;
}
.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  padding: 1.1rem 1.35rem;
  /* JS (faqAccordion.js) animates the `height` property directly via
     Web Animations API - this transition is only the fallback for
     browsers where that script bails out early, so open/close still
     isn't a dead instant snap there. */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item[open] {
  border-color: var(--accent);
  box-shadow: 0 6px 18px var(--shadow);
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color 0.15s ease;
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 700;
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item summary, .faq-item summary::after { transition: none; }
}
.faq-item p {
  color: var(--ink-soft);
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.check-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
/* position: relative + an absolutely-positioned ::before instead of
   display: flex on the <li> itself - flex would otherwise split any <li>
   containing a mix of plain text and an inline element (a link, in
   particular) into separate anonymous flex items, one per text run/
   element, which breaks natural text wrapping (each fragment gets its own
   tightly-shrunk column instead of flowing as one paragraph). This way the
   <li>'s content is just normal inline flow - wraps correctly regardless
   of what's inside it - and the checkmark is positioned independently in
   the reserved left padding. */
.check-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.employer-cta-card {
  background: var(--card-bg);
  border: 1px solid var(--paper-line);
  border-radius: 18px;
  padding: clamp(1.75rem, 3vw, 2.25rem);
}
.employer-cta-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  margin: 0 0 0.6rem;
}
.employer-cta-card p { color: var(--ink-soft); margin: 0 0 1.5rem; }

/* Standalone "Ready to find your first job?" banner - no longer lives
   inside <footer>. Keeping it as its own section means the footer is
   identical (and identically sized) on every page, and nav.js can just
   hide the whole #landing-cta section for signed-in visitors the same
   way it already does for #employers, with nothing left behind. */
.cta-banner {
  background: var(--card-bg);
  border: 1px solid var(--paper-line);
  border-radius: 20px;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.cta-banner .section-desc { max-width: 28rem; margin-left: auto; margin-right: auto; }
.cta-banner .cta-row { justify-content: center; margin-top: 1.25rem; }

/* ---------- scroll-reveal (see /js/scrollReveal.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Staggers children of a revealed group one after another instead of all
   snapping in at once - nth-child rather than a per-element inline delay
   so the HTML doesn't need to know its own position in the list. */
.reveal-group > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group > .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group > .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group > .reveal:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .stack { margin-top: 1rem; }
}

/* Below ~600px the rotated card-collage effect runs out of room - three
   240px cards positioned by percentage inside a container that's now
   narrower than two of them combined, so they were overlapping and
   partially covering each other's text. Drops the rotation/absolute
   positioning entirely in favor of a plain, non-overlapping vertical
   stack instead of trying to rescue the collage at a size it wasn't
   designed for. */
@media (max-width: 600px) {
  .stack {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .job-card {
    position: static;
    width: 100%;
    transform: none !important;
  }
  .feature-row { grid-template-columns: 3.25rem 1fr; gap: 1rem; }
  .employer-split { grid-template-columns: 1fr; }
  .split-section, .split-section--reverse { grid-template-columns: 1fr; }
  .split-section > :first-child, .split-section--reverse > :first-child,
  .split-section > :last-child, .split-section--reverse > :last-child { order: initial; }
  .split-section .section-head { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
  .fun-break-card { flex-direction: column; text-align: center; }
  .fun-break-text { max-width: none; }
}

/* ---------- fun break (see /js/stickFigureFun.js) - a small, purely
   decorative easter egg, sitting just below the hero (near the top
   without displacing it as the actual first thing on the page). Default
   section padding both sides, same as every other section-to-section
   transition on this page - no special-casing needed here. */
.fun-break-card {
  background: var(--card-bg);
  border: 1px solid var(--paper-line);
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  /* flex, not grid with a 1fr text column - grid's 1fr track ate all the
     card's leftover width regardless of how short the text actually was,
     shoving the figure out to the card's far edge instead of sitting
     next to it. */
  gap: 1.5rem;
}
.fun-break-text { max-width: 24rem; }
.fun-break-text .btn { margin-top: 1.25rem; }
.stick-figure-stage {
  position: relative;
  width: 120px;
  height: 168px;
  flex: none;
  cursor: pointer;
}
.stick-figure-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}
.stick-figure { overflow: visible; transition: transform 0.2s ease; }
/* A little "notice me" tilt on hover/focus (suppressed mid-celebration
   so it doesn't fight the active animation) - the whole stage is now a
   second, bigger click target alongside the "High five!" button. */
.stick-figure-stage:hover .stick-figure:not(.is-celebrating),
.stick-figure-stage:focus-visible .stick-figure:not(.is-celebrating) {
  transform: rotate(-6deg);
}
.stick-figure circle, .stick-figure line {
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
}
.sf-head { fill: var(--accent); stroke: var(--accent); }
.sf-ball circle { fill: var(--success); stroke: var(--success); }
/* The seam lines are the only reason a rolling ball actually reads as
   rolling - a perfectly plain circle spinning in place would look
   completely static, since it has no visible feature to track the
   rotation by. */
.sf-ball line { stroke: var(--card-bg); stroke-width: 1.5; }

/* Three different celebrations (see /js/stickFigureFun.js, which picks
   one at random per click) so repeat clicks don't just replay the same
   motion - each is tuned to ~1.8s total, matching the script's shared
   cleanup timeout regardless of which one plays. transform-origin on
   each arm is its shoulder joint (where it meets .sf-body), so it swings
   from there instead of rotating around the SVG's own origin. */
.stick-figure.is-celebrating.move-wave { animation: sf-jump 0.6s ease-in-out 3; }
@keyframes sf-jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.stick-figure.is-celebrating.move-wave .sf-arm-right {
  transform-origin: 50px 52px;
  animation: sf-wave-right 0.3s ease-in-out 6 alternate;
}
@keyframes sf-wave-right {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-55deg); }
}
.stick-figure.is-celebrating.move-wave .sf-arm-left {
  transform-origin: 50px 52px;
  animation: sf-wave-left 0.3s ease-in-out 6 alternate;
}
@keyframes sf-wave-left {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(35deg); }
}

.stick-figure.is-celebrating.move-cheer { animation: sf-jump-big 0.9s ease-in-out 2; }
@keyframes sf-jump-big {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.stick-figure.is-celebrating.move-cheer .sf-arm-right {
  transform-origin: 50px 52px;
  animation: sf-cheer-right 0.9s ease-in-out 2;
}
@keyframes sf-cheer-right {
  0%, 100% { transform: rotate(0deg); }
  30%, 70% { transform: rotate(-100deg); }
}
.stick-figure.is-celebrating.move-cheer .sf-arm-left {
  transform-origin: 50px 52px;
  animation: sf-cheer-left 0.9s ease-in-out 2;
}
@keyframes sf-cheer-left {
  0%, 100% { transform: rotate(0deg); }
  30%, 70% { transform: rotate(80deg); }
}

.stick-figure.is-celebrating.move-spin {
  transform-origin: 50px 70px;
  animation: sf-spin 0.9s ease-in-out 2;
}
@keyframes sf-spin {
  0% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(360deg) translateY(-12px); }
  100% { transform: rotate(360deg) translateY(0); }
}

/* Sam gives the ball a little kick (right leg swings forward) while it
   rolls out and rolls back, spinning the whole way so the motion actually
   reads as rolling rather than just sliding. */
.stick-figure.is-celebrating.move-ball .sf-leg-right {
  transform-origin: 50px 90px;
  animation: sf-kick 0.9s ease-in-out 2;
}
@keyframes sf-kick {
  0%, 100% { transform: rotate(0deg); }
  30%, 70% { transform: rotate(-25deg); }
}
.stick-figure.is-celebrating.move-ball .sf-ball {
  transform-origin: 50px 130px;
  animation: sf-ball-roll 0.9s ease-in-out 2;
}
@keyframes sf-ball-roll {
  0% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(24px) rotate(300deg); }
  /* 360deg, not back to 0deg - visually identical at rest, but keeps the
     rotation interpolating smoothly through the end instead of snapping
     backwards from 300deg to 0deg in one frame. */
  100% { transform: translateX(0) rotate(360deg); }
}

/* A little disco sway - whole figure rocks side to side while the legs
   and arms swing opposite each other, on top of (not instead of) the
   whole-figure sway. Each piece keeps its own transform-origin/rotation
   independent of the group's translateX/rotate, same as every other
   move here - transforms compose correctly regardless of how many
   elements in the chain are animating at once. */
.stick-figure.is-celebrating.move-dance { animation: sf-sway 0.45s ease-in-out 4 alternate; }
@keyframes sf-sway {
  0% { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(8px) rotate(4deg); }
}
.stick-figure.is-celebrating.move-dance .sf-leg-left {
  transform-origin: 50px 90px;
  animation: sf-dance-leg-left 0.45s ease-in-out 4 alternate;
}
@keyframes sf-dance-leg-left {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-18deg); }
}
.stick-figure.is-celebrating.move-dance .sf-leg-right {
  transform-origin: 50px 90px;
  animation: sf-dance-leg-right 0.45s ease-in-out 4 alternate;
}
@keyframes sf-dance-leg-right {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(18deg); }
}
.stick-figure.is-celebrating.move-dance .sf-arm-left {
  transform-origin: 50px 52px;
  animation: sf-dance-arm-left 0.45s ease-in-out 4 alternate;
}
@keyframes sf-dance-arm-left {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(20deg); }
}
.stick-figure.is-celebrating.move-dance .sf-arm-right {
  transform-origin: 50px 52px;
  animation: sf-dance-arm-right 0.45s ease-in-out 4 alternate;
}
@keyframes sf-dance-arm-right {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-20deg); }
}

/* Jumping jacks - legs and arms spread together in the same rhythm
   (unlike move-dance's opposing swing), reusing the same whole-figure
   sf-jump hop as move-wave since both moves involve hopping. */
.stick-figure.is-celebrating.move-jump { animation: sf-jump 0.6s ease-in-out 3; }
.stick-figure.is-celebrating.move-jump .sf-leg-left {
  transform-origin: 50px 90px;
  animation: sf-jj-leg-left 0.6s ease-in-out 3 alternate;
}
@keyframes sf-jj-leg-left {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-15deg); }
}
.stick-figure.is-celebrating.move-jump .sf-leg-right {
  transform-origin: 50px 90px;
  animation: sf-jj-leg-right 0.6s ease-in-out 3 alternate;
}
@keyframes sf-jj-leg-right {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(15deg); }
}
.stick-figure.is-celebrating.move-jump .sf-arm-left {
  transform-origin: 50px 52px;
  animation: sf-jj-arm-left 0.6s ease-in-out 3 alternate;
}
@keyframes sf-jj-arm-left {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(70deg); }
}
.stick-figure.is-celebrating.move-jump .sf-arm-right {
  transform-origin: 50px 52px;
  animation: sf-jj-arm-right 0.6s ease-in-out 3 alternate;
}
@keyframes sf-jj-arm-right {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-95deg); }
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  animation: confetti-fall 0.9s ease-out forwards;
}
@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), 90px) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* Covers every current and future move-* variant and whatever part of
     the figure it animates, without needing a line added here per move -
     .is-celebrating itself plus every descendant, rather than naming each
     .move-* class and the specific limbs it touches one by one. */
  .stick-figure,
  .stick-figure-stage:hover .stick-figure,
  .stick-figure-stage:focus-visible .stick-figure,
  .stick-figure.is-celebrating,
  .stick-figure.is-celebrating * { transition: none; animation: none; }
  .confetti-piece { display: none; }
}