/* VitaCoreX v7 "Assembly" — lab layer on top of v6 (owner review only; not linked from the site).
   The page shows its construction once (~2 s): column guides → H1 lines rise onto their baselines → "in order" settles →
   the window is cut on the 17:22 slope → the guides become the price bar. After that nothing moves except what the visitor drives.
   Rules kept: no numbering, no drawn documents, no circles, cool palette + the one red accent, readability first. */

.vx7 { --vx7-guide: rgb(124 210 222 / .16); --vx7-hair: 1px; --vx7-teal: #2BB3C0; }

/* 0. Ruler fixes the guides would otherwise expose */
.vx7 .vx6-hero__h1 { margin-left: -.035em; }                       /* serif side bearing: the H1 stem sits on the lead's left edge */
@media (min-width: 48em) {
  .vx7 .vx6-ticker { column-gap: 32px; }                          /* cells span 3 columns each: labels and prices start on column lines */
  .vx7 .vx6-ticker li { position: relative; }
  .vx7 .vx6-ticker li + li { border-left: 0; }
  .vx7 .vx6-ticker li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: -16px; width: 1px; background: rgb(255 255 255 / .12); }
  .vx7 .vx6-ticker a { padding-left: 0 !important; padding-right: 16px; }
  .vx7 .vx6-ticker a:hover { background: none; }
}

/* 1. H1 assembly (JS wraps each set line; the visual copy is aria-hidden, a full copy stays for screen readers) */
.vx7-ln { display: block; position: relative; }
.vx7-ln__in { display: inline-block; position: relative; }
.vx7-w { display: inline-block; }
.vx7-stop { display: inline-block; margin-left: -.07em; }   /* optical kerning: a roman full stop after an italic r */
.vx7-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.vx7-rule { position: absolute; left: 0; height: 1px; background: rgb(255 255 255 / .28); transform-origin: left center; pointer-events: none; }
/* at rest (no intro, or after it) only the rule under the last line stays, faint; the intro animates them all */
.vx7-rule { opacity: 0; }
.vx7-ln:last-child .vx7-rule { opacity: .43; }
html.vx7-intro .vx7-ln { clip-path: inset(-.3em -.7em -.34em -.14em); }
/* before the script has wrapped the lines, the H1 waits (first visit only; a CSS failsafe reveals it after 2.4 s) */
html.vx7-intro:not(.vx7-run) .vx6-hero__h1 { opacity: 0; animation: vx7Failsafe 0s 2.4s forwards; }
@keyframes vx7Failsafe { to { opacity: 1; } }

