/* Version A (2026-10-21, Victor): version B with his changes. Loaded after v3b.css and only overrides it.
   (Second round, 21 October afternoon: the version before this one is now B, styled by v3b-21.css.)
   - Hero video: opens on its clean "Watch & Do" card for half a second, then fades softly into the video.
   - Hero: "Less reading, more doing." in the middle, one button.
   - The scroll story's pictures sit on the page with no panel and no frame around them.
   - "Watch the magic." in the middle; the scroll story is tighter: the picture sits on a soft panel, the kinds have a
     numbered rail, and each kind shows only its name, one line and its price.
   - The five "before" documents now look like five different things (an email, release notes, a social post, a help
     page in a browser, a ring-bound manual) instead of five grey pages.
   - Free first video: the offer itself is the heading. Prices: an opening offer line. */

/* hero video: the clean end card lies over the start and fades out (videos-fast.js, data-fade) */
.vcover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .7s ease; }
.vcover.gone { opacity: 0; }

/* scroll story: the pictures sit straight on the page. No panel behind them, no white card or edge around the video,
   no border around the documents; only a soft shadow under each video so it does not float. The phone keeps its
   dark body: that is the phone itself, not a frame. */
.ver-a .bstage .dots { margin-top: 34px; }
.ver-a .after:not(.phone) { padding: 0; background: none; box-shadow: none; }
.ver-a .after:not(.phone) video { border-radius: 14px; box-shadow: 0 34px 60px -34px rgba(30,34,140,.6); }
.ver-a .after .lbl { margin: 14px 2px 0; }
.ver-a .doc { border: 0 !important; background: none !important; box-shadow: none !important; }
.ver-a .d-mail .d-bar, .ver-a .d-help .d-url { margin: 0; border-radius: 10px; border-bottom: 0; }
.ver-a .d-manual .d-rings { border-right: 0; border-radius: 10px; }
/* more room (21 October afternoon): the picture is a little smaller, the numbered line sits out in the gutter between
   picture and words instead of against the words, and each kind gets more height, so one kind fills the screen at a time.
   Tried and not kept: picture above words (roomy, but the section got twice as long and lost the pinned picture). */
