/*
 * Black Friday landing (/black-friday/), page-black-friday.php. Loaded only on
 * that page.
 *
 *   1. Page-only font faces: Fira Sans Condensed 700/800 and Roboto Mono 500,
 *      which the design uses and fonts.css does not carry (same Google woff2
 *      files, self-hosted, latin + latin-ext). Kept out of fonts.css so pages
 *      that already ask for 700/800 keep rendering as they do today.
 *   2. The design's helmet <style>, carried as written: keyframes, reveal,
 *      and the responsive layer (>=1280 none, <=1279, <=1023, <=767, <=400).
 *      Dropped: the base resets tokens.css already provides (box-sizing,
 *      body, fonts, ::selection, link colours, .grain::after) and one footer
 *      link rule (the footer is global and keeps its own responsive layer).
 *   3. style-hover from the design, as classes.
 */

/* 1. Fonts */
@font-face {
	font-family: 'Fira Sans Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/fira-sans-condensed-700-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Fira Sans Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/fira-sans-condensed-700-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fira Sans Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url(../fonts/fira-sans-condensed-800-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Fira Sans Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url(../fonts/fira-sans-condensed-800-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/roboto-mono-500-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/roboto-mono-500-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Design helmet */
@keyframes rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes drop{ from{ opacity:0; transform:translateY(-40px); } to{ opacity:1; transform:none; } }
@keyframes glide{ from{ opacity:0; transform:translate(var(--fx),var(--fy)); } 20%{ opacity:1; } to{ opacity:1; transform:none; } }
@keyframes popIn{ 0%{ opacity:0; transform:scale(.6); } 70%{ opacity:1; transform:scale(1.06); } 100%{ opacity:1; transform:none; } }
@keyframes typeIn{ from{ max-width:0; } to{ max-width:11ch; } }
@keyframes swapOut{ from{ opacity:1; } to{ opacity:0; transform:translateY(-10px); filter:blur(3px); } }
@keyframes mqL{ to{ transform:translateX(-50%); } } @keyframes mqR{ from{ transform:translateX(-50%); } to{ transform:none; } }
@keyframes bubIn{ 0%{ opacity:0; transform:scale(.55) rotate(-4deg); } 65%{ opacity:1; transform:scale(1.06) rotate(1deg); } 100%{ opacity:1; transform:none; } }
@keyframes bubGrow{ from{ opacity:0; transform:translateX(40px) scale(.2); } to{ opacity:1; transform:none; } } @keyframes bubShrink{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateX(40px) scale(.2); } } @keyframes bubOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateX(-160px) rotate(-12deg); } }
@keyframes shakeA{ 0%,100%{ transform:none; } 20%{ transform:rotate(-6deg); } 40%{ transform:rotate(5deg); } 60%{ transform:rotate(-3deg); } 80%{ transform:rotate(2deg); } }
@keyframes shakeB{ 0%,100%{ transform:none; } 20%{ transform:rotate(-6deg); } 40%{ transform:rotate(5deg); } 60%{ transform:rotate(-3deg); } 80%{ transform:rotate(2deg); } }
@keyframes pumpA{ 0%,100%{ transform:none; } 35%{ transform:translateY(-22px) rotate(-3deg); } 60%{ transform:translateY(-4px) rotate(1deg); } }
@keyframes pumpB{ 0%,100%{ transform:none; } 35%{ transform:translateY(-22px) rotate(-3deg); } 60%{ transform:translateY(-4px) rotate(1deg); } }
[data-rev]{ opacity:0; } .hp-on{ animation:rise .8s cubic-bezier(.16,1,.3,1) both; }
.drop.hp-on{ animation-name:drop; } .cur.hp-on{ animation:glide 1s cubic-bezier(.16,1,.3,1) both; } .pop.hp-on{ animation:popIn .45s cubic-bezier(.34,1.56,.64,1) both; }
.type-in{ display:inline-block; overflow:hidden; vertical-align:bottom; } .type-in.hp-on{ animation:typeIn .9s steps(11) .4s both; opacity:1; }
.swap-out{ opacity:1 !important; } .swap-out.hp-on{ animation:swapOut .5s ease both; } .swap-in.hp-on{ animation-duration:.7s; }
.mq-l{ animation:mqL 60s linear infinite; } .mq-r{ animation:mqR 60s linear infinite; }
@media (max-width:767px){ .bf-ft-pixel{ display:none !important; } .bf-ft-navi{ left:50% !important; right:auto !important; bottom:-10px !important; width:min(560px,100vw) !important; transform:translateX(-50%) !important; animation:none !important; opacity:1 !important; } } @media (max-width:1279px){ .rsp-page{ min-width:0 !important; } .rsp-sec,.rsp-hero{ padding-left:28px !important; padding-right:28px !important; } .rsp-tiles6{ grid-template-columns:repeat(3,1fr) !important; } .rsp-tiles5{ grid-template-columns:repeat(3,1fr) !important; } .rsp-wide{ transform:scale(.85); transform-origin:top center; margin-bottom:-80px; } }
@media (max-width:1023px){ .rsp-bento{ grid-template-columns:1fr !important; } .rsp-bento > div{ grid-column:auto !important; } .rsp-tiles3,.rsp-tiles4{ grid-template-columns:1fr !important; } .rsp-nw{ white-space:normal !important; } .rsp-2col{ grid-template-columns:1fr !important; gap:44px !important; } .rsp-2col > *{ max-width:100%; } .rsp-wide{ transform:scale(.68); margin-bottom:-170px; } .rsp-art{ width:640px !important; } .rsp-bub{ left:24px !important; top:40px !important; width:340px !important; } }
@media (max-width:767px){ .rsp-sec,.rsp-hero{ padding-left:16px !important; padding-right:16px !important; }
 .rsp-stage{ height:auto !important; display:flex; flex-direction:column; align-items:center; padding-top:36px; } .rsp-bub{ position:relative !important; left:auto !important; top:auto !important; width:min(340px,92vw) !important; margin-bottom:-10px; } .rsp-tail{ right:auto !important; left:60% !important; top:auto !important; bottom:-46px; transform:rotate(90deg); }
 .rsp-art{ position:relative !important; right:auto !important; width:118% !important; margin-left:8%; } .rsp-tiles6{ grid-template-columns:repeat(2,1fr) !important; } .rsp-tiles5{ grid-template-columns:1fr 1fr !important; } .rsp-steps{ grid-template-columns:repeat(3,1fr) !important; row-gap:18px !important; } .rsp-wide{ transform:scale(.4); margin-bottom:-320px; width:1000px !important; } [data-mascot]{ display:none; } }
