/* Black Friday sale page (11-30 November 2026), from the Offers mockup: the
   sale's code with before-and-after prices from the live catalog. */
.offers-page .page-intro { display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:65px; padding:28px 0 30px; }
.offers-page .page-intro h1 { font-size:clamp(39px,4vw,55px); }
.offers-page .page-intro .lede { margin:0 0 4px; font-size:16px; line-height:1.65; }
.offer-notice { margin:22px 0 0; padding:13px 16px; border:1px solid var(--hair); border-radius:4px; background:var(--white); font-size:14px; line-height:1.6; }
.offer-notice a { color:var(--teal); }
.offer-cards { display:grid; grid-template-columns:1.2fr 1fr; gap:16px; margin-bottom:28px; }
.offer-card { padding:24px; border:1px solid var(--hair); border-radius:4px; background:var(--white); display:flex; flex-direction:column; }
.offer-featured { border-color:var(--ink); box-shadow:0 14px 40px rgba(21,24,28,.10); }
.offer-when { color:var(--teal); font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
.offer-card h2 { font:400 clamp(38px,3.6vw,52px)/1.05 var(--serif); letter-spacing:-.035em; margin:12px 0 16px; }
.offer-card h2#included-title { font-size:clamp(28px,2.6vw,36px); }
.offer-card h3 { font-size:13px; font-weight:650; margin:4px 0 4px; }
.offer-card > p { color:var(--muted); font-size:13px; line-height:1.65; }
.offer-card > p + h3 { margin-top:14px; }
.offer-featured h2#bf-title { font-size:clamp(26px,2.4vw,32px); margin-bottom:6px; }
/* A sale sticker per plan: the price with the code, big, once the catalog
   confirms it; the discount alone until then. */
.splash-plans { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:4px 0 18px; }
.splash-plan { display:flex; flex-direction:column; align-items:center; text-align:center; padding:12px 4px 0; border-top:1px solid var(--hair); }
.splash-plan h3 { font:400 26px/1.1 var(--serif); letter-spacing:-.02em; margin:0 0 10px; }
.splash-plan h3 small { display:block; margin-top:5px; color:var(--muted); font:650 10px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.splash { --size:clamp(124px,14vw,164px); width:var(--size); height:var(--size); margin:0; display:grid; place-content:center; gap:5px; color:#fff; background:var(--splash,#b83b24); transform:rotate(-8deg);
  clip-path:polygon(50.0% 0.0%,55.7% 6.4%,62.9% 1.7%,66.8% 9.3%,75.0% 6.7%,76.8% 15.1%,85.4% 14.6%,84.9% 23.2%,93.3% 25.0%,90.7% 33.2%,98.3% 37.1%,93.6% 44.3%,100.0% 50.0%,93.6% 55.7%,98.3% 62.9%,90.7% 66.8%,93.3% 75.0%,84.9% 76.8%,85.4% 85.4%,76.8% 84.9%,75.0% 93.3%,66.8% 90.7%,62.9% 98.3%,55.7% 93.6%,50.0% 100.0%,44.3% 93.6%,37.1% 98.3%,33.2% 90.7%,25.0% 93.3%,23.2% 84.9%,14.6% 85.4%,15.1% 76.8%,6.7% 75.0%,9.3% 66.8%,1.7% 62.9%,6.4% 55.7%,0.0% 50.0%,6.4% 44.3%,1.7% 37.1%,9.3% 33.2%,6.7% 25.0%,15.1% 23.2%,14.6% 14.6%,23.2% 15.1%,25.0% 6.7%,33.2% 9.3%,37.1% 1.7%,44.3% 6.4%); }
.splash-off { font:750 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.splash-price { font:400 clamp(30px,3.2vw,40px)/1 var(--serif); letter-spacing:-.03em; }
.splash:not(:has(.splash-price:not([hidden]))) .splash-off { font:400 clamp(25px,3vw,36px)/1.05 var(--serif); letter-spacing:-.02em; text-transform:none; }
.splash-list { margin:14px 0 14px; color:var(--muted); font-size:13px; }
.splash-list::before { content:"List price "; }
/* The list price is struck through only beside a confirmed sale price. */
.splash-plan:has(.splash-price:not([hidden])) .list-price { text-decoration:line-through; }
.splash-plan .button { min-height:40px; margin-top:auto; padding-inline:16px; font-size:12px; white-space:nowrap; }
@media (prefers-reduced-motion:no-preference) {
  .splash { animation:splash-in .55s cubic-bezier(.2,1.5,.45,1) both; }
  .splash-plan + .splash-plan .splash { animation-delay:.12s; }
  @keyframes splash-in { from { opacity:0; transform:rotate(-40deg) scale(.55); } to { opacity:1; transform:rotate(-8deg) scale(1); } }
}
.offer-code { font-size:13px; margin-top:4px; }
.offer-code code { font-size:14px; font-weight:650; padding:3px 8px; border:1px dashed var(--teal); border-radius:4px; color:var(--teal); background:var(--wash); }
.offer-small { color:var(--muted); font-size:11px; margin-top:8px; }
.offer-small a { color:var(--teal); }
.offer-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:auto; padding-top:18px; }
.offer-actions .button { min-height:40px; font-size:12px; }
.offer-how { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:65px; padding:30px 0; border-top:1px solid var(--hair); }
.offer-how .step-list { margin:0; padding:0; list-style:none; }
.offer-terms { padding:26px 0; border-top:1px solid var(--hair); }
.offer-terms h2 { font:400 24px/1.2 var(--serif); margin-bottom:10px; }
.offer-terms ul { margin:0; padding-left:18px; color:var(--muted); font-size:12px; line-height:1.75; }
.offer-terms a { color:var(--teal); }
@media (max-width:1050px) { .offers-page .page-intro, .offer-how { column-gap:35px; } }
@media (max-width:760px) { .offer-cards, .offers-page .page-intro, .offer-how { grid-template-columns:1fr; gap:20px; } }