/* student/student.css: page-specific layout on top of the site tokens. */
.student { max-width: 880px; padding-block: 24px 64px; }
.student-panel { margin-top: 24px; }
.student-status { min-height: 24px; color: var(--text-secondary); font-family: "DM Sans", "DM Sans Fallback", sans-serif; font-size: 14px; }
.apple-signin {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px;
  background: var(--text-primary); color: var(--bg-primary); border: 0; cursor: pointer;
  font-family: "DM Sans", "DM Sans Fallback", sans-serif; font-size: 15px; font-weight: 500;
}
.apple-signin:disabled { opacity: 0.5; cursor: default; }
.student-label { display: block; margin: 16px 0 6px; font-family: "DM Sans", "DM Sans Fallback", sans-serif; font-size: 13px; color: var(--text-secondary); }
.student-input {
  width: min(480px, 100%); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule);
  background: var(--bg-secondary); color: var(--text-primary); font-size: 16px;
}
.student-check { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; font-size: 15px; color: var(--text-primary); }
/* The box keeps its width when the label beside it wraps to three lines. */
.student-check input { flex-shrink: 0; }
/* Ink on paper, the same pair as .apple-signin above and the site's .appstore
   CTA. Green on cream was the brand accent, but it is a body-weight green on a
   light ground and it does not clear AA against it. */
.btn-primary {
  padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--text-primary); color: var(--bg-primary); font-family: "DM Sans", "DM Sans Fallback", sans-serif; font-size: 15px; font-weight: 500;
}
.btn-primary:disabled { opacity: 0.5; cursor: default; }
/* --danger, not --accent-gold: these lines are failures, and gold reads as a
   note. The token is tuned per theme in styles.css. */
.student-error { color: var(--danger); font-size: 14px; margin-top: 12px; }
.student-note, .student-fineprint { font-size: 13px; color: var(--text-tertiary); max-width: 640px; }
.student-identity { margin-top: 32px; font-size: 12.5px; color: var(--text-tertiary); }
.linklike {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}
.price-card .buy { margin-top: 16px; width: 100%; }

/* The panel headings sit outside .prose, so they need the serif scale the rest
   of the site uses. Without this they fall back to bold sans. */
.student-panel h2 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.student a {
  color: var(--tag-place);
  border-bottom: 1px solid color-mix(in srgb, var(--tag-place) 40%, transparent);
}

/* Three plans, so the site's two-column pricing grid would leave an orphan.
   minmax(0, 1fr) keeps a long price string from widening the track past the
   viewport on a narrow phone. */
.student .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; }
@media (max-width: 720px) {
  .student .pricing-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Welcome page. The QR track is fixed so the code never scales past the size a
   phone camera reads comfortably; the text track is minmax(0, 1fr) so a long
   line cannot push the grid wider than the viewport. Below 720px the code is
   dropped rather than stacked: a visitor already holding the phone does not
   scan a code on it. */
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; align-items: start; }
.qr { width: 200px; max-width: 100%; }
.qr svg { width: 100%; height: auto; }
@media (max-width: 720px) {
  .welcome-grid { grid-template-columns: minmax(0, 1fr); }
  .qr { display: none; }
}

/* The welcome page's primary action is a link, not a button. `.student a` gives
   every link in that section green text and an underline, and it outranks
   `.btn-primary`, so green type would land on the ink pill. Restate the
   button's own colors at equal specificity, later in the file. */
a.btn-primary { display: inline-block; background: var(--text-primary); color: var(--bg-primary); border-bottom: 0; text-decoration: none; }