/* DUKE home page, "one offer per screen" (Bobby's option C, 2026-10-20). Loaded ONLY by the home page (index.html).
   Every rule starts with .ho-body (the home <body> class), so no other page can be touched. White page, black text, no offset shadows:
   frames and cards use the live site's own look (1px line border, 14px radius, the navy skewed chip like .kicker). */
.ho-body .ho-screen { display: flex; align-items: center; border-bottom: 1px solid var(--line); padding: 56px 0; background: #fff; } /* Oct 20: no full-screen height, Bobby: desktop too spread out */
.ho-body .ho-screen--short { padding: 44px 0; }
.ho-body .ho-screen-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; width: 100%; }
.ho-body .ho-screen--flip .ho-screen-in { grid-template-columns: .9fr 1.1fr; }
.ho-body .ho-screen--flip .ho-vis { order: 2; }
.ho-body .ho-vis { position: relative; margin-bottom: 26px; }
.ho-body .ho-frame { display: block; position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--accent-soft); }
.ho-body .ho-frame video, .ho-body .ho-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ho-body .ho-vis--v { width: min(300px, 100%); margin: 0 auto 26px; }
.ho-body .ho-vis--v .ho-frame { aspect-ratio: 9 / 16; }
@media (min-width: 901px) { .ho-body .ho-vis--v .ho-frame { max-height: 440px; width: auto; margin: 0 auto; } } /* Oct 20: tall captions clip made its section too tall on desktop */
.ho-body .ho-box { position: absolute; left: -12px; bottom: -26px; width: 30%; max-width: 190px; height: auto; filter: drop-shadow(0 14px 18px rgba(17, 17, 17, .28)); z-index: 2; }
.ho-body .ho-vis--v .ho-box { left: -44px; width: 42%; }
.ho-body .ho-chip { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 6px 14px; transform: skewX(-12deg); margin-bottom: 14px; }
.ho-body .ho-screen h1 { font-size: clamp(30px, 4.6vw, 52px); }
.ho-body .ho-screen h1 em { font-style: normal; color: var(--red); }
.ho-body .ho-screen h2 { font-size: clamp(30px, 4.2vw, 48px); }
.ho-body .ho-price { margin-top: 12px; font-size: 30px; font-weight: 900; line-height: 1.2; }
.ho-body .ho-was { color: var(--mute); text-decoration: line-through; text-decoration-thickness: 2px; font-size: 17px; font-weight: 800; margin-left: 4px; }
.ho-body .ho-price .prem-tag { margin-left: 8px; vertical-align: middle; }
.ho-body .ho-line { margin-top: 12px; font-size: 18px; color: #2a2f36; max-width: 28em; }
.ho-body .ho-sub { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--mute); }
.ho-body .ho-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.ho-body .ho-cta .btn { font-size: 17px; padding: 16px 30px; min-height: 54px; }
.ho-body .ho-link { font-weight: 800; font-size: 15px; color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--red); }
.ho-body .ho-link:hover { color: var(--red); }
.ho-body .ho-more-h { font-size: clamp(28px, 3.6vw, 40px); margin-top: 4px; }
.ho-body .ho-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.ho-body .ho-tile { text-decoration: none; padding: 12px 12px 16px; min-height: 100%; }
.ho-body .ho-tile:hover .ho-tile-name { color: var(--red); }
.ho-body .ho-tile-img { height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.ho-body .ho-tile-img img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(17, 17, 17, .25)); }
.ho-body .ho-tile-img--studio img { border-radius: 10px; border: 2px solid #111; }
.ho-body .ho-tile-name { display: block; font-weight: 900; font-size: 16px; line-height: 1.2; }
.ho-body .ho-tile-sub { display: block; font-size: 13.5px; font-weight: 600; color: #3a4048; margin-top: 3px; line-height: 1.35; }
.ho-body .ho-free-band { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.ho-body .ho-free-band img { height: 220px; width: auto; filter: drop-shadow(0 12px 14px rgba(17, 17, 17, .25)); }
.ho-body .ho-anchor { display: block; height: 0; }
@media (min-width: 901px) { .ho-body .ho-grid4:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 3 tiles (staging with Studio): no empty 4th slot */
@media (min-width: 901px) { .ho-body .ho-grid4:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 2 tiles (live, Premiere Pro has its own section): fill the row evenly */
@media (max-width: 900px) {
  .ho-body .ho-screen-in, .ho-body .ho-screen--flip .ho-screen-in { grid-template-columns: 1fr; gap: 20px; }
  .ho-body .ho-screen--flip .ho-vis { order: 0; }
  .ho-body .ho-grid4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ho-body .ho-screen { padding: 22px 0 30px; }
  .ho-body .ho-screen-in { text-align: center; }
  .ho-body .ho-line, .ho-body .ho-sub { margin-left: auto; margin-right: auto; }
  .ho-body .ho-cta { justify-content: center; }
  .ho-body .ho-cta .btn-note, .ho-body .ho-cta > .btn { width: 100%; }
  .ho-body .ho-cta .btn-note .btn { width: 100%; }
  .ho-body .ho-screen h1 { font-size: 29px; }
  .ho-body .ho-screen h2 { font-size: 32px; }
  .ho-body .ho-box { width: 26%; left: 0; }
  .ho-body .ho-vis--v { width: min(220px, 100%); }
  .ho-body .ho-vis--v .ho-box { left: -30px; width: 40%; }
  .ho-body .ho-free-band { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 16px; }
  .ho-body .ho-free-band img { height: 150px; }
  .ho-body .ho-grid4 { gap: 12px; }
  .ho-body .ho-tile-img { height: 78px; }
}

.ho-body .ho-brand { text-align: center; } .ho-body .ho-brand p { margin: 8px auto 18px; max-width: 560px; } /* Oct 20: brand video section */

/* Oct 20 (Bobby): the home page gets the pack-page texture on every other screen so each part stands out:
   strict alternation by order: Master Bundle, Transitions, Captions, More textured; brand video, Drop-Ins, Premiere, Free Starter white. Same tokens as .pack-hero / .section--tint. */
.ho-body .ho-screen:is(#master-bundle, #transitions, #captions, #more) { position: relative; isolation: isolate; background: var(--grain), linear-gradient(180deg, var(--sky) 0%, #f7faff 60%, #ffffff 100%); }
.ho-body .ho-screen:is(#master-bundle, #transitions, #captions, #more)::before { content: ""; position: absolute; top: 0; right: 0; width: 46%; height: 100%; background: var(--lines), linear-gradient(135deg, rgba(234, 242, 255, .9) 0%, rgba(234, 242, 255, .2) 100%); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); z-index: -1; pointer-events: none; }
@media (max-width: 900px) { .ho-body .ho-screen:is(#master-bundle, #transitions, #captions, #more)::before { width: 100%; opacity: .55; } }
/* 2026-10-20 night: free bar above the Master Bundle (first thing ManyChat "comment FREE" visitors see) */
.ho-body .ho-freebar { background: #fff; border-bottom: 3px solid var(--red); }
.ho-body .ho-freebar-in { display: flex; align-items: center; gap: 14px 18px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; justify-content: center; }
.ho-body .ho-freebar img { height: 64px; width: auto; filter: drop-shadow(0 6px 8px rgba(17, 17, 17, .22)); }
.ho-body .ho-freebar p { margin: 0; font-size: 17px; color: var(--ink); }
.ho-body .ho-freebar .btn { font-size: 16px; padding: 12px 24px; min-height: 48px; }
@media (max-width: 760px) {
  .ho-body .ho-freebar-in { display: grid; grid-template-columns: auto 1fr; text-align: left; gap: 10px 14px; }
  .ho-body .ho-freebar img { height: 58px; grid-row: span 1; }
  .ho-body .ho-freebar p { font-size: 15px; line-height: 1.35; }
  .ho-body .ho-freebar .btn { grid-column: 1 / -1; width: 100%; }
  .ho-body .ho-freebar .ho-link { grid-column: 1 / -1; justify-self: center; font-size: 14px; }
}
/* Premiere Pro Master Bundle card inside the Premiere Pro screen (2026-10-21). Scoped to .ho-body like every rule above. */
.ho-body .ho-pbundle { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; margin-top: 22px; padding: 14px 16px; border: 2px solid var(--red); border-radius: 14px; background: #fff; text-align: left; }
.ho-body .ho-pbundle-art img { display: block; width: 84px; height: auto; }
.ho-body .ho-pbundle-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ho-body .ho-pbundle-name { font-size: 18px; font-weight: 900; line-height: 1.2; }
.ho-body .ho-pbundle-line { font-size: 14px; font-weight: 700; color: var(--mute); }
.ho-body .ho-pbundle-price .ho-now { font-size: 24px; font-weight: 900; }
.ho-body .ho-pbundle-price .prem-tag { margin-left: 6px; vertical-align: middle; }
.ho-body .ho-pbundle-cta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 6px; }
@media (max-width: 640px) {
  .ho-body .ho-pbundle { grid-template-columns: 64px 1fr; gap: 12px; padding: 12px; }
  .ho-body .ho-pbundle-art img { width: 64px; }
  .ho-body .ho-pbundle-cta .btn-note, .ho-body .ho-pbundle-cta .btn-note .btn { width: 100%; }
}