/* The Black Weeks page (job 274 follow-up 1, catalog-web black_weeks.rs): the campaign's layout in the site's look,
   purple its one accent. */
.bw{--bw:#8b5cf6;--bw-soft:rgba(139,92,246,.14)}
/* no site section line here: it ran across the page under the hero (jose, 13 Nov) */
.bw-sec{padding:var(--s4) 0;border-bottom:0}
.bw-hero{padding:var(--s5) var(--s4);border:1px solid var(--hair);border-radius:var(--r);
  background:radial-gradient(120% 140% at 100% 0%,var(--bw-soft),transparent 60%),var(--well)}
.bw-hero h1{margin:.4rem 0 .5rem}
.bw-lead{font-size:var(--t2);color:var(--strong);margin:0 0 .6rem}
.bw-tag{display:inline-block;margin:0;padding:.2rem .6rem;border:1px solid var(--bw);border-radius:999px;color:var(--bw);
  font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase}
.bw-btn{background:var(--bw);border-color:var(--bw)}
.bw-box{padding:var(--s4);border:1px solid var(--hair);border-radius:var(--r);background:var(--well)}
.bw-table td,.bw-table th{white-space:nowrap}
.bw-price{color:var(--bw);font-weight:600}
.bw-badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;background:var(--bw-soft);color:var(--bw);font-weight:600}
.bw-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--s3)}
.bw-card{display:flex;flex-direction:column;gap:.5rem;padding:var(--s4);border:1px solid var(--hair);border-radius:var(--r);background:var(--well)}
.bw-card h2{margin:0;font-size:var(--t3)}
.bw-box h2{margin:.2rem 0 .4rem}
.bw-hero .bw-btn{margin-top:.4rem}
.bw-card .btn{align-self:flex-start;margin-top:auto}
.bw-model{margin:0}
.bw-was,.bw-fine{color:var(--dim);font-size:var(--t-1)}
.bw-code{color:var(--bw);font-family:var(--mono)}
.bw-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}
.bw-end{text-align:center}
.bw-end .bw-acts{justify-content:center}
@media (max-width:640px){.bw-hero,.bw-box,.bw-card{padding:var(--s3)}.bw-table td,.bw-table th{white-space:normal}}

/* More flair (job 274 follow-up 2): a soft glow on the boxes, a stronger purple one on the end.
   The hero (job 274 follow-up 4, jose's code): the GB10 picture is its own background, fading in from the left behind the
   copy (65% wide), with the countdown top right over it. On a phone the copy takes the width and the countdown follows it. */
.bw-hero,.bw-box,.bw-card{box-shadow:0 0 22px rgba(139,92,246,.14)}
.bw-hero--top{position:relative;overflow:hidden;isolation:isolate;min-height:220px;
  border-color:rgba(167,139,250,.45);box-shadow:0 0 30px rgba(139,92,246,.28)}
.bw-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(/assets/hero/bw-gb10.webp) no-repeat calc(100% + 100px) center/auto 115%;
  -webkit-mask-image:linear-gradient(to right,transparent 15%,rgba(0,0,0,.4) 45%,#000 90%);
  mask-image:linear-gradient(to right,transparent 15%,rgba(0,0,0,.4) 45%,#000 90%)}
.bw-hero--top .bw-hero__copy{position:relative;z-index:1;width:65%;max-width:720px;padding:20px 0}
.bw-count{position:absolute;top:24px;right:24px;z-index:3;padding:.6rem .9rem;border:1px solid rgba(167,139,250,.55);
  border-radius:var(--r);background:rgba(8,8,24,.72);backdrop-filter:blur(6px);box-shadow:0 0 18px rgba(139,92,246,.4);text-align:center}
.bw-count[hidden]{display:none}
.bw-count p{margin:0}
.bw-count__head{font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:#c4b5fd}
.bw-count__nums{display:flex;gap:.9rem}
.bw-count__nums span{display:flex;flex-direction:column;font-size:.72rem;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.bw-count__nums b{font-size:1.9rem;line-height:1.1;color:var(--strong);font-variant-numeric:tabular-nums}
.bw-end{border-color:rgba(167,139,250,.6);
  background:radial-gradient(90% 140% at 50% 0%,rgba(139,92,246,.26),transparent 65%),var(--well);
  box-shadow:0 0 34px rgba(139,92,246,.42),inset 0 0 30px rgba(139,92,246,.12)}
@media (max-width:860px){
  .bw-hero--top .bw-hero__copy{width:auto;padding:0}
  .bw-hero__bg{opacity:.45;background-position:right center}
  .bw-count{position:relative;top:auto;right:auto;z-index:1;display:inline-block;margin-top:var(--s3)}}
@media (max-width:420px){.bw-count{padding:.45rem .6rem}.bw-count__nums b{font-size:1.45rem}}