/* CV Advantage promo v2 styles, scoped for the landing page.
   Source: ~/Movies/cv-advantage-promo/v2/promo/promo.css (2026-09-29).
   Changes: every selector scoped under #promo-root; the global reset and html/body rules
   dropped; :root tokens moved onto #promo-root; .portrait/.nocap live on #promo-root;
   the #shine mask points at the site's white logo; the "N of 100 sorted" label added at the end. */
#promo-root {
  --ink: #070B14; --met: #34E5A1; --partial: #F2B05E; --gap: #FF7A85;
  --teal: #2FE3D0; --blue: #4F7BFF; --violet: #A06BFF;
  position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%;
  overflow: hidden; font-family: "Hanken Grotesk", sans-serif; color: #fff;
}
#promo-root * { margin: 0; padding: 0; box-sizing: border-box; }
#promo-root #fx { position: absolute; inset: 0; }
#promo-root .abs { position: absolute; }
#promo-root .scene { position: absolute; inset: 0; opacity: 0; }
#promo-root .display { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: -0.02em; }
#promo-root .mono { font-family: "JetBrains Mono", monospace; }
#promo-root .mask { display: block; overflow: hidden; padding-bottom: .08em; }
#promo-root .mask > span { display: inline-block; }
#promo-root .shadow { text-shadow: 0 3px 30px rgba(7,11,20,.85); }

/* 1 · Hook: a pile of CV cards that buries the screen */
#promo-root #pile { position: absolute; inset: 0; }
#promo-root .cv { position: absolute; left: 0; top: 0; width: 120px; height: 156px; border-radius: 10px; padding: 14px 12px;
      background: linear-gradient(160deg, rgba(235,245,255,.95), rgba(190,205,230,.9));
      box-shadow: 0 14px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 8px; }
#promo-root .cv i { display: block; width: 34px; height: 34px; border-radius: 50%; background: rgba(79,123,255,.55); }
#promo-root .cv b { display: block; height: 7px; border-radius: 4px; background: rgba(40,55,90,.35); }
#promo-root .cv b.s { width: 60%; }
#promo-root #scrim1 { inset: 0; background: radial-gradient(ellipse 60% 70% at 18% 25%, rgba(7,11,20,.92), rgba(7,11,20,.55) 45%, transparent 75%); }
#promo-root #s1h { left: 96px; top: 76px; }
#promo-root #count { font-size: 220px; line-height: .9; margin-bottom: 26px; font-variant-numeric: tabular-nums; transform-origin: left bottom; }
#promo-root #s1t { font-size: 76px; line-height: 1.05; }
#promo-root #s1d { font-size: 72px; color: var(--gap); margin-top: 20px; transform-origin: left center;
       text-shadow: 0 0 40px rgba(255,122,133,.55), 0 3px 30px rgba(7,11,20,.9); }

/* 2 · Sort and 3 · Screen: giant clock, slam word */
#promo-root .slam { position: absolute; inset: 0; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 90px; }
#promo-root .slam::before { content: ""; position: absolute; inset: 12% 8% 18%; z-index: -1;
                background: radial-gradient(ellipse at 50% 50%, rgba(7,11,20,.92), rgba(7,11,20,.7) 45%, transparent 75%); }
#promo-root .kick { font-size: 38px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.88); }
#promo-root .clock { font-size: 340px; line-height: .95; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(7,11,20,.95), 0 6px 50px rgba(7,11,20,.9); }
#promo-root .word { font-size: 144px; line-height: 1; letter-spacing: .02em; color: var(--met);
        text-shadow: 0 0 60px rgba(52,229,161,.7), 0 4px 30px rgba(7,11,20,.9); }
#promo-root #s3 .slam { right: 820px; }
#promo-root #s3 .clock { font-size: 270px; }
#promo-root #s3 .word { font-size: 112px; }
#promo-root .gaps { font-size: 50px; color: var(--gap); margin-top: 12px; text-shadow: 0 0 30px rgba(255,122,133,.6), 0 2px 20px rgba(7,11,20,.9); }
#promo-root #flash { inset: 0; opacity: 0; visibility: hidden; mix-blend-mode: screen; background: radial-gradient(circle at 50% 45%, rgba(190,255,230,.85), rgba(52,229,161,.25) 40%, transparent 70%); }

/* Glass panel shared by 3 and 4 */
#promo-root .panel { position: absolute; border-radius: 30px; padding: 30px 36px; background: rgba(10,16,30,.8);
         border: 2px solid rgba(255,255,255,.14); box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 90px rgba(79,123,255,.2); overflow: hidden; }
#promo-root .panel h4 { font-family: "JetBrains Mono"; font-size: 21px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
            color: rgba(255,255,255,.6); margin-bottom: 18px; }
#promo-root .row { position: relative; display: flex; align-items: center; justify-content: space-between; height: 76px;
       border-top: 1px solid rgba(255,255,255,.09); font-size: 31px; font-weight: 600; }
#promo-root .chip { font-family: "JetBrains Mono"; font-size: 23px; font-weight: 700; padding: 8px 18px; border-radius: 999px;
        border: 2px solid currentColor; white-space: nowrap; }
