/* Videos pages and request pages for A1 and A2 (2026-10-21). Same colours as the site; loaded after v3b.css. */
.sub main { min-height: calc(100vh - 140px); }
.vpage, .req { padding: clamp(36px, 6vw, 90px) var(--side) clamp(60px, 8vw, 120px); background: rgba(248,248,255,.86);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border-top: 1px solid #fff;
  border-radius: clamp(22px, 3vw, 44px) clamp(22px, 3vw, 44px) 0 0; margin-top: clamp(16px, 3vw, 40px); }
.vhead { text-align: center; margin-bottom: clamp(30px, 5vw, 64px); }
.vhead h1, .req h1 { color: var(--ink); font-size: clamp(34px, 5vw, 64px); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; }
.vhead p { margin-top: 12px; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); }
.tag { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.vapp { margin-top: 10px; color: var(--muted); font-size: 14px; }
.vprice { margin-top: 18px; color: var(--blue); font-weight: 700; font-size: 18px; }
.sub video { display: block; width: 100%; background: #0d0f1a; }

/* A1: one big video per row */
.v1 .vrow { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(18px, 2vw, 26px);
  margin: 0 auto clamp(28px, 4vw, 48px); max-width: 1320px; border-radius: 28px; background: rgba(255,255,255,.8); border: 1px solid rgba(37,49,217,.08);
  box-shadow: 0 30px 70px -50px rgba(30,34,140,.5); scroll-margin-top: 90px; transition: box-shadow .4s, transform .4s; }
.v1 .vrow.lit { box-shadow: 0 0 0 3px var(--blue), 0 30px 70px -50px rgba(30,34,140,.5); }
.v1 .vbox video { aspect-ratio: 16 / 9; border-radius: 16px; }
.v1 .vbox.phone { justify-self: center; width: min(330px, 100%); padding: 8px; border-radius: 38px; background: #111; }
.v1 .vbox.phone video { aspect-ratio: 9 / 16; border-radius: 30px; }
.v1 .vtext h2 { margin-top: 10px; color: var(--ink); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; }
.v1 .vtext > p:not(.tag):not(.vapp):not(.vprice) { margin-top: 10px; color: var(--muted); font-size: 17px; }
.v1 .vtext .btn { margin-top: 18px; }

/* A2: one big player and the list of five beside it */
.theatre { display: grid; grid-template-columns: 1fr 290px; gap: clamp(18px, 2.4vw, 32px); max-width: 1380px; margin: 0 auto; scroll-margin-top: 80px; }
.tplayer { padding: clamp(14px, 1.6vw, 20px); border-radius: 28px; background: rgba(255,255,255,.85); border: 1px solid rgba(37,49,217,.08); box-shadow: 0 30px 70px -50px rgba(30,34,140,.5); }
.tscreen { border-radius: 16px; overflow: hidden; background: #0d0f1a; }
.tscreen video { aspect-ratio: 16 / 9; }
/* Social Short (2026-10-22): no dark sides; it stands on the player's light card like the others. The video is cropped
   only 60 px each side (the file is 1080 wide): the phone sits between x 164 and 916, but the captions run from x 88 to
   990, so a tighter crop would cut words off.
   Browsers without object-view-box (Safari, Firefox) show the whole frame, whose sides are light grey, not dark.
   When the new Social Short arrives (app screen only, captions on it), show it in A1's phone frame instead. */
.tscreen.phone { --ph: min(72vh, 640px); background: none; border-radius: 0; }
.tscreen.phone video { width: auto; height: var(--ph); aspect-ratio: 9 / 16; margin: 0 auto; background: #111; border: 6px solid #111; border-radius: 34px;
  box-shadow: 0 30px 60px -36px rgba(30,34,140,.6); }
/* the Social Short fills the card: phone on the left, its text beside it, centred (2026-10-22) */
.tplayer.is-phone { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding-left: clamp(20px, 3vw, 44px); }
.tplayer.is-phone .tinfo { grid-template-columns: 1fr; padding: 0 10px 0 0; }
.tplayer.is-phone .tbuy { align-items: flex-start; text-align: left; margin-top: 8px; }
@supports (object-view-box: inset(0 5.5% 0 5.5%)) {
  .tscreen.phone video { aspect-ratio: 960 / 1920; object-view-box: inset(0 5.56% 0 5.56%); }
}
/* the text under the video (2026-10-22): label, heading and one line on the left, the sample line smaller and lighter
   under them; price with the button under it on the right; more room above, less between the lines */
.tinfo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px clamp(24px, 4vw, 56px); padding: clamp(24px, 2.6vw, 34px) 10px 8px; }
.tinfo .tag { font-size: 12px; }
.tinfo h2 { margin-top: 4px; color: var(--ink); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
.tinfo #t-line { margin-top: 4px; color: var(--muted); font-size: 17px; line-height: 1.45; }
.tinfo .vapp { margin-top: 10px; color: #9a9fc2; font-size: 13px; }
.tbuy { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.tbuy .vprice { margin: 0; max-width: 17em; font-size: 17px; line-height: 1.3; }
.tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.vpick { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 16px; text-decoration: none;
  background: rgba(255,255,255,.7); border: 1px solid rgba(37,49,217,.08); transition: background-color .2s, box-shadow .2s, transform .2s; }
.vpick:hover { background: #fff; transform: translateX(-3px); }
.vpick[aria-current="true"] { background: #fff; box-shadow: 0 0 0 2px var(--blue), 0 16px 30px -22px rgba(30,34,140,.6); }
.vpick img { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; background: #eef0fb; }
.vpick b { display: block; color: var(--ink); font-size: 15px; } .vpick small { color: var(--muted); font-size: 12.5px; }
.vpick br.m { display: none; }   /* the two-part price breaks after the comma on phones only */

/* request pages */
.req-card { padding: clamp(24px, 3vw, 44px); border-radius: 28px; background: #fff; border: 1px solid rgba(37,49,217,.08); box-shadow: 0 40px 80px -50px rgba(30,34,140,.55); }
.req .small { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.req h1 { margin-top: 8px; font-size: clamp(30px, 4vw, 52px); }
.req-sub { margin-top: 12px; color: var(--muted); font-size: 17px; }
.req-form { display: grid; gap: 8px; margin-top: 18px; }
.req-l { margin-top: 14px; color: var(--ink); font-weight: 700; font-size: 15px; }
.req select, .req input, .req textarea { width: 100%; font: inherit; font-size: 16px; padding: 13px 14px; border-radius: 12px; border: 1px solid #d6d8ee; background: #fbfbff; color: var(--ink); }
.req select:focus, .req input:focus, .req textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.req-links { display: grid; gap: 8px; }
.req-link { display: flex; gap: 8px; }
.req-del { flex: none; width: 46px; border-radius: 12px; border: 1px solid #d6d8ee; background: #fff; color: var(--muted); font-size: 22px; cursor: pointer; }
.req-add { justify-self: start; padding: 6px 2px; border: 0; background: none; color: var(--blue); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.req-msg { min-height: 1.4em; color: #b3261e; font-size: 14px; }
/* 2026-10-22: a link OR files is enough; the demo account is optional */
.req-hint { margin-top: -4px; color: var(--muted); font-size: 14px; }
.req textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.req-under { margin-top: 0; font-size: 13px; }   /* small text under the "What should the video show?" box */
.req-sl { margin-top: 8px; color: var(--ink); font-weight: 600; font-size: 15px; }
.req-or { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.req-or::before, .req-or::after { content: ""; flex: 1; height: 1px; background: #e1e3f3; }
.req-drop { position: relative; display: grid; gap: 4px; place-items: center; text-align: center; padding: 20px 16px; border: 1.5px dashed #c5c9ee; border-radius: 14px;
  background: #fbfbff; color: var(--muted); font-size: 15px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.req-drop:hover, .req-drop.over { border-color: var(--blue); background: #f4f5ff; }
.req-drop:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; }
.req-drop b { color: var(--blue); }
.req-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.req-drop-n { color: var(--ink); font-size: 14px; word-break: break-word; }
.req-drop.has { border-style: solid; border-color: var(--blue); }
.req-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #f1f2ff; color: var(--text); font-size: 15px; cursor: pointer; }
.req-check input { flex: none; width: 18px; height: 18px; padding: 0; margin-top: 2px; accent-color: var(--blue); }
.req-form .btn { justify-self: start; margin-top: 4px; }
.req-note { display: flex; gap: 12px; margin-top: 24px; padding: 14px 16px; border-radius: 14px; background: #f1f2ff; color: var(--text); font-size: 15px; }
.req-note span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 13px; font-style: italic; }
.req-done { text-align: center; padding: 20px 0; outline: none; }
.req-tick { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 28px; }
.req-done h2 { margin-top: 14px; color: var(--ink); font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.req-done p { margin: 10px auto 0; max-width: 32em; color: var(--muted); } .req-done b { color: var(--ink); }
.req-back { display: inline-block; margin-top: 18px; color: var(--blue); font-weight: 700; }
.req1 .req-card { max-width: 640px; margin: 0 auto; }
.req2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 80px); align-items: start; max-width: 1240px; margin-left: auto; margin-right: auto; }
.req2 .req-steps { list-style: none; counter-reset: s; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.req2 .req-steps li { counter-increment: s; position: relative; padding: 16px 18px 16px 62px; border-radius: 16px; background: rgba(255,255,255,.75); border: 1px solid rgba(37,49,217,.08); color: var(--muted); }
.req2 .req-steps li::before { content: "0" counter(s); position: absolute; left: 18px; top: 15px; color: var(--blue); font-weight: 700; font-size: 18px; }
.req2 .req-steps b { color: var(--ink); } .req2 .req-steps li > b:first-child { display: block; }
.req2 .req-form { margin-top: 0; } .req2 .req-form .req-l:first-of-type { margin-top: 0; }

@media (max-width: 900px) {
  .v1 .vrow, .theatre, .req2 { grid-template-columns: 1fr; }
  .tlist { grid-template-columns: 1fr; }   /* one full-width column on phones, so the prices wrap cleanly (2026-10-22) */
  .vpick br.m { display: inline; }
  .tscreen.phone { --ph: min(64vh, 560px); }
  .tplayer.is-phone { display: block; padding-left: clamp(14px, 1.6vw, 20px); }
  .tplayer.is-phone .tinfo { padding: 20px 10px 8px; }
  .tinfo { grid-template-columns: 1fr; padding-top: 20px; }
  .tbuy { align-items: flex-start; text-align: left; }
}
.req-form[hidden], .req-done[hidden] { display: none; }