/* ==========================================================================
   SITE 2 — "DECK"  (offerhub oh2-swipe-deck, converted to a WHITE theme)
   Phone-first app feel: single column, big tap targets, sticky bottom dock.
   Shared by index.html · article.html · offerhub.html
   ========================================================================== */
:root{
  --navy:#152A5E;--navy-d:#0E1D44;--blue:#1668D8;--blue-l:#4E9BFF;
  --green:#1FA97A;--green-d:#158A62;--green-l:#3FCE9B;
  --ink:#16233F;--muted:#5A6A88;--soft:#8DA0BC;
  --line:#E6ECF6;--line2:#D6E1F0;--bg:#FFFFFF;--bg2:#F6F9FD;
  --f:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --sh:0 1px 2px rgba(21,42,94,.05),0 8px 22px -10px rgba(21,42,94,.2);
  --sh2:0 4px 10px rgba(21,42,94,.07),0 26px 48px -18px rgba(21,42,94,.28);
  --glow:0 6px 20px -6px rgba(31,169,122,.55);
  /* ---- 3D depth stack: many soft layers read as real depth, not one blurry blob ---- */
  --d1:0 1px 1px rgba(21,42,94,.05),0 2px 2px rgba(21,42,94,.05),0 4px 4px rgba(21,42,94,.05),0 8px 8px rgba(21,42,94,.05);
  --d2:0 2px 2px rgba(21,42,94,.05),0 4px 4px rgba(21,42,94,.05),0 8px 8px rgba(21,42,94,.05),0 16px 16px rgba(21,42,94,.05),0 32px 32px rgba(21,42,94,.06);
  --d3:0 4px 4px rgba(21,42,94,.06),0 8px 8px rgba(21,42,94,.06),0 16px 16px rgba(21,42,94,.06),0 32px 32px rgba(21,42,94,.07),0 64px 64px rgba(21,42,94,.1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.62 var(--f);color:var(--ink);background:var(--bg2);
  -webkit-font-smoothing:antialiased;padding-bottom:96px}
/* pages with no sticky dock: reclaim the space reserved for it, and drop
   the QA button back down to the corner it would otherwise clear */
body.nodock{padding-bottom:26px}
body.nodock .mmtoggle{bottom:16px}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:680px;margin:0 auto;padding:0 18px}
.sp{flex:1}
@keyframes mv{50%{background-position:100% 50%}}

/* ---------- top bar ---------- */
.top{padding:8px 0;position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px}
.logoimg{height:124px;width:auto;display:block}
.sec{font-size:11.5px;font-weight:800;color:var(--soft)}