#promo-root .met { color: var(--met); background: rgba(52,229,161,.12); }
#promo-root .partial { color: var(--partial); background: rgba(242,176,94,.12); }
#promo-root .gap { color: var(--gap); background: rgba(255,122,133,.12); }
#promo-root #p3 { right: 84px; top: 250px; width: 720px; }
#promo-root #beam { left: 0; right: 0; height: 90px; top: 0; opacity: 0;
        background: linear-gradient(180deg, transparent, rgba(47,227,208,.18) 45%, rgba(47,227,208,.5) 50%, rgba(47,227,208,.18) 55%, transparent); }

/* 4 · Depth */
#promo-root #s4h { left: 96px; top: 96px; font-size: 104px; line-height: 1; }
#promo-root #s4h .in { color: var(--met); }
#promo-root .stack { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; letter-spacing: 0; }
#promo-root .stack div { font-family: "JetBrains Mono"; font-size: 36px; font-weight: 700; line-height: 1.2; transform-origin: left center;
             text-shadow: 0 2px 16px rgba(7,11,20,.95); }
#promo-root .stack div::before { content: "+ "; color: var(--met); }
#promo-root #p4 { right: 84px; top: 160px; width: 740px; height: 720px; padding: 0 36px; }
#promo-root #p4::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(transparent, rgba(10,16,30,.97)); }
#promo-root #scroll4 { padding-top: 30px; }
#promo-root .sec { height: 128px; border-top: 1px solid rgba(255,255,255,.09); padding-top: 20px; }
#promo-root .sec.tall { height: 170px; }
#promo-root .sec:first-child { border-top: 0; padding-top: 0; }
#promo-root .lab { font-family: "JetBrains Mono"; font-size: 19px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; }
#promo-root .line { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 30px; font-weight: 600; }
#promo-root .quote { margin-top: 12px; padding-left: 16px; border-left: 4px solid var(--met); font-size: 25px; font-style: italic; color: rgba(255,255,255,.82); }
#promo-root .ringwrap { display: flex; align-items: center; gap: 28px; }
#promo-root .ringnum { position: absolute; inset: 0; display: grid; place-items: center; font-size: 50px; }

/* 5 · End card (built by promo.js but never shown: the act stops at 29.0 s) */
#promo-root #s5c { left: 0; right: 0; top: 330px; display: flex; flex-direction: column; align-items: center; }
#promo-root #logo { position: relative; width: 920px; }
#promo-root #logo img { display: block; width: 100%; }
#promo-root #shine { inset: 0; overflow: hidden;
         -webkit-mask-image: url(../cv-advantage-logo-white.png); mask-image: url(../cv-advantage-logo-white.png);
         -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
#promo-root #sheen { top: 0; bottom: 0; width: 240px; left: 0; opacity: 0;
         background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); }
#promo-root #tag { font-size: 70px; color: var(--met); margin-top: 40px; text-shadow: 0 0 40px rgba(52,229,161,.55), 0 2px 16px rgba(7,11,20,.95); }
#promo-root #tag span { display: inline-block; }
#promo-root #url { font-size: 34px; font-weight: 600; margin-top: 22px; color: #7FF5E8;
       text-shadow: 0 0 12px rgba(7,11,20,1), 0 0 24px rgba(7,11,20,.9); }

/* Captions (hidden on the page: data-nocap) */
#promo-root #caps { left: 0; right: 0; bottom: 56px; text-align: center; }
#promo-root .cap { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; }
#promo-root .cap span { display: inline-block; max-width: 1500px; font-size: 40px; font-weight: 600; line-height: 1.3;
            padding: 12px 26px; border-radius: 14px; background: rgba(7,11,20,.68); }
#promo-root.nocap #caps { display: none; }

/* 4:5 layout */
#promo-root.portrait #s1h { left: 70px; top: 110px; }
#promo-root.portrait #s3 .slam { right: 0; bottom: 640px; padding-bottom: 0; }
#promo-root.portrait #s3 .slam::before { inset: 0 6%; }
#promo-root.portrait #p3 { right: auto; left: 150px; top: 720px; width: 780px; }
#promo-root.portrait #s4h { left: 70px; top: 90px; font-size: 92px; }
#promo-root.portrait .stack { flex-direction: row; flex-wrap: wrap; column-gap: 28px; row-gap: 8px; max-width: 940px; margin-top: 28px; }
#promo-root.portrait .stack div { font-size: 32px; }
#promo-root.portrait #p4 { right: auto; left: 150px; top: 540px; width: 780px; height: 600px; }
#promo-root.portrait #s5c { top: 470px; }
#promo-root.portrait #caps { bottom: 90px; }
#promo-root.portrait .cap span { max-width: 960px; font-size: 42px; }

/* Landing addition: the signature move's live count, under the 5.0s clock */
#promo-root .sorted { margin-top: 22px; font-size: 34px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
          color: rgba(255,255,255,.88); font-variant-numeric: tabular-nums; }

/* Landing addition: the sort scene opens with a question, and "100 CVs" is the answer's subject */
#promo-root #wif { font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: #fff;
          margin-bottom: 18px; text-shadow: 0 0 40px rgba(7,11,20,.95), 0 4px 30px rgba(7,11,20,.9); }
#promo-root #k2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -0.01em;
          text-transform: none; color: var(--met); text-shadow: 0 0 36px rgba(52,229,161,.45), 0 4px 30px rgba(7,11,20,.9); }
#promo-root #s2 .clock { font-size: 280px; }
#promo-root.portrait #wif { font-size: 60px; }
#promo-root.portrait #k2 { font-size: 80px; }