/* Black Friday 2026 page (/black-friday.html, DEC-MON-23). Dark only and scoped to html.bf-page, so the light
   landing never inherits it. One hot gradient (gold → orange → red) carries the sale; everything else stays
   near-black, white and grey. The landing header and footer are re-coloured here, not re-built. */
.bf-page{
  color-scheme:dark;
  --bf-bg:#07070a;
  --bf-panel:rgba(255,255,255,.045);
  --bf-line:rgba(255,255,255,.1);
  --bf-text:#f5f5f7;
  --bf-muted:#a8a8b3;
  --bf-gold:#ffc53d;
  --bf-orange:#ff7a1a;
  --bf-red:#ff3355;
  --bf-hot:linear-gradient(100deg,var(--bf-gold) 0%,var(--bf-orange) 48%,var(--bf-red) 100%);
  background:var(--bf-bg);
  color:var(--bf-text);
}
.bf-page body{background:var(--bf-bg);color:var(--bf-text)}
.bf-page a:focus-visible,.bf-page button:focus-visible,.bf-page summary:focus-visible{outline:3px solid var(--bf-gold);outline-offset:4px}

/* State switch: build.py writes the state for the build time, black-friday.js keeps it right in the browser. */
.bf-page[data-bf-state="pre"] [data-bf-show]:not([data-bf-show~="pre"]),
.bf-page[data-bf-state="live"] [data-bf-show]:not([data-bf-show~="live"]),
.bf-page[data-bf-state="ended"] [data-bf-show]:not([data-bf-show~="ended"]){display:none!important}
.bf-page [hidden]{display:none!important}

/* Landing header and footer on the dark page. */
.bf-page .site-header{background:rgba(7,7,10,.72);box-shadow:0 1px 0 var(--bf-line)}
.bf-page .wordmark,.bf-page .nav-links,.bf-page .menu-toggle{color:var(--bf-text)}
.bf-page .nav-links a:hover{background:rgba(255,255,255,.08)}
.bf-page .nav-links a:last-child,.bf-page .menu-toggle{border-color:rgba(255,255,255,.4)}
.bf-page .site-footer{background:var(--bf-bg);box-shadow:0 -1px 0 var(--bf-line)}
.bf-page .site-footer p,.bf-page .site-footer small{color:var(--bf-muted)}
.bf-page .site-footer nav,.bf-page .site-footer .wordmark{color:var(--bf-text)}
@media(max-width:700px){.bf-page .nav-links{background:#111116;box-shadow:0 20px 40px rgba(0,0,0,.6),0 0 0 1px var(--bf-line)}}

.bf-wrap{width:min(100% - 32px,1120px);margin-inline:auto}

/* Hero */
.bf-hero{position:relative;overflow:hidden;padding:88px 0 96px;text-align:center;isolation:isolate}
.bf-hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 0%,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 30%,#000 0%,transparent 75%)}
.bf-glow{position:absolute;z-index:-1;left:50%;top:-180px;width:min(1100px,140vw);height:760px;transform:translateX(-50%);background:radial-gradient(40% 45% at 35% 45%,rgba(255,122,26,.34),transparent 70%),radial-gradient(38% 42% at 65% 50%,rgba(255,51,85,.28),transparent 70%),radial-gradient(30% 30% at 50% 20%,rgba(255,197,61,.22),transparent 70%);filter:blur(20px);animation:bf-breathe 9s ease-in-out infinite alternate}
@keyframes bf-breathe{from{opacity:.75;transform:translateX(-50%) scale(1)}to{opacity:1;transform:translateX(-50%) scale(1.06)}}

.bf-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:7px 16px 7px 12px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--bf-line);font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--bf-text)}
.bf-pulse{width:8px;height:8px;border-radius:50%;background:var(--bf-red);box-shadow:0 0 0 0 rgba(255,51,85,.6);animation:bf-pulse 1.8s ease-out infinite}
@keyframes bf-pulse{to{box-shadow:0 0 0 10px rgba(255,51,85,0)}}