/* ---------- category pills ---------- */
.cats{background:#fff;border-bottom:1px solid var(--line);padding:10px 0}
.cats .wrap{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.cats .wrap::-webkit-scrollbar{display:none}
.cats a{flex-shrink:0;padding:9px 16px;border-radius:99px;font-size:13.5px;font-weight:800;
  color:var(--muted);background:var(--bg2);border:1px solid var(--line);white-space:nowrap;transition:.14s}
.cats a:hover{border-color:var(--line2);color:var(--navy)}
.cats a.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ==========================================================================
   MENU-ROW SEARCH — inline with the category pills
   Opt in with <div class="cats hassearch">. Rows without the modifier keep
   the original scrolling pill behaviour untouched.

   Sized to sit INSIDE the existing row height, so adding it costs zero
   vertical space — which matters on the article, where the money unit has
   only ~36px of slack above the fold.

   Desktop: a real input, always open, pinned right of the pills.
   Mobile:  a round icon button. Tapping it hides the pills and expands the
            field to full width. Seven pills and a text field will not share
            a 390px row, and an input too narrow to type in is worse than
            none. money.js wires the toggle.
   ========================================================================== */
.cats.hassearch .wrap{overflow:visible;gap:10px;align-items:center}
/* padding-bottom matters here: overflow-x:auto forces overflow-y to auto
   too (CSS spec — one axis set non-visible pulls the other off 'visible'),
   which was clipping the active pill's bottom 3D shadow (box-shadow 0 4px
   0 ...) right at the row's own edge. The padding gives the shadow room
   to render before the clip line, instead of getting cut off flat. Costs
   ~6px of row height sitewide — trivial against the fold budget's slack,
   and simpler/safer than fighting it back with a negative margin inside
   a flex row (which risks overlapping the search box beside it). */
.catlinks{display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;
  padding-bottom:6px}
.catlinks::-webkit-scrollbar{display:none}

.navsearch{flex-shrink:0;display:flex;align-items:center;height:34px;
  background:var(--bg2);border:1px solid var(--line);border-radius:99px;
  padding:0 3px 0 6px;transition:border-color .14s,box-shadow .14s,background .14s}
.navsearch:focus-within{background:#fff;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(31,169,122,.15)}
.navsearch input[type=search]{width:150px;height:32px;border:0;outline:none;background:none;
  padding:0 8px;font:600 13px var(--f);color:var(--ink);
  -webkit-appearance:none;appearance:none}
.navsearch input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.navsearch input[type=search]::placeholder{color:var(--soft);font-weight:600}
.navsearch button{position:relative;flex-shrink:0;width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:12px;line-height:1;
  background:linear-gradient(135deg,var(--green-l),var(--green));color:#fff;
  box-shadow:0 2px 6px -1px rgba(31,169,122,.5);transition:transform .12s}
.navsearch button:active{transform:scale(.92)}
/* the button stays visually 28px so the pill row's height (and the fold
   budget above it) doesn't change, but a 44px invisible hit area — the
   accepted mobile minimum — sits centered on top of it for tapping. */
.navsearch button::before{content:'';position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}

@media(max-width:640px){
  /* collapsed: the input is a zero-width sliver, only the button shows */
  .navsearch{padding:0 3px}
  .navsearch input[type=search]{width:0;padding:0;opacity:0;pointer-events:none;
    transition:width .18s,opacity .12s}
  /* expanded: the pills step aside and the field takes the whole row */
  .cats.searching .catlinks{display:none}
  .cats.searching .navsearch{flex:1;padding:0 3px 0 13px}
  .cats.searching .navsearch input[type=search]{width:auto;flex:1;min-width:0;
    padding:0 8px 0 0;opacity:1;pointer-events:auto}
}

/* ==========================================================================
   TOP-BAR SEARCH — right of the logo, where the trust badge used to sit
   Add the <form class="topsearch"> to any page's .top and it lands here.

   Mobile: the logo is wide and the row is shared, so the field shrinks
   rather than disappearing. It never collapses to an icon — this is the
   only search on the page, and a hidden one does not get used.
   ========================================================================== */
.topsearch{flex-shrink:0;display:flex;align-items:center;height:42px;
  background:var(--bg2);border:1px solid var(--line);border-radius:99px;
  padding:0 5px 0 7px;transition:border-color .14s,box-shadow .14s,background .14s}
.topsearch:focus-within{background:#fff;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(31,169,122,.15)}
.topsearch input[type=search]{width:172px;height:40px;border:0;outline:none;background:none;
  padding:0 9px;font:600 14px var(--f);color:var(--ink);
  -webkit-appearance:none;appearance:none}
.topsearch input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.topsearch input[type=search]::placeholder{color:var(--soft);font-weight:600}
.topsearch button{flex-shrink:0;width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:14px;line-height:1;
  background:linear-gradient(135deg,var(--green-l),var(--green));color:#fff;
  box-shadow:0 2px 7px -1px rgba(31,169,122,.5);transition:transform .12s}
.topsearch button:active{transform:scale(.92)}

@media(max-width:640px){
  .topsearch{height:38px}
  .topsearch input[type=search]{width:112px;height:36px;padding:0 7px;font-size:13.5px}
  .topsearch button{width:29px;height:29px;font-size:12.5px}
}
@media(max-width:400px){
  .topsearch input[type=search]{width:104px}
}

/* ---------- HERO CARD with video ---------- */
.hero{position:relative;margin:18px 0 0;border-radius:26px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh2)}
.vscreen{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;background:var(--navy-d)}
.vscreen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vg{position:absolute;inset:0;background:linear-gradient(125deg,#0E1D44,#1668D8,#1FA97A,#152A5E);
  background-size:310% 310%;animation:mv 17s ease-in-out infinite}
.vg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,28,.1),rgba(5,11,28,.55))}
.vplay{position:relative;z-index:3;width:86px;height:86px;border-radius:50%;cursor:pointer;border:0;
  background:#fff;display:grid;place-items:center;transition:transform .16s;box-shadow:0 16px 40px -10px rgba(0,0,0,.6)}
.vplay::before{content:"";border-style:solid;border-width:15px 0 15px 25px;
  border-color:transparent transparent transparent var(--green);margin-left:6px}
.vplay:active{transform:scale(.93)}
.live{position:absolute;top:15px;left:15px;z-index:4;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.95);border-radius:99px;padding:7px 14px;font-size:11.5px;font-weight:800;
  letter-spacing:.04em;color:var(--navy)}
.live .d{width:7px;height:7px;border-radius:50%;background:var(--green);animation:p 1.9s infinite}
@keyframes p{50%{opacity:.3}}
.hbd{padding:22px}
.hbd h1{font-size:clamp(25px,6.4vw,33px);line-height:1.1;letter-spacing:-.035em;font-weight:800;
  color:var(--navy);margin:0 0 10px}
.hbd h1 .g{color:var(--green-d)}
.hbd p{font-size:15.5px;color:var(--muted);margin:0}

/* ---------- deck section heads ---------- */
.dh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:26px 2px 12px}
.dh h2{margin:0;font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--soft);font-weight:800}
.lbl{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
  border:1px solid var(--line2);padding:4px 9px;border-radius:5px;font-weight:800}

