/* Shared by usa-graduates + oldimg ("before your call" pages) */
.lhero { padding: 72px 0 88px; }
.lhero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.lhero .lead { margin: 24px 0 0; }
.lhero .stats { margin: 40px 0 32px; }
.lhero .stat .num { font-size: 38px; white-space: nowrap; }
.fan { position: relative; height: 520px; }
.fan .rcpt { position: absolute; width: 260px; }
.fan .f1 { left: 0; top: 40px; transform: rotate(-5deg); }
.fan .f2 { left: 50%; top: 0; transform: translateX(-50%) rotate(1deg); z-index: 2; }
.fan .f3 { right: 0; top: 64px; transform: rotate(6deg); }

.story-card { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; padding: 64px 0; border-top: 1px solid var(--line); }
.story-card:first-of-type { border-top: 0; padding-top: 0; }
.tags { font-size: 13px; color: var(--t3); margin-bottom: 12px; }
.story-card h3 { font-size: 28px; line-height: 1.2; letter-spacing: -.015em; margin-bottom: 16px; }
.story-card .body { color: var(--t2); max-width: 40rem; }
.story-card blockquote { margin: 20px 0 0; padding-left: 16px; border-left: 2px solid var(--vault); color: var(--t1); font-size: 17px; }
.tl { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tl li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tl .num { font-size: 32px; }
.tl li.pass .num { color: var(--pass); }
.tl b { display: block; font-weight: 600; font-size: 15px; }
.tl small { display: block; color: var(--t3); font-size: 13px; }
.side { display: grid; gap: 16px; align-content: start; }
.side .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color .15s var(--ease); }
.vid:hover { border-color: color-mix(in srgb, var(--t1) 24%, transparent); }
.vid .poster { position: relative; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; }
.vid .poster img { width: 100%; height: 100%; object-fit: cover; }
.vid b { display: block; font-weight: 600; font-size: 15px; }
.vid small { color: var(--t3); font-size: 13px; }
.vid .play { position: absolute; left: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(14,14,16,.72); display: grid; place-items: center; }
.vid .play svg { width: 12px; height: 12px; fill: #fff; margin-left: 2px; }

.more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mini { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.mini .num { font-size: 40px; }
.mini h3 { font-size: 18px; line-height: 1.35; font-weight: 600; }
.mini p { color: var(--t2); font-size: 14px; }

.method { counter-reset: m; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.method li { padding: 24px 20px 0 0; }
.method li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.method .num { font-size: 28px; color: var(--t3); display: block; margin-bottom: 12px; }
.method b { display: block; font-weight: 600; margin-bottom: 6px; }
.method p { color: var(--t2); font-size: 14px; }

.bring { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.bring ol { margin: 0; padding: 0; list-style: none; }
.bring li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--line); }
.bring li:first-child { border-top: 1px solid var(--line); }
.bring .num { font-size: 22px; color: var(--vault); }

@media (max-width: 900px) {
  .lhero { padding: 40px 0 56px; }
  .lhero .wrap, .story-card, .bring { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fan { height: 300px; max-width: 358px; }
  .fan .rcpt { width: 160px; }
  .fan .rcpt .cap .num { font-size: 22px; }
  .fan .rcpt .cap small { display: none; }
  .fan .f1 { left: 0; top: 36px; }
  .fan .f3 { right: 0; top: 48px; }
  .story-card { padding: 48px 0; }
  .story-card h3 { font-size: 22px; }
  .tl li { grid-template-columns: 88px minmax(0, 1fr); }
  .tl .num { font-size: 26px; }
  .more { grid-template-columns: minmax(0, 1fr); }
  .method { grid-template-columns: minmax(0, 1fr); }
  .method li, .method li + li { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .method .num { margin-bottom: 6px; }
  .vid { grid-template-columns: 88px minmax(0, 1fr); }
}

/* Phone layer (7 Nov 2026): nothing wider than the screen, links break instead of overflowing. */
html { overflow-x: clip; }
@media (max-width: 640px) { a { overflow-wrap: anywhere; } img, video { max-width: 100%; height: auto; } .wrap > span > a { display: inline-flex; align-items: center; min-height: 44px; } }