.ver-a .story-b { grid-template-columns: 1.08fr 1fr; gap: clamp(24px, 3vw, 48px); }
.ver-a .steps { position: relative; padding-left: clamp(84px, 8vw, 128px); counter-reset: k; }
.ver-a .steps::before { content: ""; position: absolute; left: 15px; top: 8vh; bottom: 16vh; width: 2px; border-radius: 2px; background: #dfe0f3; }
.ver-a .step { position: relative; min-height: 72vh; }
.ver-a .step:first-child { min-height: 60vh; padding-top: 4vh; }
.ver-a .step:last-child { min-height: 66vh; }
.ver-a .step::before { counter-increment: k; content: counter(k); position: absolute; left: calc(-1 * clamp(84px, 8vw, 128px)); top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid #dfe0f3;
  color: var(--muted); font-size: 13px; font-weight: 700; transition: background-color .3s, border-color .3s, color .3s; }
.ver-a .step:first-child::before { top: calc(4vh + 12px); transform: none; }
.ver-a .step.on::before { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 6px 16px -6px rgba(37,49,217,.7); }
.ver-a .step .tag { font-size: 14px; }
.ver-a .step h3 { font-size: clamp(30px, 3vw, 46px); max-width: 13em; }
.ver-a .step .price { margin-top: 22px; }

/* free first video: the offer is the heading */
.ver-a .how-card h2 { font-size: clamp(30px, 3.2vw, 44px); }

/* prices: opening offer */
.ver-a .offer { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 14px 8px 8px; border-radius: 99px;
  background: #eef0ff; border: 1px solid #dfe2ff; color: var(--ink); font-size: 15px; }
.ver-a .offer b { padding: 4px 10px; border-radius: 99px; background: var(--blue); color: #fff; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- five different "before" documents ---------- */
.ver-a .doc { padding: 16px 16px 18px; }
.ver-a .doc > .lbl { margin-bottom: 10px; }
.ver-a .doc i { height: 6px; margin-top: 7px; }

/* 1. sales email: a mail window */
.d-mail { padding-top: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; }
.d-mail > .lbl { margin-top: 12px; }
.d-mail .d-bar { display: flex; align-items: center; gap: 5px; margin: 0 -16px; padding: 9px 12px; background: #dde3ff; border-bottom: 1px solid #cfd6fb; order: -1; }
.d-mail { display: flex; flex-direction: column; }
.d-mail .d-bar span { width: 8px; height: 8px; border-radius: 50%; background: #c3c9ee; }
.d-mail .d-bar b { margin-left: 8px; font-size: 11px; color: #4a52a8; font-weight: 700; }
.d-mail .d-f { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.d-mail .d-f em { flex: none; width: 46px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted); }
.d-mail .d-f i { margin: 0; }
.d-mail .d-body { padding-top: 4px; }
.d-mail .d-sig { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.d-mail .d-sig u { width: 22px; height: 22px; border-radius: 50%; background: #c9cbe6; }
.d-mail .d-sig i { margin: 0; }
.d-mail .d-att { align-self: flex-start; margin-top: 12px; padding: 4px 8px 4px 22px; position: relative; border-radius: 6px; border: 1px solid var(--line);
  background: #fafaff; font-size: 10px; font-weight: 700; color: #a3362c; }
.d-mail .d-att::before { content: ""; position: absolute; left: 7px; top: 4px; width: 9px; height: 11px; border-radius: 2px; background: #d9534a; }

/* 2. release notes: a version badge and coloured change tags */
.d-notes { -webkit-mask-image: none !important; mask-image: none !important; background: linear-gradient(#fff, #fbfffc) !important; }
.d-notes .d-ver { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.d-notes .d-ver b { padding: 3px 8px; border-radius: 6px; background: #13795b; color: #fff; font-size: 11px; }
.d-notes .d-ver i { margin: 0; }
.d-notes .d-li { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.d-notes .d-li i { flex: 1; margin: 0; }
.d-notes .t { flex: none; width: 58px; padding: 2px 0; border-radius: 5px; text-align: center; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.d-notes .t.n { background: #dcf5ea; color: #13795b; }
.d-notes .t.f { background: #fff1d6; color: #9a6200; }
.d-notes .t.m { background: #e6e9ff; color: #3640b8; }

/* 3. text post: a social media post */
.d-post { border-radius: 18px !important; -webkit-mask-image: none !important; mask-image: none !important; }
.d-post .d-who { display: flex; align-items: center; gap: 10px; }
.d-post .av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff8a5c, #c13bd6); }
.d-post .d-who div { flex: 1; } .d-post .d-who i:first-child { margin-top: 0; } .d-post .d-who i:last-child { background: #eef0f6; }
.d-post .d-body { margin-top: 6px; }
.d-post .d-img { height: 70px; margin-top: 10px; border-radius: 10px; background: linear-gradient(135deg, #ffd9c7, #e8d4ff 60%, #cfe0ff); }
.d-post .d-acts { display: flex; gap: 16px; margin-top: 10px; font-size: 11px; color: var(--muted); font-weight: 600; }

/* 4. help article: a help page in a browser */
.d-help { padding-top: 0 !important; display: flex; flex-direction: column; background: #fff !important; -webkit-mask-image: none !important; mask-image: none !important; }
.d-help > .lbl { margin-top: 12px; }
.d-help .d-url { order: -1; margin: 0 -16px; padding: 8px 12px; background: #e8e9f2; border-bottom: 1px solid #d9dbea; }
.d-help .d-url i { margin: 0; height: 12px; border-radius: 99px; background: #fff; border: 1px solid var(--line); }
.d-help .d-search { position: relative; margin-top: 2px; background: #f7f8fd; padding: 6px 8px 6px 26px; border-radius: 8px; border: 1px solid var(--line); }
.d-help .d-search::before { content: ""; position: absolute; left: 9px; top: 7px; width: 7px; height: 7px; border: 2px solid #9aa0d6; border-radius: 50%; }
.d-help .d-search i { margin: 0; }
.d-help .title { width: 74% !important; background: #b9bde6 !important; }
.d-help .d-step { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.d-help .d-step span { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff4cc; color: #8a6400; font-size: 10px; font-weight: 800; }
.d-help .d-step i { flex: 1; margin: 0; }
.d-help .d-shot { height: 46px; margin-top: 10px; border-radius: 8px; border: 1px solid var(--line);
  background: linear-gradient(90deg, #eef0fb 0 22%, #fff 22%) ; }

/* 5. training manual: ring-bound pages */
.d-manual { display: grid !important; grid-template-columns: 22px 1fr; padding: 0 !important; background: #fffdf7 !important; -webkit-mask-image: none !important; mask-image: none !important;
  box-shadow: 7px 7px 0 -1px #fffdf7, 7px 7px 0 0 #eadfca, 14px 14px 0 -1px #fffdf7, 14px 14px 0 0 #eadfca; border-color: #eadfca !important; }
.d-manual > .lbl { grid-column: 1 / -1; margin: 14px 16px 0; }
.d-manual .d-rings { grid-row: 2; display: flex; flex-direction: column; justify-content: space-around; align-items: center; background: #f4ecdc; border-right: 1px solid #eadfca; padding: 10px 0; }
.d-manual .d-rings i { width: 10px; height: 10px; margin: 0; border-radius: 50%; background: #fff; border: 2px solid #c9b48c; }
.d-manual .d-page { grid-row: 2; padding: 6px 16px 14px; }
.d-manual .d-ch { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9a6a1a; }
.d-manual .title { background: #d9cbb0 !important; }
.d-manual .d-toc { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.d-manual .d-toc i { margin: 0; background: #ece4d4; }
.d-manual .d-toc::after { content: ""; flex: 1; order: 1; border-bottom: 2px dotted #e0d4bc; }
.d-manual .d-toc span { order: 2; font-size: 10px; font-weight: 700; color: #9a8a6a; }
.d-manual .d-pg { margin-top: 12px; text-align: center; font-size: 10px; color: #b3a385; }

@media (max-width: 900px) {
  .ver-a .story-b { grid-template-columns: 1fr; }
  .ver-a .steps { padding-left: 0; }
  .ver-a .steps::before, .ver-a .step::before { display: none; }
  .ver-a .m-pair .after { position: relative; }
  /* phone: the document above, the arrow pointing down, the video at full width below (side by side squeezed both) */
  .ver-a .m-pair .pair { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
  .ver-a .m-pair .doc { width: min(78%, 300px); max-height: 150px; }
  .ver-a .m-pair .parr { justify-self: center; transform: rotate(90deg); width: 40px; height: 40px; }
  .ver-a .m-pair .after:not(.phone) { justify-self: stretch; transform: none; }
  .ver-a .m-pair .after.phone { justify-self: center; width: min(210px, 62%); margin-bottom: 30px; transform: none; }
  .ver-a .step, .ver-a .step:first-child, .ver-a .step:last-child { padding-bottom: 84px; }
}