.bf-hero h1{margin:0 auto;max-width:15ch;font-size:clamp(46px,9.2vw,124px);line-height:.92;font-weight:850;letter-spacing:-.055em}
.bf-title-line{display:block}
.bf-title-hot{background:var(--bf-hot);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.bf-lede{max-width:560px;margin:28px auto 0;color:var(--bf-muted);font-size:clamp(17px,2vw,20px);line-height:1.5}

.bf-price{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin:44px 0 0}
.bf-was{color:var(--bf-muted);font-size:clamp(26px,4vw,40px);font-weight:600;letter-spacing:-.02em;text-decoration-thickness:3px;text-decoration-color:var(--bf-red)}
.bf-now{font-size:clamp(68px,12vw,148px);line-height:.9;font-weight:850;letter-spacing:-.06em;font-variant-numeric:tabular-nums;background:var(--bf-hot);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 10px 40px rgba(255,90,40,.35))}
.bf-off{padding:8px 14px;border-radius:12px;background:var(--bf-red);color:#fff;font-size:clamp(20px,2.6vw,28px);font-weight:800;letter-spacing:-.02em;transform:rotate(-6deg);box-shadow:0 10px 30px rgba(255,51,85,.4)}
.bf-terms{margin:18px 0 0;color:var(--bf-text);font-size:15px;font-weight:550}

/* Countdown */
.bf-clock{margin:48px auto 0}
.bf-clock-label{margin:0 0 14px;color:var(--bf-muted);font-size:13px;font-weight:650;letter-spacing:.14em;text-transform:uppercase}
.bf-tiles{display:flex;justify-content:center;gap:clamp(8px,1.6vw,16px)}
.bf-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(70px,15vw,124px);aspect-ratio:1/1.08;border-radius:clamp(14px,2vw,22px);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 50px -20px rgba(0,0,0,.8);overflow:hidden}
.bf-tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.45);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.bf-num{font-size:clamp(34px,7vw,64px);line-height:1;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff}
.bf-num.is-tick{animation:bf-tick .45s cubic-bezier(.2,.8,.2,1)}
@keyframes bf-tick{from{transform:translateY(-28%);opacity:.2}to{transform:none;opacity:1}}
.bf-unit{margin-top:6px;color:var(--bf-muted);font-size:clamp(11px,1.4vw,13px);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.bf-clock-when{margin:14px 0 0;color:var(--bf-muted);font-size:14px}

/* Calls to action */
.bf-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px}
.bf-button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:16px;font-size:18px;font-weight:700;letter-spacing:-.01em;transition:transform .15s ease,box-shadow .15s ease}
.bf-button:hover{transform:translateY(-2px)}
.bf-button-hot{background:var(--bf-hot);color:#14070a;box-shadow:0 14px 40px -10px rgba(255,90,40,.7),inset 0 1px 0 rgba(255,255,255,.45)}
.bf-button-hot:hover{box-shadow:0 18px 50px -10px rgba(255,90,40,.85),inset 0 1px 0 rgba(255,255,255,.45)}
.bf-button-ghost{background:rgba(255,255,255,.06);color:var(--bf-text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.bf-cta-note{max-width:460px;margin:0;color:var(--bf-muted);font-size:14px}
.bf-cta-note a{color:var(--bf-text);text-decoration:underline;text-underline-offset:3px}

/* Code */
.bf-code{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:8px 8px 8px 16px;border-radius:14px;border:1.5px dashed rgba(255,197,61,.55);background:rgba(255,197,61,.06)}
.bf-code-label{color:var(--bf-muted);font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.bf-code-value{color:var(--bf-gold);font:700 17px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.bf-copy{min-height:36px;min-width:72px;padding:0 14px;border:0;border-radius:10px;background:rgba(255,255,255,.1);color:var(--bf-text);font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.bf-copy:hover{background:rgba(255,255,255,.16)}
.bf-copy.is-done{background:var(--bf-gold);color:#14070a}

/* Sections */
.bf-section{padding:88px 0;border-top:1px solid var(--bf-line)}
.bf-kicker{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bf-orange)}
.bf-section h2{margin:0 0 40px;font-size:clamp(34px,5vw,56px);line-height:1;font-weight:800;letter-spacing:-.045em}

.bf-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bf-card{grid-column:span 2;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:var(--bf-panel);box-shadow:inset 0 0 0 1px var(--bf-line);transition:transform .2s ease,box-shadow .2s ease}
.bf-card:nth-child(4),.bf-card:nth-child(5){grid-column:span 3}
.bf-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,122,26,.5),0 24px 50px -24px rgba(255,90,40,.45)}
.bf-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center;background:#111}
.bf-card-body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 22px}
.bf-card-body strong{font-size:18px;letter-spacing:-.01em}
.bf-card-body span{color:var(--bf-muted);font-size:15px}

.bf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none;counter-reset:bf}
.bf-steps li{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px 24px;border-radius:20px;background:var(--bf-panel);box-shadow:inset 0 0 0 1px var(--bf-line);counter-increment:bf}
.bf-steps li::before{content:counter(bf);display:grid;place-items:center;width:38px;height:38px;margin-bottom:8px;border-radius:12px;background:var(--bf-hot);color:#14070a;font-weight:800}
.bf-steps strong{font-size:18px}
.bf-steps span{color:var(--bf-muted);font-size:15px}

.bf-faq{max-width:780px}
.bf-faq details{border-bottom:1px solid var(--bf-line)}
.bf-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;font-size:18px;font-weight:650;cursor:pointer;list-style:none}
.bf-faq summary::-webkit-details-marker{display:none}
.bf-faq summary::after{content:"+";flex:none;color:var(--bf-orange);font-size:26px;font-weight:400;line-height:1;transition:transform .2s ease}
.bf-faq details[open] summary::after{transform:rotate(45deg)}
.bf-faq p{margin:0 0 20px;color:var(--bf-muted);font-size:16px}
.bf-faq a,.bf-fine a{color:var(--bf-text);text-decoration:underline;text-underline-offset:3px}

.bf-closing{text-align:center;background:radial-gradient(60% 80% at 50% 100%,rgba(255,90,40,.18),transparent 70%)}
.bf-closing h2{margin-bottom:0}
.bf-fine{max-width:640px;margin:36px auto 0;color:var(--bf-muted);font-size:13px}

@media(max-width:900px){
  .bf-cards{grid-template-columns:1fr 1fr}
  .bf-card,.bf-card:nth-child(4),.bf-card:nth-child(5){grid-column:span 1}
  .bf-card:nth-child(5){grid-column:1/-1}
  .bf-steps{grid-template-columns:1fr}
}
@media(max-width:600px){
  .bf-hero{padding:56px 0 64px}
  .bf-section{padding:64px 0}
  .bf-cards{grid-template-columns:1fr}
  .bf-card:nth-child(5){grid-column:auto}
  .bf-button{width:100%;max-width:360px}
  .bf-code{flex-wrap:wrap;justify-content:center;padding:10px 12px}
  .bf-eyebrow{font-size:11.5px;letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce){
  .bf-glow,.bf-pulse,.bf-num.is-tick{animation:none}
  .bf-button,.bf-card{transition:none}
  .bf-button:hover,.bf-card:hover{transform:none}
}

/* landing.css colours headings and the footer credit for its light page. */
.bf-page h1,.bf-page h2,.bf-page h3{color:var(--bf-text)}
.bf-page .site-footer a,.bf-page .footer-credit{color:var(--bf-text)}
.bf-card img.bf-card-fit{object-fit:contain;background:#fff}