/* 2. Column guides: the 12 columns drop from the header rule, then hand over to the price-bar dividers */
.vx7-guides { position: absolute; left: 0; right: 0; top: var(--vx7-gtop, 0px); height: var(--vx7-gh, 0px); z-index: 0; pointer-events: none; opacity: 0; }
.vx7-guides .vx-wrap { height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
.vx7-guides i { display: block; height: 100%; border-inline: var(--vx7-hair) solid var(--vx7-guide); transform-origin: top; }
html.vx7-intro .vx7-guides { opacity: 1; }
@media (max-width: 47.99em) { .vx7-guides .vx-wrap { grid-template-columns: 1fr; } .vx7-guides i:not(:first-child) { display: none; } }

/* 3. The window cut on the 17:22 slope, corners on columns 7 and 12, standing on the price bar (≥ 1280 px) */
.vx7 .vx6-hero__window { display: none !important; }
.vx7-veil { position: absolute; inset: 0; background: rgb(7 27 35 / .38); pointer-events: none; }
.vx7-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vx7-lines path { fill: none; vector-effect: non-scaling-stroke; }
.vx7-lines .s { stroke: rgb(124 210 222 / .9); stroke-width: 1; }
.vx7-lines .h { stroke: rgb(255 255 255 / .3); stroke-width: 1; }
/* below 1280 the v6 rule already darkens the whole frame (§27): no second veil, no window */
.vx7-veil.is-full { display: none; }
@media (max-width: 68.74em) { .vx7-veil, .vx7-lines { display: none; } }

/* 4. (removed 2026-10-15: the ruler ticks on the price bar read as a stray grid under the video; the bar keeps its single hairline) */

/* 5. Smart alignment guides on the price list: the shared price edge and the action edge, proven to the pixel */
.vx7-align { position: absolute; top: 0; width: 1px; background: rgb(43 179 192 / .55); transform-origin: top; opacity: 0; pointer-events: none; z-index: 3; transition: opacity .16s ease; }
.vx7-align.is-hint { opacity: 1; }
@media (max-width: 63.99em) { .vx7-align { display: none; } }

/* 6. Focus registration marks (one floating frame, so buttons keep their own ::before / ::after) and brand selection colours */
.vx7-focus { position: fixed; z-index: 2147483000; pointer-events: none; opacity: 0; --c: #0F6E79; --l: 8px; --t: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--l) no-repeat;
  transition: opacity .12s ease; }
.vx7-focus.is-on { opacity: 1; }
.vx7-focus.is-dark { --c: #7CD2DE; }
.vx7 ::selection { background: #CDEFF3; color: #0A2530; }
.vx7 :is(.vx-hdr, .vx-ftr, .vx6-hero, .vx-band, .vx-mega, .vx-drawer, .vx5-ix--b2b, .vx-phero) ::selection { background: #2BB3C0; color: #071B23; }
.vx7 .vx6-hero__h1 em ::selection, .vx7 .vx6-hero__h1 em::selection { background: #FF4D4D; color: #071B23; }
.vx7 .vx-skip:focus-visible { outline: 2px solid #7CD2DE; outline-offset: 3px; }

/* 7. Live Tampa line in the credential row */
.vx7 .vx6-hero__cred { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 47.99em) { .vx7-clock { display: none; } .vx7 .vx6-ticker a { justify-content: flex-start; } }
.vx7-clock { margin-left: -6px; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }

/* 8. Footer title block: the last footer row as a ruled table on the 12 columns (true values only) */
.vx7-title { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; margin-top: 28px; border-top: 1px solid rgb(255 255 255 / .14); }
.vx7-title > div { display: grid; align-content: start; gap: 4px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
.vx7-title dt { color: #9FB7BE; font: 500 12px/16px var(--vx-sans); letter-spacing: .02em; }
.vx7-title dd { margin: 0; color: #fff; font: 500 14px/20px var(--vx-sans); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 47.99em) { .vx7-title { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } }

/* 9. Lab-only replay control */
.vx7 .vx-preview-ribbon { display: none !important; }   /* the lab page is plainly not production */
.vx7-replay { position: fixed; left: 12px; top: 80px; z-index: 140; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid rgb(124 210 222 / .45); border-radius: 2px; background: rgb(7 27 35 / .88); color: #fff; font: 600 13px/1 var(--vx-sans); cursor: pointer; }
.vx7-replay:hover { border-color: #7CD2DE; }
.vx7-replay[hidden] { display: none; }
@media (max-width: 47.99em) { .vx7-replay { top: auto; left: auto; right: 12px; bottom: 12px; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 18px; }
  .vx7-replay span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.vx7-replay:focus-visible { outline: 2px solid #7CD2DE; outline-offset: 2px; }


/* 10. Status pages (404, thank-you, upload, order status): the drawn folder gives way to an abstract measured frame —
   registration corners, the 17:22 brand slope and a baseline. Geometry only; no drawn documents (owner rule). */
.vx7 .vx-st5-fold { display: none !important; }
.vx7 .vx-st5-still { position: relative; width: 288px; max-width: 100%; aspect-ratio: 3 / 2; --c: rgb(43 179 192 / .75); --l: 14px; --t: 1px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 192' preserveAspectRatio='none'%3E%3Cpath d='M92 12 L240.5 180' stroke='%232BB3C0' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Cpath d='M24 180 H200' stroke='%232BB3C0' stroke-opacity='.45' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--l) no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes vx7Frame { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .vx7 .vx-st5-still { animation: vx7Frame .7s cubic-bezier(.65, 0, .35, 1) .15s both; }
}
/* QA 2026-10-15: on phones the page name in the title block takes the full row (long RU/ES words never spill) */
@media (max-width: 47.99em) { .vx7-title > div:first-child { grid-column: 1 / -1; } .vx7-title dd { overflow-wrap: break-word; } }
/* narrow phones: a two-line label plus a two-line price still fit the fixed-height price-bar cell */
@media (max-width: 22.5em) { .vx6-ticker a { gap: 2px; } .vx6-ticker__p { line-height: 19px; } }