/* v3 of "At a glance": black, large type, the cards as a file cabinet. The stage under the Front Office bar is pinned;
   v3.js sizes the cards and places every one, in front, rising or on the pile. */
@property --g { syntax: '<color>'; inherits: false; initial-value: #6fe3a5; }

.v3-page { background: #000; }
.v3-page .fo-nav { background: rgba(0, 0, 0, .74); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
                   border-bottom-color: rgba(255, 255, 255, .08); box-shadow: none; }
.v3 { --ink: #f5f5f7; --dim: #a1a1a6; --mute: #86868b; --link: #2997ff;
      position: relative; color: var(--ink); background: #000;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
      -webkit-font-smoothing: antialiased; }
.v3 a { text-decoration: none; }
.v3 h1, .v3 h2, .v3 h3, .v3 p { margin: 0; }
.v3-grad { display: block; background: linear-gradient(90deg, #6fe3a5 0%, #64d2ff 30%, #7cb8ff 50%, #ff6b9a 78%, #ff9f0a 100%);
           -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.v3-acts { display: flex; justify-content: center; margin-top: 30px; }
.v3-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 30px; border-radius: 980px;
          background: #2e8f4e; color: #fff !important; font-size: 17px; font-weight: 600; letter-spacing: -.01em; transition: background .2s; }
.v3-btn:hover { background: #34a259; }
.v3-note { margin-top: 16px !important; font-size: 14px; color: var(--mute); text-wrap: balance; }
.v3-link { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--link); cursor: pointer; }
.v3-link:hover { text-decoration: underline; }
.v3-link + .v3-link { margin-left: 26px; }

/* the opening: the headline and the hand of cards */
.v3-hero { padding: clamp(54px, 9vh, 116px) 22px 0; text-align: center; overflow-x: clip; }
.v3-eyebrow { font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; color: var(--dim); }
.v3-h1 { margin-top: 12px !important; font-size: clamp(44px, 7.4vw, 96px); font-weight: 700; line-height: 1.03; letter-spacing: -.03em; }
.v3-h1 > span { display: block; text-wrap: balance; }
.v3-lead { max-width: 760px; margin: 22px auto 0 !important; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.38; font-weight: 500; color: var(--dim); text-wrap: pretty; }
.v3-fan { position: relative; width: min(1180px, 100%); aspect-ratio: 2.25 / 1; margin: clamp(44px, 7vh, 84px) auto 0;
          -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.v3-fan__c { position: absolute; left: 27%; top: 9%; width: 46%; aspect-ratio: 1920 / 984; border-radius: clamp(8px, 1.1vw, 16px); overflow: hidden;
             background: #030a1e; box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .1);
             transform-origin: 50% 330%; transform: rotate(calc(var(--f) * 9deg)); z-index: var(--z);
             animation: v3-fan .62s cubic-bezier(.2, .8, .2, 1) calc(.25s + var(--d) * .09s) both; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.v3-fan__c img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v3-fan__c:hover { transform: rotate(calc(var(--f) * 9deg)) translateY(-5%); }
@keyframes v3-fan { from { transform: translateY(26%) rotate(0deg); opacity: 0; } to { transform: rotate(calc(var(--f) * 9deg)); opacity: 1; } }

/* the deck */
.v3-stack { margin-top: clamp(20px, 4vh, 48px); }
.v3-track { position: relative; }
.v3-stage { position: sticky; top: calc(var(--fo-top, 62px) + var(--fo-nav, 56px)); height: calc(100svh - var(--fo-top, 62px) - var(--fo-nav, 56px)); overflow: hidden; }
.v3-glow { position: absolute; inset: 0; pointer-events: none; --g: #6fe3a5; transition: --g .9s ease;
           background: radial-gradient(52% 50% at 50% 62%, color-mix(in srgb, var(--g) 22%, transparent) 0%, transparent 72%); }
.v3-box { position: absolute; inset: 0; }
.v3-c { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 50% 0; will-change: transform; --hh: 44px; }
.v3-stack.is-live .v3-c.is-far { display: none; }
.v3-c__in { position: relative; border-radius: 18px; overflow: hidden; background: #071233;
            box-shadow: 0 -3px 10px rgba(0, 0, 0, .4), 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--acc) 34%, rgba(255, 255, 255, .1));
            transition: transform .24s cubic-bezier(.2, .8, .2, 1), box-shadow .24s; }
.v3-c__in::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 1.5px; pointer-events: none;
                    background: linear-gradient(90deg, transparent 1%, color-mix(in srgb, var(--acc) 80%, transparent) 22%, color-mix(in srgb, var(--acc) 80%, transparent) 78%, transparent 99%); }
.v3-c__dk { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .2s; }

/* the title tab, the part that stays in sight on the pile */
.v3-tab { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; height: var(--hh); padding: 0 calc(var(--hh) * .5);
          background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 20%, #0b1636) 0%, #0b1636 46%, #091330 100%);
          border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--ink) !important; font-size: calc(var(--hh) * .38); }
.v3-tab__t { display: flex; align-items: baseline; gap: .8em; min-width: 0; }
.v3-tab__n { flex: none; font-size: 1.12em; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.v3-tab__s { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--dim); font-weight: 500; }
.v3-tab__r { flex: none; display: flex; align-items: center; gap: .7em; }
.v3-tab__g { font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.v3-tab__o { display: grid; place-items: center; width: calc(var(--hh) * .64); height: calc(var(--hh) * .64); border-radius: 50%; color: var(--acc);
             background: color-mix(in srgb, var(--acc) 18%, #101a36); }
.v3-tab__o svg { width: 56%; height: 56%; }
.v3-pic { display: block; }
.v3-pic img { display: block; width: 100%; height: auto; }
.v3-c.is-front .v3-tab, .v3-c.is-front .v3-pic, .v3-stack:not(.is-live) .v3-pic { cursor: pointer; }

/* under every card: the free trial, the demo, the module's own page */
.v3-act { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px 12px; height: var(--ah, 60px);
          padding: 0 calc(var(--hh) * .5); border-top: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(180deg, #081739 0%, #060f2b 100%);
          font-size: var(--bf, 15px); }
.v3-b { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .4em; height: var(--bh, 40px); padding: 0 1.35em; border-radius: 980px;
        font: inherit; font-weight: 600; letter-spacing: -.005em; line-height: 1.1; white-space: nowrap; cursor: pointer;
        transition: background .2s, border-color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.v3-b:active { transform: scale(.97); }
.v3-b--go { background: #2e8f4e; color: #fff !important; border: 0; }
.v3-b--go:hover { background: #34a259; }
.v3-b--go small { font-size: .86em; font-weight: 500; color: rgba(255, 255, 255, .86); }
.v3-b--go small::before { content: "\00b7\00a0"; }
.v3-b--demo { background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.v3-b--demo:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); }
.v3-more { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 4px; color: var(--link) !important; font-weight: 500; }
.v3-more:hover { text-decoration: underline; }
.v3-more.is-short .v3-more__on { display: none; }
/* on a touch screen the card says it can be tapped, as the pictures of the regular pages do; it sits on the seam,
   over the empty bottom margin of the picture */
.v3-next { display: none; position: absolute; left: 50%; top: 0; z-index: 2; transform: translate(-50%, -50%); align-items: center; gap: 10px;
           height: 28px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--acc); background: color-mix(in srgb, var(--acc) 16%, #0a0f18);
           color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
           animation: v3-tap 2.4s ease-in-out infinite; }
.v3-next small { font-size: 1em; font-weight: 700; color: rgba(255, 255, 255, .62); letter-spacing: .02em; }
@keyframes v3-tap { 0%, 100% { box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 0 0 color-mix(in srgb, var(--acc) 50%, transparent); }
                    50% { box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 0 7px color-mix(in srgb, var(--acc) 0%, transparent); } }
@media (hover: none) {
  .v3-next { display: inline-flex; }
  .v3-act { padding-top: 14px; }
}
/* upright screens: the two buttons side by side, the module's page under them */
.v3-stack[data-mode="tall"] .v3-act, .v3-stack[data-mode="phone"] .v3-act { flex-wrap: wrap; align-content: center; row-gap: 9px; }
.v3-stack[data-mode="tall"] .v3-more, .v3-stack[data-mode="phone"] .v3-more { flex: 0 0 100%; margin: 0; text-align: center; }
.v3-stack[data-mode="phone"] .v3-act { gap: 8px; padding-left: 10px; padding-right: 10px; font-size: 14px; row-gap: 8px; }
.v3-stack[data-mode="phone"] .v3-b { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 10px; }
.v3-stack[data-mode="phone"] .v3-b--go { flex-direction: column; gap: 1px; }
.v3-stack[data-mode="phone"] .v3-b--go small { font-size: 11px; }
.v3-stack[data-mode="phone"] .v3-b--go small::before { content: none; }
.v3-stack[data-mode="phone"] .v3-more { font-size: 13.5px; }

/* the deck on computers and tablets: the card from side to side and from the bars to the bottom. Its picture as large as
   the height allows, in the middle; on each side the card goes on in the picture's own background (measured on all 60
   pictures: #040c21 on the wide ones, #050f29 on the upright ones). On a touch screen a band of that background under the
   picture carries the "tap" pill. When Lisa's pill sits over the end of the row of buttons (v3.js sets --lr), the
   buttons gather in the rest of the row */
.v3-stack.is-live .v3-pic { display: flex; justify-content: center; align-items: flex-start; height: calc(var(--ph) + var(--pb, 0px)); background: #040c21; }
.v3-stack.is-live[data-mode="tall"] .v3-pic { background: #050f29; }
.v3-stack.is-live .v3-pic picture { display: contents; }
.v3-stack.is-live .v3-pic img { flex: none; width: var(--pw); max-width: 100%; height: var(--ph); }
.v3-stack.is-live .v3-act { padding-right: max(calc(var(--hh) * .5), var(--lr, 0px)); }
.v3-stack.is-live .v3-next { left: calc(50% - var(--lr, 0px) / 2); }
@media (hover: none) { .v3-stack.is-live { --pb: 14px; } }

/* the pointer on the card in front: "Click for next card", as on the pictures of the regular pages */
.v3-tip { position: absolute; left: 0; top: 0; z-index: 400; pointer-events: none; padding: 6px 12px; border-radius: 999px; background: rgba(10, 15, 25, .94);
          border: 1px solid rgba(255, 255, 255, .24); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); color: #fff; font-size: 12.5px; font-weight: 700;
          letter-spacing: .01em; white-space: nowrap; opacity: 0; transition: opacity .15s; }
.v3-tip.is-on { opacity: 1; }
@media (hover: none) { .v3-tip { display: none; } }

/* on the pile: the folder you point at rises, as if you were picking it; only its picture rises, the place that answers
   the pointer stays where it rests, or a risen folder would hide the ones behind it */
.v3-c.is-pile { cursor: pointer; }
.v3-c.is-pile .v3-c__in { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .v3-stack:not(.is-open) .v3-c.is-pile:hover .v3-c__in { transform: translateY(calc(-1 * var(--lift, 14px)));
                                  box-shadow: 0 -16px 40px rgba(0, 0, 0, .6), 0 0 0 1.5px var(--acc), 0 0 28px color-mix(in srgb, var(--acc) 40%, transparent); }
  .v3-c.is-pile:hover .v3-c__dk { opacity: 0 !important; }
  .v3-c.is-pile:hover .v3-tab { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 34%, #0b1636) 0%, #0b1636 60%); }
}
/* the cabinet opened by a tap: every title in sight, the tight ones read from the top of their tab */
.v3-stack.is-open .v3-c { cursor: pointer; }
.v3-stack.is-open .v3-c.is-pile .v3-tab { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 30%, #0b1636) 0%, #0b1636 60%); }
.v3-stack.is-tight .v3-tab { align-items: flex-start; padding-top: calc(var(--hh) * .17); }

/* phones: the name and the icon only */
.v3-stack[data-mode="phone"] .v3-tab__s, .v3-stack[data-mode="phone"] .v3-tab__g { display: none; }
.v3-stack[data-mode="phone"] .v3-c__in { border-radius: 14px; }

/* short landscape screens and no script: the cards one under the other */
.v3-stack:not(.is-live) .v3-stage { position: static; height: auto; overflow: visible; padding: 0 16px; }
.v3-stack:not(.is-live) .v3-glow { display: none; }
.v3-stack:not(.is-live) .v3-box { position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 1200px; margin: 0 auto; }
.v3-stack:not(.is-live) .v3-c { position: relative; transform: none !important; --hh: 46px; }
.v3-stack:not(.is-live) .v3-act { height: auto; min-height: 64px; padding-bottom: 12px; flex-wrap: wrap; }
@media (hover: none) { .v3-stack:not(.is-live) .v3-act { padding-top: 22px; } }
.v3-stack:not(.is-live) .v3-tip { position: fixed; }

/* the end */
.v3-end { max-width: 980px; margin: clamp(90px, 14vh, 170px) auto 0; padding: 0 22px clamp(90px, 13vh, 150px); text-align: center; }
.v3-end h2 { font-size: clamp(36px, 5.4vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -.028em; text-wrap: balance; }

@media (max-width: 599px) {
  .v3-hero { padding-top: 44px; }
  .v3-fan { aspect-ratio: 1.55 / 1; width: calc(100% + 44px); margin-left: -22px; }
  .v3-fan__c { left: 18%; width: 64%; top: 10%; }
  .v3-link + .v3-link { margin-left: 18px; }
  .v3-stack:not(.is-live) .v3-c { --hh: 38px; }
}
/* phones, upright or on their side: every card the width of the screen, one under the other; each one stops under the bars and the next one comes
   up over it (v3.js sets each card's --st). The module's page sits in the title bar; under the picture, in a row of its
   own, only the "tap" pill, on the left: Lisa's pill sits on the right of that row when a card rests at the bottom of
   the screen. The free trial stays in the bar at the top */
.v3-stack[data-mode="phone"] .v3-stage { padding: 0 6px; }
.v3-stack[data-mode="phone"] .v3-box { gap: 14px; grid-template-columns: minmax(0, 1fr); }
.v3-stack[data-mode="phone"] .v3-c { position: sticky; top: var(--st, 128px); --hh: 40px; will-change: auto; }
.v3-stack[data-mode="phone"] .v3-c__in { transform-origin: 50% 0; transition: none; overflow: clip; }
/* the title bar (with "See details") stays right under the bars while the picture goes up under it (v3.js sets --tt) */
.v3-stack[data-mode="phone"] .v3-tab { position: sticky; top: var(--tt, 122px); z-index: 4; padding: 0 104px 0 14px; }
.v3-stack[data-mode="phone"] .v3-tab__r { display: none; }
.v3-stack[data-mode="phone"] .v3-act { position: static; height: auto; min-height: 0; padding: 9px 12px calc(10px + var(--lb, 0px)); justify-content: flex-start; }
.v3-stack[data-mode="phone"] .v3-b { display: none; }
.v3-stack[data-mode="phone"] .v3-more { position: absolute; z-index: 3; top: 0; right: 0; display: flex; align-items: center; height: var(--hh);
                                       margin: 0; padding: 0 14px 0 10px; font-size: 14px; }
.v3-stack[data-mode="phone"] .v3-more__on, .v3-stack[data-mode="phone"] .v3-more[data-short] .v3-more__t { display: none; }
.v3-stack[data-mode="phone"] .v3-more[data-short]::before { content: attr(data-short); }
.v3-stack[data-mode="phone"] .v3-tab__t, .v3-stack[data-mode="phone"] .v3-tab__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v3-stack[data-mode="phone"] .v3-tab__n { flex: 0 1 auto; font-size: 1.06em; }
.v3-stack[data-mode="phone"] .v3-next { display: inline-flex; position: static; transform: none; height: 30px; padding: 0 12px; letter-spacing: .03em; }
@media (max-width: 419px) { .v3-stack[data-mode="phone"] .v3-next small { display: none; } }
@media (max-width: 379px) { .v3-stack[data-mode="phone"] .v3-next { padding: 0 10px; font-size: 10.5px; } }
@media (prefers-reduced-motion: reduce) {
  .v3-fan__c, .v3-next { animation: none; }
  .v3-c__in { transition: none; }
}

/* v7s: the page around the deck */
.v3-page .zw-page { background: #000; }
figure.v3-c__in { margin: 0; }
.v3-tab__n { display: block; }
.ft { padding-top: 10px; }
.ft-g { scroll-margin-top: calc(var(--fo-top, 62px) + var(--fo-nav, 56px) + 16px); }
.ft-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; max-width: 1180px; margin: 26px auto 0; text-align: left; }
.ft-i { display: flex; flex-direction: column; padding: 18px 18px 16px; border-radius: 16px; background: rgba(255, 255, 255, .035);
        border: 1px solid color-mix(in srgb, var(--acc) 26%, rgba(255, 255, 255, .08)); }
.ft-i__n { margin: 0 0 6px !important; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.ft-i__n a { display: inline-flex; align-items: center; gap: 9px; color: #fff !important; text-decoration: none !important; }
.ft-i__n a:hover span { text-decoration: underline; }
.ft-i__n svg { flex: none; color: var(--acc); }
.ft-i__s { margin: 0 0 8px !important; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--acc); }
.ft-i__p { margin: 0 0 12px !important; font-size: 15px; line-height: 1.5; color: #c3ccd9; }
.ft-i__b { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px !important; padding: 0; list-style: none; }
.ft-i__b li { padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; line-height: 1.3; color: #dfe7f1; }
.ft-i__go { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin: auto 0 0 !important; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 14px; font-weight: 600; }
.ft-i__go a { color: #7cb8ff !important; }
@media (max-width: 599px) { .ft-l { grid-template-columns: 1fr; } }