/* White website, with the film's gold kept inside its editorial card. */
.hero { grid-template-columns: 1.08fr 1fr; align-items: center; gap: 52px; }
.brand-film { min-width: 0; border: 1px solid #e7dfcc; border-radius: 24px; background: #fff; overflow: hidden; box-shadow: 0 20px 64px #2722190d; scroll-margin-top: 12px; }
.film-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; background: #fbf9f3; color: #725119; font-size: 12px; }
.film-label { display: inline-flex; gap: 10px; align-items: center; font-weight: 650; }
.film-duration { font-variant-numeric: tabular-nums; color: #6e6e73; letter-spacing: 1px; }
.brand-film video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #14140f; object-fit: contain; }
.film-content { padding: 24px; }
.film-kicker { font-size: 12px; color: #795718; margin-bottom: 7px; letter-spacing: 1px; }
.film-content h2 { font-size: 25px; margin-bottom: 10px; }
.film-content > p:not(.film-kicker) { font-size: 14px; color: var(--muted); }
.film-offer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--line); padding-top: 15px; font-size: 12px; color: var(--muted); }
.film-offer b { color: var(--ink); font-size: 26px; letter-spacing: -1px; margin-right: 6px; }
.film-offer .text-link { font-size: 13px; }
.film-transcript { font-size: 12px; color: var(--muted); margin-top: 16px; }
.film-transcript summary { cursor: pointer; width: fit-content; padding-block: 5px; }
.film-transcript p { margin: 12px 0 0; line-height: 1.85; }
.resume-intro { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.resume-intro .section-heading { margin-bottom: 0; }
.resume-intro .section-heading > p:last-child { margin-bottom: 0; max-width: 590px; }
.resume-film-link { display: inline-flex; gap: 10px; align-items: center; flex-shrink: 0; border: 1px solid #e7dfcc; padding: 11px 18px; border-radius: 999px; font-size: 13px; color: #725119; background: #fbf9f3; }
.resume-film-link:hover { background: #f5eedc; }
.resume-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; list-style: none; margin: 30px 0; padding: 22px 0; border-block: 1px solid var(--line); }
.resume-steps li { display: flex; align-items: center; gap: 14px; min-width: 0; }
.resume-steps li > span { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; background: var(--tint); color: var(--green); border-radius: 50%; font-size: 12px; }
.resume-steps strong { display: block; font-size: 15px; font-weight: 600; }
.resume-steps small { display: block; font-size: 12px; color: var(--muted); }
.self-resume-layout { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
.self-resume-form { padding: 28px; }
.resume-form-heading h3 { font-size: 21px; margin-bottom: 6px; }
.self-resume-upload { background: #f8faff; padding: 20px; }
.resume-optional { padding: 15px 0; border-block: 1px solid var(--line); }
.resume-optional summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.resume-optional summary span { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 8px; }
.resume-optional-fields { display: grid; gap: 18px; padding-top: 20px; }
.self-resume-result { background: #fffefa; border-color: #e7dfcc; padding: 28px; }
.self-resume-result > .tag { color: #725119; background: #f7efd9; }
.resume-benefits { list-style: none; padding: 0; counter-reset: benefit; }
.resume-benefits li { position: relative; counter-increment: benefit; padding: 0 0 18px 37px; margin: 0 0 18px; border-bottom: 1px solid #ebe6da; }
.resume-benefits li::before { content: "0" counter(benefit); position: absolute; left: 0; top: 2px; color: #806124; font-size: 12px; }
.resume-benefits li:last-child { margin-bottom: 0; }
@media (max-width:960px) { .hero { gap: 28px; }.film-content h2 {font-size:22px;} }
@media (max-width:800px) { .self-resume-layout { grid-template-columns:1fr; }.resume-intro { align-items:flex-start; flex-direction:column; gap:18px; } }
@media (max-width:650px) {
  .hero { grid-template-columns: 1fr; gap: 30px; }
  .brand-film { border-radius: 18px; }
  .film-heading { padding: 13px 18px; font-size: 11px; }
  .film-content { padding: 20px; }
  .film-content h2 { font-size: 23px; }
  .resume-intro h2 { font-size: 27px; }
  .resume-steps { gap: 12px; margin: 24px 0; padding: 20px 0; }
  .resume-steps li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .resume-steps strong { font-size: 14px; }
  .resume-steps small { font-size: 11px; }
  .self-resume-form,.self-resume-result { padding: 20px; }
  .self-resume-upload { padding: 14px; }
}
@media print { .brand-film,.resume-film-link { display:none; } }

.film-playback { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 22px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }
.film-playback button { border:1px solid #d8cba9; border-radius:999px; background:#fbf9f3; color:#725119; padding:8px 16px; min-height:40px; font-size:13px; font-weight:600; }
.film-playback button:hover { background:#f5eedc; }
@media (max-width:650px) { .brand-film { order:-1; }.film-playback {padding:10px 18px;} }