/* ---------- the deck: big tappable cards ---------- */
.deck{display:grid;gap:13px}
.card{position:relative;display:flex;align-items:center;gap:15px;padding:16px;border-radius:22px;
  background:#fff;border:1px solid var(--line);min-height:94px;box-shadow:var(--sh);
  transition:transform .13s,border-color .13s,box-shadow .13s}
.card:hover{border-color:var(--line2);box-shadow:var(--sh2);transform:translateY(-3px)}
.card:active{transform:scale(.987)}
.card.hot{border-color:rgba(31,169,122,.4);background:linear-gradient(120deg,#F2FBF7,#fff 55%)}
.thumb{width:76px;height:76px;border-radius:19px;flex-shrink:0;position:relative;overflow:hidden;
  display:grid;place-items:center;box-shadow:0 8px 18px -7px rgba(21,42,94,.45)}
.thumb .g{position:absolute;inset:0;background-size:215% 215%;animation:mv 15s ease-in-out infinite}
.g-a{background-image:linear-gradient(140deg,#0C6B4E,#1FA97A,#3FCE9B)}
.g-b{background-image:linear-gradient(140deg,#0E1D44,#1668D8,#4E9BFF)}
.g-c{background-image:linear-gradient(140deg,#152A5E,#2B4A8F,#1FA97A)}
.g-d{background-image:linear-gradient(140deg,#1E3A6B,#4E9BFF,#3FCE9B)}
.thumb .em{position:relative;z-index:2;font-size:31px;filter:drop-shadow(0 4px 9px rgba(0,0,0,.45))}
/* real hero photo, when present, covers the gradient+emoji fallback
   underneath — z-index 3 sits above .em's 2. onerror removes the <img>
   entirely on a missing file, so the fallback is never hidden behind a
   broken image, it just reappears. Source is 300x250 (6:5) filling a
   square 76x76 box, so object-fit:cover crops it rather than stretching. */
.thumb img{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;display:block}
.ct{flex:1;min-width:0}
.ct .pill{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;margin-bottom:6px;background:var(--bg2);color:var(--muted);border:1px solid var(--line)}
.card.hot .ct .pill{background:linear-gradient(135deg,var(--green-l),var(--green));color:#fff;border-color:transparent}
.ct b{display:block;font-size:17px;letter-spacing:-.025em;color:var(--navy);line-height:1.24;margin-bottom:3px}
.ct span{font-size:13px;color:var(--muted)}
.chev{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:19px;
  background:var(--bg2);color:var(--muted);font-weight:700;border:1px solid var(--line)}
.card:hover .chev{background:var(--blue);color:#fff;border-color:transparent}
.card.hot .chev{background:linear-gradient(135deg,var(--green-l),var(--green));color:#fff;
  border-color:transparent;box-shadow:var(--glow)}

/* ---------- trust chips ---------- */
.tr{display:flex;gap:9px;overflow-x:auto;padding:18px 0 4px;scrollbar-width:none}
.tr::-webkit-scrollbar{display:none}
.tp{flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:99px;padding:10px 17px;
  font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;box-shadow:var(--sh)}
.tp b{color:var(--navy)}

/* ---------- newsletter ---------- */
.nl{background:linear-gradient(140deg,#EFF6FF,#EDFAF4);border:1px solid var(--line);border-radius:24px;
  padding:26px;margin:28px 0 6px;text-align:center}
.nl h3{margin:0 0 6px;font-size:21px;letter-spacing:-.03em;color:var(--navy)}
.nl p{margin:0 0 18px;color:var(--muted);font-size:14.5px}
.nl form{display:flex;gap:9px;flex-wrap:wrap}
.nl input{flex:1;min-width:180px;height:52px;border:1px solid var(--line2);border-radius:99px;padding:0 20px;
  font:600 15px var(--f);outline:none;background:#fff}
.nl input:focus{border-color:var(--green)}
.nl button{height:52px;padding:0 26px;border:0;border-radius:99px;cursor:pointer;font:800 15px var(--f);
  background:linear-gradient(135deg,var(--green-l),var(--green));color:#fff;box-shadow:var(--glow)}

/* ---------- sticky bottom dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border-top:1px solid var(--line);
  box-shadow:0 -8px 30px -14px rgba(21,42,94,.35)}
.dock .in{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:13px}
.dock .txt{flex:1;min-width:0}
.dock .txt b{display:block;font-size:14px;color:var(--navy);line-height:1.2}
.dock .txt span{font-size:11.5px;color:var(--soft)}
.dock a{flex-shrink:0;background:linear-gradient(135deg,var(--green-l),var(--green));color:#fff;
  font-weight:800;font-size:15.5px;padding:15px 26px;border-radius:99px;box-shadow:var(--glow);transition:transform .12s}
.dock a:active{transform:scale(.96)}

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.crumb{font-size:13px;color:var(--muted);padding:20px 0 0;font-weight:600}
article{padding:12px 0 30px}
article h1{font-size:clamp(26px,6vw,34px);line-height:1.13;letter-spacing:-.033em;font-weight:800;
  color:var(--navy);margin:0 0 16px}
.meta{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:15px 18px;margin-bottom:24px;box-shadow:var(--sh);flex-wrap:wrap}
.av{width:44px;height:44px;border-radius:16px;background:linear-gradient(150deg,var(--blue-l),#0F52AE);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:14.5px}
.who b{display:block;font-size:14.5px;color:var(--navy)}
.who span{font-size:12.5px;color:var(--soft)}
.rev{font-size:11.5px;font-weight:800;background:#E8F8F1;color:var(--green-d);padding:6px 13px;border-radius:99px}
.himg{border-radius:24px;overflow:hidden;aspect-ratio:16/9;position:relative;margin-bottom:26px;box-shadow:var(--sh2)}
.himg .g{position:absolute;inset:0;background-size:220% 220%;animation:mv 16s ease-in-out infinite}
article h2{font-size:23px;letter-spacing:-.03em;color:var(--navy);margin:36px 0 12px}
article p{color:#3D4C69;font-size:17px;margin:0 0 18px}
article ul,article ol{color:#3D4C69;font-size:17px;padding-left:22px}
article li{margin-bottom:9px}
article b{color:var(--navy)}
.callout{background:#fff;border:1px solid var(--line);border-left:5px solid var(--green);border-radius:20px;
  padding:20px 24px;margin:26px 0;box-shadow:var(--sh)}
.callout p{margin:0;font-size:15.5px;color:var(--muted)}
.tbl{overflow-x:auto;margin:24px 0;border-radius:20px;border:1px solid var(--line);box-shadow:var(--sh);background:#fff}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:500px}
th{background:var(--bg2);text-align:left;padding:14px 18px;color:var(--navy);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase}
td{padding:14px 18px;border-top:1px solid var(--line);color:var(--muted)}

/* ---------- footer ---------- */
footer{padding:26px 0 34px;text-align:center;font-size:11.5px;color:var(--soft);line-height:1.65;
  border-top:1px solid var(--line);background:#fff;margin-top:32px}
footer .lk{margin-bottom:11px;font-weight:700}
footer .lk a{color:var(--muted);margin:0 7px}
footer .dc{max-width:640px;margin:0 auto}

/* ==========================================================================
   3D DEPTH — the deck reads as physical cards you could pick up
   ========================================================================== */
.hero{box-shadow:var(--d3);transform:perspective(1800px) rotateX(2deg);transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hero:hover{transform:perspective(1800px) rotateX(0deg) translateY(-3px)}
.vplay{box-shadow:0 7px 0 rgba(10,25,60,.2),0 22px 46px -10px rgba(0,0,0,.65)}
.vplay:active{transform:translateY(5px) scale(.97);box-shadow:0 2px 0 rgba(10,25,60,.2)}

/* deck cards tilt toward the cursor; contents sit on separate planes */
.deck{perspective:1200px}
.card{transform-style:preserve-3d;box-shadow:var(--d1);will-change:transform;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s,border-color .16s,background .16s}
.card:hover{box-shadow:var(--d3)}
.card .ct{transform-style:preserve-3d}
.thumb{transform:translateZ(38px);transition:transform .16s;
  box-shadow:0 5px 0 rgba(21,42,94,.12),0 14px 24px -6px rgba(21,42,94,.5)}
.card:hover .thumb{transform:translateZ(62px) scale(1.05)}
.ct .pill{transform:translateZ(26px)}
.ct b{transform:translateZ(16px)}
.ct span{transform:translateZ(8px)}
.chev{transform:translateZ(44px);transition:transform .16s;
  box-shadow:0 3px 0 rgba(21,42,94,.1),0 8px 14px -4px rgba(21,42,94,.3)}
.card:hover .chev{transform:translateZ(64px) scale(1.06)}
.card.hot .chev{box-shadow:0 4px 0 #0C6B4E,0 12px 22px -5px rgba(31,169,122,.6)}

/* category pills press down */
.cats a{transition:transform .12s,box-shadow .12s,background .14s,border-color .14s;
  box-shadow:0 3px 0 #E3EAF5}
.cats a:hover{transform:translateY(-2px);box-shadow:0 5px 0 #E3EAF5}
.cats a:active{transform:translateY(3px);box-shadow:none}
.cats a.on{box-shadow:0 4px 0 #0B1B3D}
.cats a.on:active{box-shadow:0 1px 0 #0B1B3D}

/* trust chips + newsletter */
.tp{box-shadow:0 3px 0 #EDF2FA,0 8px 16px -6px rgba(21,42,94,.25)}
.nl{box-shadow:var(--d2)}
.nl button{box-shadow:0 5px 0 #0C6B4E,0 14px 24px -6px rgba(31,169,122,.55);
  transition:transform .12s,box-shadow .12s}
.nl button:active{transform:translateY(4px);box-shadow:0 1px 0 #0C6B4E}

/* sticky dock lifts off the page */
.dock{box-shadow:0 -2px 4px rgba(21,42,94,.04),0 -8px 20px -6px rgba(21,42,94,.14),
  0 -20px 40px -12px rgba(21,42,94,.18)}
.dock a{box-shadow:0 5px 0 #0C6B4E,0 14px 26px -6px rgba(31,169,122,.6);
  transition:transform .12s,box-shadow .12s}
.dock a:active{transform:translateY(4px);box-shadow:0 1px 0 #0C6B4E}

/* article furniture */
.meta{box-shadow:var(--d1)}
.himg{box-shadow:var(--d2);transform:perspective(1800px) rotateX(1.5deg);transform-origin:50% 100%}
.callout{box-shadow:var(--d1)}
.tbl{box-shadow:var(--d2)}

/* ---------- monetization map ---------- */
body.mm [data-mm]{outline:2px dashed rgba(226,60,120,.85);outline-offset:5px;position:relative}
body.mm [data-mm]::after{content:attr(data-mm);position:absolute;top:-11px;left:8px;z-index:99;
  background:#E23C78;color:#fff;font:700 10px/1 var(--f);padding:5px 9px;border-radius:5px;
  white-space:nowrap;pointer-events:none}
.mmtoggle{position:fixed;right:16px;bottom:88px;z-index:200;background:var(--navy);color:#fff;border:0;
  cursor:pointer;font:700 12px var(--f);padding:11px 17px;border-radius:99px;
  box-shadow:0 12px 26px -8px rgba(21,42,94,.6)}

/* two-up deck from tablet width; the column widens so each card still breathes */
@media(min-width:760px){
  .wrap{max-width:920px}
  .dock .in{max-width:920px}
  .deck{grid-template-columns:1fr 1fr;gap:14px}
  /* the lead card keeps the full width so it still reads as the headline item */
  .deck .card.hot{grid-column:1 / -1}
}
/* Logo was 74px here. At that size it renders ~200px wide, and once the
   search shares the row that left the input 88px — too narrow to type in.
   58px frees about 45px and gives the field a usable width. */
@media(max-width:520px){.logoimg{height:58px}.sec{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   AMBIENT 3D — depth visible on landing, before any interaction
   ========================================================================== */
.deck{perspective:900px;perspective-origin:50% 45%}

@keyframes deckIn{
  from{opacity:0;transform:rotateX(12deg) translateY(24px) translateZ(-80px)}
  to  {opacity:1;transform:rotateX(3.5deg) translateY(0)   translateZ(0)}
}
.card{transform:rotateX(3.5deg);animation:deckIn .65s cubic-bezier(.2,.8,.2,1) backwards}
.deck .card:nth-child(2){animation-delay:.07s}.deck .card:nth-child(3){animation-delay:.14s}
.deck .card:nth-child(4){animation-delay:.21s}.deck .card:nth-child(5){animation-delay:.28s}
.deck .card:nth-child(6){animation-delay:.35s}.deck .card:nth-child(7){animation-delay:.42s}
.deck .card:nth-child(8){animation-delay:.49s}

@keyframes heroIn{
  from{opacity:0;transform:perspective(1800px) rotateX(9deg) translateY(30px)}
  to  {opacity:1;transform:perspective(1800px) rotateX(2deg) translateY(0)}
}
.hero{animation:heroIn .85s cubic-bezier(.2,.8,.2,1) backwards}

/* thumbnails and chevrons hover above the card face on their own */
@keyframes thumbFloat{0%,100%{transform:translateZ(38px)}50%{transform:translateZ(56px)}}
.thumb{animation:thumbFloat 4.8s ease-in-out infinite}
.deck .card:nth-child(2n) .thumb{animation-delay:.9s}
.deck .card:nth-child(3n) .thumb{animation-delay:1.8s}
.card:hover .thumb{animation:none;transform:translateZ(64px) scale(1.05)}

@keyframes chevFloat{0%,100%{transform:translateZ(44px)}50%{transform:translateZ(58px)}}
.chev{animation:chevFloat 5.2s ease-in-out infinite}
.deck .card:nth-child(2n) .chev{animation-delay:1.1s}
.card:hover .chev{animation:none;transform:translateZ(66px) scale(1.06)}

@media(prefers-reduced-motion:reduce){
  .card,.hero,.thumb,.chev{animation:none!important}
}

.hcap{font-size:19px;font-weight:800;letter-spacing:-.025em;color:var(--navy);margin-bottom:8px}

/* scrim over the promo video so badges and captions stay legible on any footage */
.vscreen::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,11,28,.14) 0%,transparent 34%,rgba(5,11,28,.5) 100%)}