/* Scent work Christmas landing page (2026-10-29). Matches the Meta gift ad:
   moss wrapping paper, clay bow and button, torn paper edge over a real photo. */
:root{--x-clay:#c0622f;--x-clay-d:#a9531f;--x-moss:#4f5a3f}

/* Hero: an inset card like the other page heroes */
html body .x-hero{margin:76px 12px 0;border-radius:28px;overflow:hidden;background:var(--x-moss)}
@media (max-width:760px){html body .x-hero{margin:68px 10px 0;border-radius:22px}}
html body .x-paper{background:var(--x-moss) url('/img/scent/xmas/paper.jpg?v=2') center/max(100%,900px) auto no-repeat;padding:clamp(36px,6vw,72px) 0 clamp(54px,7vw,90px)}
html body .x-kicker{display:block;font-family:var(--font-h);font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#f3e7c9}
html body .x-hero h1{margin:10px 0 0;font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:clamp(44px,8vw,86px);line-height:.95;color:#fff}
html body .x-hero h1 em{font-style:normal;color:#f3d9a4}
html body .x-lede{margin-top:16px;max-width:560px;font-family:var(--font-sub);font-style:italic;font-size:clamp(17px,2vw,21px);line-height:1.5;color:rgba(255,255,255,.9)}
html body .x-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--r-block,26px)}
html body .x-btn{background:var(--x-clay);color:#fff;border:0;border-radius:999px;box-shadow:0 8px 22px rgba(120,52,16,.35)}
html body .x-btn:hover{background:var(--x-clay-d)}
html body .x-btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);border-radius:999px}
@media (max-width:600px){html body .x-ctas .btn{width:100%;justify-content:center}}

html body .x-photo{position:relative;line-height:0}
html body .x-photo > img:first-child{display:block;width:100%;height:clamp(300px,52vw,620px);object-fit:cover;object-position:30% 70%}
html body .x-torn{position:absolute;left:0;right:0;top:-2px;width:100%;height:auto;pointer-events:none}
html body .x-bow{position:absolute;right:clamp(14px,5vw,64px);top:clamp(-10px,-1vw,0px);width:clamp(96px,16vw,190px);height:auto;pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}

/* Three points */
html body .x-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:var(--r-block,26px);max-width:960px}
html body .x-points div{background:#f3f2ec;border-radius:18px;padding:18px;border-top:5px solid var(--x-clay)}
html body .x-points b{display:block;font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:20px;color:var(--charcoal)}
html body .x-points span{display:block;margin-top:6px;font-size:15.5px;line-height:1.5;color:#45493f}
@media (max-width:760px){html body .x-points{grid-template-columns:1fr}}

/* Video beside its words; the video fills its frame */
html body .x-split{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(20px,4vw,48px);align-items:center}
html body .x-video{border-radius:22px;overflow:hidden;box-shadow:0 14px 34px rgba(26,29,24,.18);aspect-ratio:4/5;background:#2d302a}
html body .x-video video{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){html body .x-split{grid-template-columns:1fr}html body .x-video{order:2}}

/* Nose facts on the dark band */
html body .x-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:var(--r-block,26px);max-width:860px}
html body .x-facts div{background:rgba(255,255,255,.07);border-radius:18px;padding:20px}
html body .x-facts b{display:block;font-family:var(--font-h);font-weight:800;font-size:clamp(34px,5vw,48px);line-height:1;color:#fff}
html body .x-facts > div > span{display:block;margin-top:8px;font-size:15.5px;line-height:1.5;color:rgba(254,254,254,.82)}
@media (max-width:600px){html body .x-facts{grid-template-columns:1fr}}

/* Closing card: photo with the ask on moss paper */
html body .x-close{padding:var(--r-sec,64px) 0}
html body .x-close .container{display:grid;grid-template-columns:1fr 1fr;border-radius:28px;overflow:hidden;padding:0;box-shadow:0 14px 34px rgba(26,29,24,.16)}
html body .x-close-photo{display:block;width:100%;height:100%;min-height:320px;object-fit:cover}
html body .x-close-text{background:var(--x-moss) url('/img/scent/xmas/paper.jpg?v=2') center/max(100%,900px) auto no-repeat;padding:clamp(26px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
html body .x-close h2{font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:clamp(32px,4.5vw,48px);line-height:1;color:#fff;margin:0}
html body .x-close h2 em{font-style:normal;color:#f3d9a4}
html body .x-close p{margin:14px 0 var(--r-block,26px);font-family:var(--font-sub);font-style:italic;font-size:17px;line-height:1.5;color:rgba(255,255,255,.9)}
html body .x-close .btn{align-self:flex-start}
@media (max-width:760px){
  html body .x-close .container{grid-template-columns:1fr;margin:0 10px;width:auto}
  html body .x-close-photo{min-height:0;aspect-ratio:4/3}
  html body .x-close .btn{align-self:stretch;justify-content:center}
}
@media (prefers-reduced-motion:reduce){html body .x-video video{display:none}html body .x-video{background:url('/img/scent/xmas/every-dog.jpg') center/cover}}
html body .x-close > .container{padding:0!important;max-width:1080px;margin:0 auto}
@media (max-width:760px){html body .x-close > .container{margin:0 10px!important;width:auto!important;max-width:none}}

/* Gift cards, right under the hero */
html body .x-gift{padding:22px 0 0}
html body .x-gift .container{position:relative;background:#f3e7c9;border-radius:24px;padding:24px 20px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;max-width:1080px}
html body .x-gift-bow{position:absolute;top:-22px;right:18px;width:78px;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
html body .x-gift .x-kicker{color:var(--x-clay)}
html body .x-gift h2{margin:6px 0 0;font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:clamp(28px,4vw,40px);line-height:1;color:var(--charcoal)}
html body .x-gift h2 em{font-style:normal;color:var(--x-moss)}
html body .x-gift p{margin-top:10px;font-family:var(--font-sub);font-style:italic;font-size:16px;line-height:1.5;color:#45493f;max-width:460px}
html body .x-amts{display:grid;grid-template-columns:repeat(2,minmax(110px,1fr));gap:10px}
html body .x-amt{display:grid;place-items:center;min-height:56px;padding:0 18px;border-radius:999px;background:var(--x-clay);color:#fff;text-decoration:none;
  font-family:var(--font-h);font-weight:800;font-size:22px;letter-spacing:.04em;box-shadow:0 6px 16px rgba(120,52,16,.28);transition:background .2s ease}
html body .x-amt:hover{background:var(--x-clay-d)}
@media (max-width:760px){
  html body .x-gift{padding:20px 10px 0}
  html body .x-gift .container{grid-template-columns:1fr;margin:0}
  html body .x-gift-bow{width:64px;top:-18px;right:14px}
}

/* Gift card asks lower on the page */
html body .x-close .x-close-gift{margin-top:12px;align-self:flex-start}
html body .x-mid-gift{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:var(--r-block,26px);max-width:720px;
  background:#f3e7c9;border-radius:18px;padding:16px 18px}
html body .x-mid-gift span{font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:20px;color:var(--charcoal)}
@media (max-width:760px){html body .x-close .x-close-gift{align-self:stretch;justify-content:center}html body .x-mid-gift .btn{width:100%;justify-content:center}}

/* Christmas deal: the $500 card covers Intro to Nose */
html body .x-gift .container{grid-template-columns:1fr}
html body .x-deal{background:#fff;border-radius:18px;padding:20px;border:2px solid var(--x-clay);display:flex;flex-direction:column;gap:6px;max-width:620px}
html body .x-deal-tag{align-self:flex-start;background:var(--x-clay);color:#fff;border-radius:999px;padding:5px 12px;font-family:var(--font-h);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
html body .x-deal > b{font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1.05;color:var(--charcoal);margin-top:4px}
html body .x-deal p{margin:0;font-family:var(--font-body);font-style:normal;font-size:15.5px;line-height:1.5;color:#45493f}
html body .x-deal-price{font-family:var(--font-h);font-weight:800;margin:4px 0 8px}
html body .x-deal-price s{font-size:22px;color:#8a8d82}
html body .x-deal-price span{font-size:40px;color:var(--x-clay);margin-left:6px}
html body .x-deal .btn{align-self:flex-start}
html body .x-amts-label{font-family:var(--font-h);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6b6f63}
html body .x-amts{grid-template-columns:repeat(4,minmax(90px,1fr));max-width:620px}
@media (max-width:760px){html body .x-amts{grid-template-columns:repeat(2,1fr)}html body .x-deal .btn{align-self:stretch;justify-content:center}}

/* Wide screens: words and the deal on the left, amounts on the right, no empty half */
@media (min-width:900px){
  html body .x-gift .container{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"text amts" "deal amts";column-gap:32px;align-items:start}
  html body .x-gift-text{grid-area:text}
  html body .x-deal{grid-area:deal;max-width:none}
  html body .x-amts-label{display:none}
  html body .x-amts{grid-area:amts;align-self:center;grid-template-columns:1fr 1fr;max-width:none;gap:14px}
  html body .x-amt{min-height:88px;font-size:30px;border-radius:22px}
}

/* The hero paper tears itself (2026-10-30). The old rip strip carried its own
   smaller copy of the paper, which left a seam and a band of tiny paws. Now the
   hero paper runs down over the photo and is cut by the rip shape, with the
   white paper fibers laid on top. --rip is the rip's height: 8.64% of the
   hero's width (the rip image is 1400 x 121). */
html body .x-hero{--rip:calc((100vw - 24px) * .0864)}
@media (max-width:760px){html body .x-hero{--rip:calc((100vw - 20px) * .0864)}}
html body .x-paper{position:relative;z-index:2;
  padding-bottom:calc(clamp(54px,7vw,90px) + var(--rip));margin-bottom:calc(-1 * var(--rip));
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - var(--rip) + 4px) no-repeat,url('/img/scent/xmas/rip-mask.png') bottom/100% auto no-repeat;
  mask:linear-gradient(#000,#000) top/100% calc(100% - var(--rip) + 4px) no-repeat,url('/img/scent/xmas/rip-mask.png') bottom/100% auto no-repeat}
html body .x-paper::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--rip);pointer-events:none;
  background:url('/img/scent/xmas/rip-fringe.png') bottom/100% auto no-repeat}
html body .x-torn{display:none}
html body .x-bow{z-index:3;top:calc(var(--rip) * .2)}