@media (max-width:400px){ .bf-agents{ grid-template-columns:1fr !important; } } @media (max-width:767px){ .bf-rated{ flex-direction:column !important; gap:8px !important; text-align:center; } }
@media (max-width:767px){ .rsp-bento > div{ padding:26px 20px !important; } .rsp-2col > *{ min-width:0 !important; } .bf-wfrow{ align-items:flex-start !important; flex-wrap:wrap !important; gap:8px 12px !important; padding:14px !important; } .bf-wfrow > div{ flex:1 1 calc(100% - 46px) !important; } .bf-wfrow > span:nth-of-type(1){ margin-left:44px; } .bf-approve{ white-space:normal !important; align-items:flex-start !important; } .bf-approve > span{ margin-top:5px; flex-shrink:0; } }
@media (prefers-reduced-motion: reduce){ [data-rev]{ opacity:1 !important; } *{ animation:none !important; transition:none !important; } .swap-out{ display:none; } .type-in{ max-width:none; } }
@keyframes bfMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){[style*="bfMarq"]{animation:none !important;}} @media (max-width:767px){ .rsp-pill{ white-space:normal !important; max-width:100%; text-align:left; line-height:1.3; font-size:16px !important; } #top-hero{ padding-top:140px !important; } .rsp-sec{ padding-top:76px !important; padding-bottom:76px !important; } #final.rsp-sec{ padding-bottom:0 !important; } .rsp-hero h1, .rsp-sec h2{ text-wrap:balance; } }

/* 3. Hovers (style-hover in the design) */
.bf-btn-violet:hover { background: #8a7af5 !important; }
.bf-copy:hover { background: rgba(255,255,255,0.16) !important; }
.bf-connector:hover { background: #f4f0fb !important; color: #16042E !important; }

/* 4. Responsive additions (Oct 2026, after the phone/tablet audit)
 * - Between 1024 and 1439 the bubble's desktop position (50% - 240px) runs
 *   its tail into Glitch's face, which sits ~446px in from the stage's right
 *   edge. Hold the bubble (400px + 60px tail) clear of it; at 1440+ the two
 *   formulas meet, so wide screens are unchanged.
 * - Phones: the URL field and the copy buttons get a 44px tap height. */
@media (min-width:1024px) and (max-width:1439px){ .rsp-bub{ left:max(0px, min(calc(50% - 240px), calc(100% - 916px))) !important; } }
@media (max-width:767px){ .bf-copy{ min-height:44px; } }