/* ============================================================
   /buy — standalone campaign landing page
   Scoped to .buy-* so the rest of the site remains unchanged.
   ============================================================ */
.buy-shell{
  min-height:100vh;
  padding:64px 120px;
  background:
    radial-gradient(circle at 50% 8%,rgba(255,255,255,.28),transparent 34rem),
    var(--paper);
  color:var(--ink);
}
.buy-page{
  width:min(100%,1000px);
  margin-inline:auto;
  overflow:hidden;
  background:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}
.buy-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding:32px 64px;
  background:var(--ink-3);
}
.buy-stamp{
  border:1px solid var(--red);
  padding:7px 14px;
  color:var(--red);
  font-family:var(--stamp);
  font-size:14px;
  line-height:14px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  transform:rotate(-2deg);
}
.buy-hero__logo{width:260px;height:200px;object-fit:contain}
.buy-hero__title{
  color:var(--paper-2);
  font-family:var(--display);
  font-size:24px;
  font-weight:900;
  line-height:.95;
  letter-spacing:-.01em;
  text-align:center;
  text-transform:uppercase;
}
.buy-hero__title span{color:var(--red-glow)}
.buy-trailer{
  position:relative;
  width:100%;
  height:380px;
  overflow:hidden;
  border:1px solid var(--paper-3);
  border-radius:12px;
  background:#120d0b;
}
.buy-trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.buy-availability{
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #288f47;
  padding:12px;
  background:rgba(92,255,157,.16);
  color:#fff;
  font-family:var(--mono);
  font-size:14px;
  font-weight:400;
  line-height:16px;
  text-transform:uppercase;
}
.buy-availability span{width:7px;height:7px;border-radius:50%;background:#5cff9d;box-shadow:0 0 8px rgba(92,255,157,.75)}
.buy-section{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:32px 64px;
  border-top:1px solid var(--paper-2);
  background:#fff;
}
.buy-section__intro{display:flex;flex-direction:column;gap:12px}
.buy-section__title{
  color:var(--red);
  font-family:var(--display);
  font-size:32px;
  font-weight:900;
  line-height:.86;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.buy-section__intro p,
.buy-section__warning{
  max-width:676px;
  color:var(--ink-4);
  font-family:var(--mono);
  font-size:14px;
  font-weight:400;
  line-height:1.4;
}
.buy-section__warning{color:var(--red-deep);font-weight:500}
.buy-platforms{display:flex;flex-direction:column;gap:12px}
.buy-platform{
  display:flex;
  min-height:66px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1.5px solid var(--paper-3);
  border-radius:12px;
  padding:13px 14px;
  background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.buy-platform:hover{border-color:var(--red);box-shadow:0 8px 18px rgba(44,33,29,.12);transform:translateY(-2px)}
/* Not available yet. Matches .buy__item--shut on /organic-intelligence so the
   two pages say "not yet" the same way. It is a div, so there is no hover or
   focus state to suppress. */
.buy-platform--soon{
  border-style:dashed;
  border-color:rgba(36,26,18,.3);
  background-image:repeating-linear-gradient(-45deg,rgba(36,26,18,.05) 0 6px,transparent 6px 12px);
}
.buy-platform--soon .buy-platform__icon{filter:grayscale(1) contrast(.95);opacity:.62}
.buy-platform--soon .buy-platform__heading strong,
.buy-platform--soon .buy-platform__note{color:rgba(16,12,10,.55)}
/* The YouTube mark is a rounded rectangle already; cover+radius would clip
   its corners off, so it opts out of both. */
.buy-platform__icon--yt{border-radius:0;object-fit:contain}
.buy-platform__identity{display:flex;min-width:0;align-items:center;gap:16px}
.buy-platform__icon{width:38px;height:38px;flex:none;border-radius:9px;object-fit:cover}
.buy-platform__copy{display:flex;min-width:0;flex-direction:column;gap:4px}
.buy-platform__heading{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.buy-platform__heading strong{color:var(--red-deep);font-family:var(--mono);font-size:16px;line-height:18px}
.buy-platform__badge{
  border:1px solid var(--red);
  padding:4px 8px;
  background:var(--red-glow);
  color:var(--paper);
  font-family:var(--stamp);
  font-size:11px;
  line-height:1;
  letter-spacing:.15em;
  text-transform:uppercase;
  transform:rotate(-2deg);
}
.buy-platform__note{color:rgba(16,12,10,.7);font-family:var(--mono);font-size:14px;line-height:16px}
.buy-platform__chevron{flex:none;color:var(--red);transition:transform .2s var(--ease)}
.buy-platform:hover .buy-platform__chevron{transform:translateX(4px)}
.buy-provider-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border:1.5px solid var(--paper-3);
  border-radius:10px;
  padding:8px;
  background:#fff;
  font-family:var(--mono);
}
.buy-provider-list li{
  display:flex;
  min-height:44px;
  align-items:center;
  border-radius:6px;
  padding:8px 12px;
  color:var(--ink);
  font-size:12px;
  font-weight:500;
}
.buy-reminder{display:flex;flex-wrap:wrap;gap:8px}
.buy-reminder button{cursor:pointer;font:inherit;font-weight:700;text-transform:uppercase}
/* The status line only ever becomes a flex item once it has something to
   say — .form__msg is display:none until the handler adds .ok or .err — so
   it claims a full row rather than squeezing in beside the field. */
.buy-reminder .form__msg{flex:1 0 100%;margin:0}
/* bundle.css tunes those two states for the dark sections. This page is
   paper, where mint on near-white is unreadable. */
.buy-reminder .form__msg.ok{background:rgba(40,143,71,.14);border-color:var(--green);color:#1d6b35}
.buy-reminder .form__msg.err{background:rgba(239,23,20,.1);border-color:var(--red);color:var(--red-deep)}
.buy-section .form__done{display:flex;align-items:center;gap:12px;color:var(--ink)}
.buy-section .form__done-tick{width:28px;height:28px;flex:none;fill:none;stroke:var(--green);stroke-width:2}
.buy-reminder input{
  min-width:0;
  min-height:52px;
  flex:1;
  border:1.5px solid var(--paper-3);
  border-radius:8px;
  padding:0 12px;
  background:#fff;
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
}
.buy-reminder input::placeholder{color:rgba(57,43,37,.7)}
.buy-reminder input:focus{border-color:var(--red);outline:0;box-shadow:0 0 0 3px rgba(239,23,20,.14)}
.buy-cta{
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  border:2px solid transparent;
  border-radius:8px;
  padding:12px 18px;
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  line-height:18px;
  text-transform:uppercase;
  transition:background .2s,color .2s,transform .2s var(--ease);
}
.buy-cta:hover{transform:translateY(-2px)}
.buy-cta--primary{background:var(--red);color:#fff}
.buy-cta--primary:hover{background:var(--red-deep)}
.buy-cta--outline{border-color:var(--ink);background:transparent;color:var(--ink)}
.buy-cta--outline:hover{background:var(--ink);color:#fff}
.buy-actions{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:250px;
  overflow:hidden;
  padding:32px 64px;
  border-bottom:1px solid var(--red);
  background:#100c0a;
}
.buy-actions::before{
  content:"";
  position:absolute;
  top:-1px;
  right:0;
  left:0;
  z-index:1;
  height:22px;
  background:#fff;
  pointer-events:none;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='22' preserveAspectRatio='none'><path d='M0 22 L0 6.3 Q17.6 8.7 35.3 5.8 Q52.9 1.9 70.6 4.2 Q88.2 9.3 105.9 8.4 Q123.5 6.5 141.2 9.4 Q158.8 11.5 176.5 9.4 Q194.1 5.5 211.8 9.0 Q229.4 11.2 247.1 8.8 Q264.7 4.7 282.4 8.0 Q300.0 12.3 317.6 9.6 Q335.3 5.3 352.9 5.5 Q370.6 9.7 388.2 7.8 Q405.9 5.4 423.5 9.8 Q441.2 9.5 458.8 5.7 Q476.5 4.9 494.1 11.6 Q511.8 13.8 529.4 9.9 Q547.1 5.4 564.7 8.1 Q582.4 11.1 600.0 7.0 Q617.6 6.5 635.3 12.0 Q652.9 15.6 670.6 12.4 Q688.2 9.0 705.9 12.3 Q723.5 11.6 741.2 6.1 Q758.8 2.7 776.5 5.2 Q794.1 8.5 811.8 8.2 Q829.4 2.8 847.1 4.9 Q864.7 9.1 882.4 7.4 Q900.0 2.4 917.6 5.0 Q935.3 8.7 952.9 6.5 Q970.6 2.9 988.2 5.4 Q1005.9 9.8 1023.5 7.4 Q1041.2 4.7 1058.8 6.5 Q1076.5 9.0 1094.1 6.7 Q1111.8 4.6 1129.4 9.2 Q1147.1 10.0 1164.7 5.6 Q1182.4 2.2 1200.0 6.3 L1200 22 Z' fill='black'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='22' preserveAspectRatio='none'><path d='M0 22 L0 6.3 Q17.6 8.7 35.3 5.8 Q52.9 1.9 70.6 4.2 Q88.2 9.3 105.9 8.4 Q123.5 6.5 141.2 9.4 Q158.8 11.5 176.5 9.4 Q194.1 5.5 211.8 9.0 Q229.4 11.2 247.1 8.8 Q264.7 4.7 282.4 8.0 Q300.0 12.3 317.6 9.6 Q335.3 5.3 352.9 5.5 Q370.6 9.7 388.2 7.8 Q405.9 5.4 423.5 9.8 Q441.2 9.5 458.8 5.7 Q476.5 4.9 494.1 11.6 Q511.8 13.8 529.4 9.9 Q547.1 5.4 564.7 8.1 Q582.4 11.1 600.0 7.0 Q617.6 6.5 635.3 12.0 Q652.9 15.6 670.6 12.4 Q688.2 9.0 705.9 12.3 Q723.5 11.6 741.2 6.1 Q758.8 2.7 776.5 5.2 Q794.1 8.5 811.8 8.2 Q829.4 2.8 847.1 4.9 Q864.7 9.1 882.4 7.4 Q900.0 2.4 917.6 5.0 Q935.3 8.7 952.9 6.5 Q970.6 2.9 988.2 5.4 Q1005.9 9.8 1023.5 7.4 Q1041.2 4.7 1058.8 6.5 Q1076.5 9.0 1094.1 6.7 Q1111.8 4.6 1129.4 9.2 Q1147.1 10.0 1164.7 5.6 Q1182.4 2.2 1200.0 6.3 L1200 22 Z' fill='black'/></svg>");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  transform:scaleY(-1);
}
.buy-actions__tomato{
  position:absolute;
  bottom:0;
  left:0;
  z-index:1;
  width:232.37px;
  height:134px;
  object-fit:contain;
}
.buy-actions__shirt{
  position:absolute;
  top:51.95px;
  right:-22.86px;
  z-index:1;
  display:flex;
  width:252.86px;
  height:252.86px;
  align-items:center;
  justify-content:center;
}
.buy-actions__shirt img{
  width:206.94px;
  height:206.94px;
  object-fit:contain;
  transform:rotate(-14.77deg);
}
.buy-actions__buttons{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  width:100%;
}
.buy-actions .buy-cta{width:300px}
.buy-actions .buy-cta--primary{background:var(--red-glow);color:#fff}
.buy-actions .buy-cta--primary:hover{background:var(--red);color:#fff}
.buy-actions .buy-cta--outline{border-color:#fff;color:#fff}
.buy-actions .buy-cta--outline:hover{background:#fff;color:#100c0a}
.buy-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:32px;
  padding:32px 64px;
  background:var(--ink-3);
  color:var(--paper);
  font-family:var(--mono);
}
.buy-footer__social{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.buy-footer__social a{
  border:1px solid var(--paper);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  line-height:16px;
  transition:background .2s,color .2s;
}
.buy-footer__social a:hover{background:var(--paper);color:var(--ink)}
.buy-footer p{max-width:760px;font-size:14px;line-height:20px;text-align:center}

/* Entry motion: CSS handles the animation; the small observer only decides
   when below-the-fold sections enter. Content stays visible without JS. */
.js [data-buy-hero]{opacity:0;animation:buy-enter .7s var(--ease) forwards}
.js [data-buy-hero="1"]{animation-delay:.08s}
.js [data-buy-hero="2"]{animation-delay:.2s}
.js [data-buy-hero="3"]{animation-delay:.32s}
.js [data-buy-hero="4"]{animation-delay:.44s}
.js [data-buy-hero="5"]{animation-delay:.56s}
.buy-motion [data-buy-reveal]{opacity:0;transform:translateY(30px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.buy-motion [data-buy-reveal].is-visible{opacity:1;transform:none}
@keyframes buy-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .buy-shell{padding:56px 32px}
}
@media (max-width:640px){
  .buy-shell{padding:0}
  .buy-page{box-shadow:none}
  .buy-hero,.buy-section,.buy-actions,.buy-footer{padding-right:24px;padding-left:24px}
  .buy-trailer{height:auto;aspect-ratio:16/9}
  .buy-platform__identity{gap:12px}
  .buy-platform__heading strong{font-size:14px}
  .buy-provider-list{grid-template-columns:1fr}
  .buy-reminder{flex-direction:column}
  .buy-actions{min-height:300px;padding-top:64px;padding-bottom:64px}
  .buy-actions .buy-cta{width:100%}
  .buy-actions__tomato{width:174px;height:auto}
  .buy-actions__shirt{top:28px;right:-28px;width:160px;height:160px}
  .buy-actions__shirt img{width:132px;height:132px}
}
@media (max-width:380px){
  .buy-hero,.buy-section,.buy-actions,.buy-footer{padding-right:18px;padding-left:18px}
  .buy-hero__logo{width:220px;height:auto;aspect-ratio:1.3}
}
@media (prefers-reduced-motion:reduce){
  .js [data-buy-hero]{opacity:1;animation:none}
  .buy-motion [data-buy-reveal]{opacity:1;transform:none;transition:none}
  .buy-platform,.buy-platform__chevron,.buy-cta{transition:none}
}

.buy-footer__legal{margin:0;font-size:13px}
.buy-footer__legal a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}