/* —— Professional Coming Soon Page Styles —— */
.coming-soon-hero {
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 50%, #fef3e2 100%);
  position: relative;
  overflow: hidden;
}

.coming-soon-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(249, 115, 22, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(239, 68, 68, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.feature-card {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

.gradient-text {
  background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.glass-card {
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* —— Enhanced brands + services sections —— */
.section-brands{
  background:linear-gradient(180deg,#fffaf6 0%,#ffffff 62%,#ffffff 100%);
}
.section-brands__glow{
  opacity:.55;
  background-image:
    radial-gradient(circle at 14% 20%, rgba(242,101,34,.14), transparent 36%),
    radial-gradient(circle at 88% 12%, rgba(249,168,37,.16), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(255,216,194,.35), transparent 42%);
}
.section-services{
  background:linear-gradient(180deg,#fff8f3 0%,#fcfcfc 38%,#ffffff 100%);
}
.section-services--accent{
  background:linear-gradient(155deg,#f9a825 0%,#f26522 42%,#e85a1a 78%,#d9531e 100%);
  border-color:transparent;
}
.section-services__glow{
  opacity:.45;
  background-image:
    radial-gradient(circle at 10% 0%, rgba(242,101,34,.12), transparent 32%),
    radial-gradient(circle at 92% 18%, rgba(249,168,37,.14), transparent 28%);
}
.section-services--accent .section-services__glow{
  opacity:.55;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.22), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(255,231,194,.28), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(217,83,30,.35), transparent 44%);
}
.section-services--accent .service-card{
  border-color:rgba(255,255,255,.55);
  background:linear-gradient(145deg,#ffffff 0%,#fff8f3 100%);
  box-shadow:0 10px 28px rgba(43,43,43,.12);
}
.section-services--accent .service-card:hover{
  border-color:#fff;
  box-shadow:0 16px 36px rgba(43,43,43,.16);
}
.brand-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
}
@media (min-width:40rem){
  .brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}
}
@media (min-width:64rem){
  .brand-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:.75rem}
}
.brand-tile{
  position:relative;
  display:flex;
  min-height:88px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  border-radius:.85rem;
  border:1px solid color-mix(in srgb, var(--nibbl-orange) 22%, var(--nibbl-line));
  background:#ffffff;
  padding:.85rem .55rem .7rem;
  text-align:center;
  box-shadow:0 6px 18px rgba(242,101,34,.06);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.brand-tile:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--nibbl-orange) 45%, var(--nibbl-line));
  box-shadow:0 12px 28px rgba(242,101,34,.12);
}
.brand-tile__logo{
  display:block;
  width:auto;
  height:1.85rem;
  max-width:6.75rem;
  object-fit:contain;
  object-position:center;
  flex-shrink:0;
}
.brand-tile--nibbl{
  grid-column:1 / -1;
  min-height:auto;
  padding:1.25rem 1rem;
  background:linear-gradient(135deg,#fff8f2 0%,#fff4eb 100%);
  border:2px solid color-mix(in srgb, var(--nibbl-orange) 35%, transparent);
  box-shadow:0 8px 24px rgba(242,101,34,0.12);
}
.brand-tile--nibbl .brand-tile__logo{
  height:auto;
  max-width:180px;
  max-height:3.5rem;
}
@media (min-width:40rem){
  .brand-tile--nibbl{
    grid-column:span 2;
  }
}
@media (min-width:64rem){
  .brand-tile--nibbl{
    grid-column:span 1;
  }
  .brand-tile--nibbl .brand-tile__logo{
    max-height:4rem;
  }
}
.brand-tile__name{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--nibbl-ink);
  line-height:1.2;
}
@media (min-width:40rem){
  .brand-tile__name{font-size:13px}
}
.brand-disclaimer{
  margin-top:1.15rem;
  max-width:48rem;
  font-size:11px;
  line-height:1.45;
  color:color-mix(in srgb, var(--nibbl-muted) 90%, transparent);
}
.service-grid{
  display:grid;
  gap:.85rem;
}
@media (min-width:40rem){
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:64rem){
  .service-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
}
.service-card{
  display:flex;
  height:100%;
  align-items:center;
  gap:.9rem;
  border-radius:.9rem;
  border:1px solid color-mix(in srgb, var(--nibbl-orange) 18%, var(--nibbl-line));
  background:linear-gradient(145deg,#ffffff 0%,#fffaf6 100%);
  padding:1rem 1.05rem;
  box-shadow:0 8px 22px rgba(43,43,43,.04);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.service-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--nibbl-orange) 42%, var(--nibbl-line));
  box-shadow:0 14px 32px rgba(242,101,34,.1);
}
.service-card__icon{
  display:flex;
  width:2.6rem;
  height:2.6rem;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  border-radius:.75rem;
  color:var(--nibbl-orange);
}
.service-card__icon--a{
  background:var(--nibbl-orange-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nibbl-orange) 16%, transparent);
}
.service-card__icon--b{
  background:linear-gradient(160deg,#fff4ed,#ffe7c2);
  color:#d9531e;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nibbl-yellow) 35%, transparent);
}
.service-card__icon--c{
  background:#fff;
  color:var(--nibbl-orange);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--nibbl-orange) 35%, transparent);
}
.service-card__title{
  font-size:13.5px;
  font-weight:800;
  line-height:1.3;
  color:var(--nibbl-ink);
}
/* Hero feature chips — wide horizontal rectangles (not early 3-up squares) */
.hero-chips{
  display:grid;
  width:100%;
  grid-template-columns:1fr;
  gap:.75rem;
}
@media (min-width:64rem){
  .hero-chips{
    grid-column:1 / -1; /* spans both hero columns */
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1rem;
    margin-top:1.5rem;
  }
}
.hero-chip{
  display:flex;
  width:100%;
  min-width:0;
  min-height:3.25rem;
  aspect-ratio:auto;
  box-sizing:border-box;
  align-items:center;
  gap:.9rem;
  padding:.8rem 1.35rem;
}
@media (min-width:40rem){
  .hero-chip{
    min-height:3.4rem;
    padding:.85rem 1.6rem;
  }
}
@media (min-width:64rem){
  .hero-chip{
    min-height:3.5rem;
    padding:.9rem 1.5rem;
  }
  .hero-chip > span:last-child{
    white-space:nowrap;
  }
}
/* Campaign Performance — under solutions subcategory cards */
.campaign-performance{
  position:relative;
  box-sizing:border-box;
  width:100%;
  margin-top:40px;
  padding:.85rem 1.1rem 1rem;
  border-radius:.75rem;
  border:1px solid color-mix(in srgb, var(--nibbl-orange) 30%, transparent);
  background:#fff;
  box-shadow:0 10px 28px rgba(43,43,43,.08);
}
@media (min-width:40rem){
  .campaign-performance{
    padding:.9rem 1.25rem 1.05rem;
  }
}
@media (min-width:64rem){
  .campaign-performance{
    padding:1rem 1.35rem 1.1rem;
  }
}
.campaign-performance__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem .75rem;
}
.campaign-performance__title{
  margin:0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--nibbl-orange);
  line-height:1.3;
}
.campaign-performance__period{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.2rem .5rem;
  border-radius:.375rem;
  border:1px solid var(--nibbl-line);
  background:#fafafa;
  font-size:9px;
  font-weight:600;
  color:var(--nibbl-muted);
  line-height:1.3;
}
.campaign-performance__period span{
  font-size:7px;
}
.campaign-performance__body{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin-top:.65rem;
}
.campaign-performance__stats{
  display:grid;
  flex:1 1 auto;
  min-width:0;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:1rem;
  row-gap:.75rem;
  margin:0;
}
@media (min-width:40rem){
  .campaign-performance__stats{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    column-gap:1rem;
    row-gap:0;
  }
}
.campaign-performance__stat{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.2rem;
  min-width:0;
}
.campaign-performance__label{
  display:block;
  font-size:11px;
  font-weight:600;
  line-height:1.35;
  color:var(--nibbl-muted);
  white-space:nowrap;
}
.campaign-performance__value{
  display:block;
  font-size:1.05rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--nibbl-ink);
}
.campaign-performance__value--accent{
  color:var(--nibbl-orange);
}
.campaign-performance__graph{
  display:block;
  height:2rem;
  width:100%;
  flex:0 0 auto;
  overflow:visible;
}
.campaign-performance__graph path[stroke]{
  stroke-width:1.75;
}
@media (min-width:40rem){
  .campaign-performance__graph{
    height:2.25rem;
    width:100%;
    max-width:220px;
    margin-inline:auto;
  }
}
.hero-legal-disclaimer{
  grid-column:1 / -1;
  box-sizing:border-box;
  width:100%;
  margin:40px 0 0;
  padding:1rem 1.5rem;
  text-align:center;
  font-size:11px;
  line-height:1.55;
  color:#b5b0aa;
  border:none;
  border-radius:.75rem;
  background:rgba(255,255,255,.92);
}
@media (min-width:40rem){
  .hero-legal-disclaimer{
    padding:1.1rem 2rem;
    font-size:12px;
    line-height:1.6;
  }
}
.section-graphic{margin-bottom:1.75rem}
.brands-infographic,
.services-infographic{
  display:block;
  width:100%;
  max-width:360px;
  height:auto;
}
.services-infographic{max-width:420px}
.brands-infographic__pack{
  transform-origin:center;
  animation:float-soft 3.6s ease-in-out infinite;
}
.brands-infographic__pack--2{animation-delay:.35s}
.brands-infographic__pack--3{animation-delay:.7s}
.brands-infographic__pack--4{animation-delay:1.05s}
.brands-infographic__pack--5{animation-delay:1.4s}
.brands-infographic__arc{
  stroke-dashoffset:40;
  animation:dash-drift 8s linear infinite;
}
.services-infographic__line{
  stroke-dashoffset:0;
  animation:dash-drift 7s linear infinite;
}
.services-infographic__node{
  transform-origin:center;
  animation:pulse-soft 3.2s ease-in-out infinite;
}
.services-infographic__node:nth-child(3){animation-delay:.25s}
.services-infographic__node:nth-child(4){animation-delay:.5s}
.services-infographic__node:nth-child(5){animation-delay:.75s}
@keyframes float-soft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes dash-drift{
  0%{stroke-dashoffset:48}
  100%{stroke-dashoffset:0}
}

/* Shared major section H2 scale (matches brands: 1.75rem / sm 2rem) */
.section-heading{
  font-size:1.75rem;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25;
  color:var(--nibbl-ink,#2b2b2b);
}
@media (min-width:40rem){
  .section-heading{font-size:2rem}
}
.section-heading--center{text-align:center}
.section-heading--white{color:#fff}
.section-heading--with-wordmark{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0 .5rem;
  text-align:center;
  line-height:1.15;
}
.section-heading__wordmark,
.section-how__wordmark{
  display:inline-block;
  width:auto;
  height:2.05em;
  max-width:none;
  object-fit:contain;
  flex-shrink:0;
  vertical-align:middle;
  translate:0 -.18em;
}
@media (min-width:40rem){
  .section-heading__wordmark,
  .section-how__wordmark{height:1.92em}
}
/* Keep "How [logo] Works" as one balanced headline row when space allows */
.section-how h2{
  flex-wrap:nowrap;
  gap:.35em .4em;
  white-space:nowrap;
}
@media (max-width:24.99rem){
  .section-how h2{
    flex-wrap:wrap;
    white-space:normal;
  }
}

/* How it works — sample pack + tracked coupon visuals */
.how-samples__lead{
  color:var(--nibbl-muted,#6b6560);
}
.how-samples__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  align-items:end;
  max-width:52rem;
  margin-inline:auto;
}
@media (min-width:40rem){
  .how-samples__grid{
    grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
    gap:2rem;
    align-items:center;
  }
}
.how-samples__item{
  margin:0;
  text-align:center;
}
.how-samples__media{
  display:block;
  width:100%;
  max-width:18rem;
  margin-inline:auto;
  height:auto;
  object-fit:contain;
  background:none;
  border:none;
  box-shadow:none;
  animation:how-sample-rise 0.9s ease both;
}
.how-samples__item--coupon .how-samples__coupon{
  animation:how-sample-rise 0.9s ease 0.12s both;
}
.how-samples__label{
  margin-top:0.75rem;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--nibbl-orange,#f26522);
}
.how-samples__coupon{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:0.85rem 1rem;
  width:100%;
  max-width:26rem;
  margin-inline:auto;
  padding:1rem 1rem 0.95rem;
  border:2px solid color-mix(in srgb, var(--nibbl-orange,#f26522) 55%, #ffffff);
  border-radius:0.85rem;
  background:
    linear-gradient(135deg, rgba(255,244,237,0.9), #ffffff 42%, #ffffff),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 10px,
      rgba(242,101,34,0.035) 10px,
      rgba(242,101,34,0.035) 11px
    );
  box-shadow:0 14px 36px rgba(242,101,34,0.1);
  text-align:left;
}
.how-samples__coupon-main{
  flex:1 1 10.5rem;
  min-width:0;
}
.how-samples__coupon-eyebrow{
  margin:0;
  font-size:0.65rem;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--nibbl-orange,#f26522);
}
.how-samples__coupon-offer{
  margin:0.35rem 0 0;
  font-size:clamp(1.85rem,4.5vw,2.35rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--nibbl-ink,#2b2b2b);
}
.how-samples__coupon-offer span{
  font-size:0.55em;
  letter-spacing:0.06em;
  color:var(--nibbl-orange,#f26522);
}
.how-samples__coupon-product{
  margin:0.45rem 0 0;
  font-size:0.95rem;
  font-weight:800;
  color:var(--nibbl-ink,#2b2b2b);
}
.how-samples__coupon-rule{
  margin:0.55rem 0 0;
  max-width:18rem;
  padding-top:0.55rem;
  border-top:1px dashed color-mix(in srgb, var(--nibbl-orange,#f26522) 45%, transparent);
  font-size:0.78rem;
  line-height:1.45;
  color:var(--nibbl-muted,#6b6560);
}
.how-samples__coupon-qr{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.35rem;
  margin-left:auto;
}
.how-samples__coupon-qr img{
  display:block;
  width:5.75rem;
  height:5.75rem;
  border-radius:0.35rem;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--nibbl-ink,#2b2b2b) 12%, transparent);
  animation:how-qr-pulse 2.8s ease-in-out infinite;
}
.how-samples__coupon-qr-note{
  font-size:0.62rem;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--nibbl-muted,#6b6560);
}
.how-samples__note a{
  text-decoration:none;
}

/* How it works — package + coupon pull-out demo */
.how-coupon-demo{
  margin:1.75rem auto 0;
  max-width:54rem;
}
.how-coupon-demo__stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
}
.how-coupon-demo__pack{
  position:relative;
  width:100%;
  max-width:27rem;
  margin:0;
  line-height:0;
}
.how-coupon-demo__pack-img{
  display:block;
  width:100%;
  height:auto;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  cursor:pointer;
  transition:transform 0.2s ease;
  -webkit-tap-highlight-color:transparent;
}
.how-coupon-demo__pack-img:hover,
.how-coupon-demo__pack-img:focus-visible{
  transform:scale(1.03);
  outline:none;
}
.how-coupon-demo__qr-highlight{
  position:absolute;
  left:52.5%;
  top:38.5%;
  width:36%;
  height:28%;
  border:2.5px solid var(--nibbl-orange,#f26522);
  border-radius:0.35rem;
  box-shadow:
    0 0 0 3px rgba(242,101,34,0.22),
    0 0 18px rgba(242,101,34,0.45);
  pointer-events:none;
  animation:how-qr-glow 2.6s ease-in-out infinite;
}
.how-coupon-demo__connector{
  display:none;
  width:3.75rem;
  height:auto;
  color:var(--nibbl-orange,#f26522);
  flex-shrink:0;
  opacity:0.85;
}
.how-coupon-demo__pullout{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.65rem;
  width:100%;
  max-width:22.5rem;
  margin:0;
  animation:how-sample-rise 0.9s ease 0.1s both;
}
.how-coupon-demo__coupon{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:0.85rem 1rem;
  width:100%;
  padding:1.05rem 1rem 1rem;
  border:2px dashed color-mix(in srgb, #c4a574 70%, #8b7355);
  border-radius:0.85rem;
  background:
    linear-gradient(165deg, #f7f0e4 0%, #efe4d0 48%, #f5edd9 100%);
  box-shadow:
    0 16px 40px rgba(43,43,43,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.55);
  text-align:left;
}
.how-coupon-demo__coupon-copy{
  flex:1 1 9.5rem;
  min-width:0;
}
.how-coupon-demo__coupon-eyebrow{
  margin:0;
  font-size:0.62rem;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--nibbl-orange,#f26522);
}
.how-coupon-demo__coupon-offer{
  margin:0.4rem 0 0;
  font-size:clamp(1.35rem,4.2vw,1.7rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:#1e3a7a;
  text-transform:uppercase;
}
.how-coupon-demo__coupon-offer span{
  display:inline;
  color:#1e3a7a;
}
.how-coupon-demo__coupon-product{
  margin:0.45rem 0 0;
  font-size:0.78rem;
  line-height:1.4;
  font-weight:700;
  color:#3a4558;
}
.how-coupon-demo__coupon-rule{
  margin:0.65rem 0 0;
  padding-top:0.55rem;
  border-top:1px dashed color-mix(in srgb, #c4a574 65%, transparent);
  font-size:0.72rem;
  line-height:1.45;
  color:var(--nibbl-muted,#6b6560);
}
.how-coupon-demo__coupon-qr{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.35rem;
  margin-left:auto;
}
.how-coupon-demo__closeup-img{
  display:block;
  width:6.75rem;
  height:6.75rem;
  object-fit:contain;
  image-rendering:auto;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--nibbl-ink,#2b2b2b) 12%, transparent);
  border-radius:0.4rem;
  box-shadow:0 4px 14px rgba(43,43,43,0.1);
  animation:how-qr-pulse 2.8s ease-in-out infinite;
}
.how-coupon-demo__coupon-qr-note{
  margin:0;
  font-size:0.58rem;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#1e3a7a;
}
.how-coupon-demo__closeup-label{
  margin:0;
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--nibbl-orange,#f26522);
}
.how-coupon-demo__caption{
  margin:1.15rem auto 0;
  max-width:38rem;
  text-align:center;
  font-size:0.875rem;
  line-height:1.55;
  color:var(--nibbl-muted,#6b6560);
}
@media (min-width:40rem){
  .how-coupon-demo__stage{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:0.25rem 0.55rem;
  }
  .how-coupon-demo__pack{
    flex:1 1 auto;
    max-width:min(27rem,52%);
  }
  .how-coupon-demo__connector{
    display:block;
  }
  .how-coupon-demo__pullout{
    flex:0 1 22.5rem;
    max-width:22.5rem;
  }
  .how-coupon-demo__closeup-img{
    width:7.25rem;
    height:7.25rem;
  }
}
@media (min-width:64rem){
  .how-coupon-demo__pack{
    max-width:min(28.5rem,50%);
  }
  .how-coupon-demo__coupon{
    flex-wrap:nowrap;
  }
}
@keyframes how-qr-glow{
  0%,100%{box-shadow:0 0 0 3px rgba(242,101,34,0.18),0 0 14px rgba(242,101,34,0.35)}
  50%{box-shadow:0 0 0 5px rgba(242,101,34,0.28),0 0 22px rgba(242,101,34,0.55)}
}
@keyframes how-sample-rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes how-qr-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(242,101,34,0)}
  50%{box-shadow:0 0 0 4px rgba(242,101,34,0.12)}
}
@media (prefers-reduced-motion:reduce){
  .how-samples__media,
  .how-samples__item--coupon .how-samples__coupon,
  .how-samples__coupon-qr img,
  .how-coupon-demo__qr-highlight,
  .how-coupon-demo__pullout,
  .how-coupon-demo__closeup-img,
  .how-coupon-demo__pack-img{
    animation:none;
  }
  .how-coupon-demo__pack-img:hover,
  .how-coupon-demo__pack-img:focus-visible{
    transform:none;
  }
}
/* Influencer marketplace partnerships */
.section-influencers{
  background:linear-gradient(180deg,#ffffff 0%,#fffaf6 48%,#ffffff 100%);
}
.section-influencers__glow{
  opacity:.5;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(242,101,34,.12), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(249,168,37,.14), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(255,216,194,.28), transparent 40%);
}
.influencer-infographic{
  display:block;
  width:100%;
  max-width:640px;
  height:auto;
}
.influencer-infographic__line{
  stroke-dashoffset:0;
  animation:dash-drift 7.5s linear infinite;
}
.influencer-infographic__node{
  transform-origin:center;
  animation:pulse-soft 3.4s ease-in-out infinite;
}
.influencer-infographic__node:nth-child(3){animation-delay:.2s}
.influencer-infographic__node:nth-child(4){animation-delay:.4s}
.influencer-infographic__node:nth-child(5){animation-delay:.6s}
.influencer-infographic__node:nth-child(6){animation-delay:.8s}
.partner-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
}
@media (min-width:40rem){
  .partner-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}
}
@media (min-width:64rem){
  .partner-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.85rem}
}
.partner-tile{
  position:relative;
  display:flex;
  min-height:100px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  border-radius:.85rem;
  border:1px solid color-mix(in srgb, var(--nibbl-orange) 22%, var(--nibbl-line));
  background:linear-gradient(165deg,#ffffff 0%,#fff8f3 100%);
  padding:.9rem .65rem .75rem;
  text-align:center;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(242,101,34,.06);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.partner-tile:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--nibbl-orange) 45%, var(--nibbl-line));
  box-shadow:0 12px 28px rgba(242,101,34,.12);
}
.partner-tile__logo{
  display:block;
  width:auto;
  max-width:7.5rem;
  object-fit:contain;
  object-position:center;
  flex-shrink:0;
}
.partner-tile__logo--wordmark{
  height:1.7rem;
  max-width:8.25rem;
  opacity:.94;
}
.partner-tile__logo--mark{
  height:2.35rem;
  width:2.35rem;
  border-radius:.55rem;
}
.partner-disclaimer{
  margin-top:1rem;
  max-width:36rem;
  font-size:11px;
  line-height:1.45;
  color:color-mix(in srgb, var(--nibbl-muted) 90%, transparent);
}
.partner-tile__name{
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--nibbl-ink);
  line-height:1.2;
}
.partner-tile__hint{
  font-size:11px;
  font-weight:600;
  color:var(--nibbl-muted);
}
.influencer-flow__item{
  text-align:center;
  padding:.35rem .25rem;
}

/* Limited snack sample drops (under influencer campaigns) */
.snack-drops__intro{
  max-width:40rem;
}
.snack-drops__body{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  margin-top:2rem;
  max-width:72rem;
  margin-inline:auto;
}
.snack-drops__copy{
  max-width:28rem;
  text-align:center;
}
.snack-drops__visual{
  display:block;
  width:auto;
  height:auto;
  max-width:min(12.5rem, 58vw);
  flex-shrink:0;
}
.snack-drops__visual--announce{
  animation:snack-drop-float 4.2s ease-in-out infinite;
}
.snack-drops__visual--parachute{
  animation:snack-drop-float 4.8s ease-in-out infinite;
  animation-delay:-1.6s;
}
@media (min-width:48rem){
  .snack-drops__body{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:50px;
    margin-top:2.25rem;
  }
  .snack-drops__copy{
    flex:1 1 auto;
    min-width:0;
    max-width:26rem;
  }
  .snack-drops__visual{
    max-width:11.5rem;
  }
}
@media (min-width:64rem){
  .snack-drops__body{
    gap:50px;
  }
  .snack-drops__copy{
    max-width:30rem;
  }
  .snack-drops__visual{
    max-width:13.5rem;
  }
}
.snack-drops__badge{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin:0 auto;
  padding:.28rem .7rem;
  border-radius:.4rem;
  border:1px solid color-mix(in srgb, var(--nibbl-orange) 35%, var(--nibbl-line));
  background:linear-gradient(180deg,#fff8f3 0%,#ffffff 100%);
  color:var(--nibbl-orange);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:0 4px 14px rgba(242,101,34,.08);
}
.snack-drops__badge-dot{
  width:.45rem;
  height:.45rem;
  border-radius:999px;
  background:var(--nibbl-orange);
  box-shadow:0 0 0 0 rgba(242,101,34,.45);
  animation:snack-drop-pulse 2.4s ease-in-out infinite;
}
.snack-drops__step-icon{
  width:1.35rem;
  height:auto;
  flex-shrink:0;
  display:inline-block;
  vertical-align:middle;
}
.snack-drops__analogy{
  max-width:36rem;
  margin-inline:auto;
  font-weight:600;
  letter-spacing:.01em;
}
.snack-drops__steps{
  list-style:none;
  margin:50px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:.85rem;
  counter-reset:none;
}
@media (min-width:40rem){
  .snack-drops__steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
  }
}
@media (min-width:64rem){
  .snack-drops__steps{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    position:relative;
  }
  .snack-drops__steps::before{
    content:"";
    position:absolute;
    top:1.35rem;
    left:12%;
    right:12%;
    height:1px;
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--nibbl-orange) 40%, var(--nibbl-line)), transparent);
    pointer-events:none;
  }
}
.snack-drops__step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
  padding:.85rem 1rem;
  border-left:2px solid color-mix(in srgb, var(--nibbl-orange) 55%, transparent);
  background:linear-gradient(105deg, rgba(255,244,237,.65) 0%, transparent 70%);
}
@media (min-width:64rem){
  .snack-drops__step{
    align-items:center;
    text-align:center;
    border-left:none;
    background:transparent;
    padding:0 .75rem;
  }
}
.snack-drops__step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.35rem;
  height:2.35rem;
  padding:0 .45rem;
  border-radius:.5rem;
  border:1px solid color-mix(in srgb, var(--nibbl-orange) 28%, var(--nibbl-line));
  background:#fff;
  color:var(--nibbl-orange);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  box-shadow:0 6px 16px rgba(242,101,34,.08);
  transition:transform .22s var(--nibbl-ease-out, ease), box-shadow .22s ease, border-color .22s ease;
}
.snack-drops__step:hover .snack-drops__step-num{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--nibbl-orange) 48%, var(--nibbl-line));
  box-shadow:0 10px 22px rgba(242,101,34,.14);
}
.snack-drops__step-label{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:14px;
  font-weight:800;
  color:var(--nibbl-ink);
  letter-spacing:-.01em;
  line-height:1.25;
}
@media (min-width:64rem){
  .snack-drops__step-label{
    justify-content:center;
  }
}
.snack-drops__step-copy{
  font-size:13px;
  line-height:1.5;
  color:var(--nibbl-muted);
  max-width:16rem;
}
@media (min-width:64rem){
  .snack-drops__step-copy{max-width:14rem}
}
.snack-drops__learn-more-wrap{
  margin:40px 0;
}
.snack-drops__disclaimer{
  letter-spacing:.01em;
}
@keyframes snack-drop-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(242,101,34,.4)}
  50%{box-shadow:0 0 0 6px rgba(242,101,34,0)}
}
@keyframes snack-drop-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

/* Creator-style screenshot gallery (illustrative) */
.influencer-shots{
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:flex-end;
  gap:.65rem;
  margin-inline:auto;
  max-width:100%;
  overflow-x:auto;
  padding:.15rem .15rem .55rem;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
@media (min-width:40rem){
  .influencer-shots{
    flex-wrap:wrap;
    justify-content:center;
    overflow:visible;
    padding-bottom:.15rem;
    gap:.85rem;
  }
}
.influencer-shots__note{
  letter-spacing:.01em;
}
.influencer-shot{
  margin:0;
  flex:0 0 auto;
  scroll-snap-align:center;
}
.influencer-shot__chrome{
  position:relative;
  overflow:hidden;
  border-radius:1rem;
  border:1px solid color-mix(in srgb, var(--nibbl-orange) 28%, var(--nibbl-line));
  background:#1a1512;
  box-shadow:0 10px 28px rgba(242,101,34,.1);
  transition:transform .22s ease, box-shadow .22s ease;
}
.influencer-shot:hover .influencer-shot__chrome{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(242,101,34,.16);
}
.influencer-shot--tiktok .influencer-shot__chrome{
  width:7.25rem;
  aspect-ratio:9 / 16;
}
.influencer-shot--youtube .influencer-shot__chrome{
  width:11.5rem;
  aspect-ratio:16 / 9;
}
@media (min-width:40rem){
  .influencer-shot--tiktok .influencer-shot__chrome{width:8.25rem}
  .influencer-shot--youtube .influencer-shot__chrome{width:13.5rem}
}
@media (min-width:64rem){
  .influencer-shot--tiktok .influencer-shot__chrome{width:9rem}
  .influencer-shot--youtube .influencer-shot__chrome{width:15rem}
}
.influencer-shot__media{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.influencer-shot__platform{
  position:absolute;
  z-index:2;
  top:.45rem;
  left:.45rem;
  display:inline-flex;
  align-items:center;
  border-radius:.35rem;
  background:color-mix(in srgb, var(--nibbl-orange) 92%, #000);
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.2rem .4rem;
  box-shadow:0 4px 10px rgba(43,43,43,.2);
}
.influencer-shot__play{
  position:absolute;
  z-index:2;
  inset:auto;
  left:50%;
  top:50%;
  display:flex;
  width:2rem;
  height:2rem;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--nibbl-orange);
  box-shadow:0 6px 16px rgba(43,43,43,.22);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.influencer-shot--youtube .influencer-shot__play{
  width:2.35rem;
  height:2.35rem;
}
.section-influencers .reveal{
  opacity:0;
  transform:translateY(16px);
}
.section-influencers .reveal.visible{
  opacity:1;
  transform:none;
  animation:.65s both fade-up;
  animation-delay:calc(var(--stagger, 0) * .05s);
}
@media (prefers-reduced-motion:reduce){
  .influencer-shot:hover .influencer-shot__chrome{transform:none}
  .snack-drops__badge-dot{animation:none!important;box-shadow:none}
  .snack-drops__visual--announce,
  .snack-drops__visual--parachute{animation:none!important}
  .snack-drops__step:hover .snack-drops__step-num{transform:none}
}

/* Certification / compliance badges */
.cert-badges{
  list-style:none;
  margin:0;
  padding:0;
}
.cert-badge{
  display:flex;
  width:92px;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.cert-badge__logo{
  display:block;
  width:76px;
  height:76px;
  flex-shrink:0;
  object-fit:contain;
  transition:transform .22s ease;
}
.cert-badge:hover .cert-badge__logo{
  transform:scale(1.05);
}
@media (prefers-reduced-motion:reduce){
  .cert-badge:hover .cert-badge__logo{transform:none}
}
.cert-disclaimer{
  margin-top:1rem;
  max-width:36rem;
  font-size:11px;
  line-height:1.45;
  color:color-mix(in srgb, var(--nibbl-muted) 90%, transparent);
}

/* Multi-State Capacity map */
.capacity-panel{
  position:relative;
  overflow:hidden;
}
.capacity-map-wrap{
  position:relative;
}
.capacity-map{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:.85rem;
  background:
    radial-gradient(circle at 18% 30%, rgba(242,101,34,.08), transparent 42%),
    radial-gradient(circle at 82% 22%, rgba(249,168,37,.1), transparent 36%),
    linear-gradient(165deg,#fffdfb 0%,#fff4ed 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nibbl-orange) 12%, transparent);
}
.capacity-map__caption{
  letter-spacing:.08em;
}
.section-capacity .reveal{
  opacity:0;
  transform:translateY(16px);
}
.section-capacity .reveal.visible{
  opacity:1;
  transform:none;
  animation:.65s both fade-up;
  animation-delay:calc(var(--stagger, 0) * .05s);
}
.section-brands .reveal,
.section-services .reveal{
  opacity:0;
  transform:translateY(16px);
}
.section-brands .reveal.visible,
.section-services .reveal.visible{
  opacity:1;
  transform:none;
  animation:.65s both fade-up;
  animation-delay:calc(var(--stagger, 0) * .05s);
}
@media (prefers-reduced-motion:reduce){
  .brands-infographic__pack,
  .brands-infographic__arc,
  .services-infographic__line,
  .services-infographic__node,
  .influencer-infographic__line,
  .influencer-infographic__node,
  .section-brands .reveal,
  .section-services .reveal,
  .section-influencers .reveal,
  .section-brands .reveal.visible,
  .section-services .reveal.visible,
  .section-influencers .reveal.visible,
  .section-capacity .reveal,
  .section-capacity .reveal.visible{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    stroke-dashoffset:0!important;
  }
}

/* —— Shared surface motion (lift + soft shadow + orange border accent) —— */
:root{
  --nibbl-ease-out:cubic-bezier(.22,1,.36,1);
  --nibbl-lift:translateY(-4px) scale(1.015);
  --nibbl-lift-soft:translateY(-3px) scale(1.01);
  --nibbl-shadow-lift:0 16px 36px rgba(242,101,34,.14), 0 0 0 1px color-mix(in srgb, var(--nibbl-orange) 18%, transparent);
  --nibbl-border-lift:color-mix(in srgb, var(--nibbl-orange) 48%, var(--nibbl-line));
}

/* Base transitions for interactive surfaces */
.hero-chip,
.brand-tile,
.service-card,
.partner-tile,
.influencer-shot__chrome,
.capacity-panel,
.cert-badge__logo,
#solutions .rounded-full.bg-nibbl,
#how-it-works .size-\[68px\],
#why-nibbl-partner .rounded-2xl,
#contact .rounded-2xl.border{
  transition:
    transform .28s var(--nibbl-ease-out),
    border-color .28s ease,
    box-shadow .28s ease,
    filter .28s ease;
}
.hero-chip > span:first-child,
.brand-tile__logo,
.partner-tile__logo,
.service-card__icon,
.influencer-shot__play{
  transition:transform .28s var(--nibbl-ease-out), box-shadow .28s ease, opacity .28s ease;
}

/* Reveal timing polish (keeps existing stagger via --stagger) */
.section-brands .reveal.visible,
.section-services .reveal.visible,
.section-influencers .reveal.visible,
.section-capacity .reveal.visible{
  animation:.72s var(--nibbl-ease-out) both fade-up;
  animation-delay:calc(var(--stagger, 0) * .055s);
}

@media (hover:hover){
  /* Hero chips */
  .hero-chip:hover{
    transform:var(--nibbl-lift);
    border-color:var(--nibbl-border-lift);
    box-shadow:var(--nibbl-shadow-lift);
  }
  .hero-chip:hover > span:first-child{
    transform:scale(1.06);
  }

  /* Brand + partner tiles */
  .brand-tile:hover,
  .partner-tile:hover{
    transform:var(--nibbl-lift);
    border-color:var(--nibbl-border-lift);
    box-shadow:var(--nibbl-shadow-lift);
  }
  .brand-tile:hover .brand-tile__logo{
    transform:scale(1.06);
    opacity:1;
  }
  .partner-tile:hover .partner-tile__logo{
    transform:scale(1.06);
    opacity:1;
  }

  /* Service cards — light surfaces */
  .service-card:hover{
    transform:var(--nibbl-lift);
    border-color:var(--nibbl-border-lift);
    box-shadow:var(--nibbl-shadow-lift);
  }
  .service-card:hover .service-card__icon{
    transform:scale(1.07);
  }

  /* Services orange band: keep white cards readable; soft white rim instead of orange glow */
  .section-services--accent .service-card:hover{
    border-color:#fff;
    box-shadow:
      0 18px 40px rgba(43,43,43,.18),
      0 0 0 1px rgba(255,255,255,.55);
    transform:translateY(-4px) scale(1.012);
  }

  /* Influencer shot frames — subtle */
  .influencer-shot:hover .influencer-shot__chrome{
    transform:var(--nibbl-lift-soft);
    border-color:color-mix(in srgb, var(--nibbl-orange) 42%, var(--nibbl-line));
    box-shadow:0 18px 38px rgba(242,101,34,.18), 0 0 0 1px color-mix(in srgb, var(--nibbl-orange) 14%, transparent);
  }
  .influencer-shot:hover .influencer-shot__play{
    transform:translate(-50%,-50%) scale(1.08);
  }

  /* Solution / why icon discs */
  #solutions .rounded-full.bg-nibbl:hover{
    transform:translateY(-4px) scale(1.06);
    box-shadow:0 18px 36px rgba(242,101,34,.38);
  }

  /* How-it-works step rings (class-free hook — safe if Oreo visuals are added nearby) */
  #how-it-works .size-\[68px\]:hover{
    transform:translateY(-3px) scale(1.05);
    border-color:color-mix(in srgb, var(--nibbl-orange) 85%, #fff);
    box-shadow:0 14px 28px rgba(242,101,34,.2);
  }

  /* DIY vs Nibbl compare panels */
  #why-nibbl-partner .rounded-2xl:hover{
    transform:var(--nibbl-lift-soft);
    box-shadow:0 16px 36px rgba(43,43,43,.08);
  }
  #why-nibbl-partner .rounded-2xl.border-2:hover,
  #why-nibbl-partner .border-nibbl\/30:hover{
    border-color:color-mix(in srgb, var(--nibbl-orange) 55%, transparent);
    box-shadow:var(--nibbl-shadow-lift);
  }

  /* Capacity + contact bordered panels */
  .capacity-panel:hover{
    transform:var(--nibbl-lift-soft);
    border-color:var(--nibbl-border-lift);
    box-shadow:var(--nibbl-shadow-lift);
  }
  /* Contact panel: border/glow only — no lift while typing */
  #contact .rounded-2xl.border:hover{
    border-color:var(--nibbl-border-lift);
    box-shadow:0 18px 44px rgba(242,101,34,.1), 0 0 0 1px color-mix(in srgb, var(--nibbl-orange) 14%, transparent);
  }

  /* Cert badges — subtle */
  .cert-badge:hover .cert-badge__logo{
    transform:translateY(-2px) scale(1.06);
    filter:drop-shadow(0 8px 14px rgba(242,101,34,.16));
  }
}

/* Decorative float limited to brand pack SVGs (already animated above) */
.brands-infographic__pack{
  animation-timing-function:ease-in-out;
}

@media (prefers-reduced-motion:reduce){
  .hero-chip,
  .brand-tile,
  .service-card,
  .partner-tile,
  .influencer-shot__chrome,
  .capacity-panel,
  .cert-badge__logo,
  #solutions .rounded-full.bg-nibbl,
  #how-it-works .size-\[68px\],
  #why-nibbl-partner .rounded-2xl,
  #contact .rounded-2xl.border,
  .brand-tile__logo,
  .partner-tile__logo,
  .service-card__icon,
  .influencer-shot__play{
    transition:border-color .2s ease, box-shadow .2s ease, filter .2s ease!important;
  }
  .hero-chip:hover,
  .brand-tile:hover,
  .service-card:hover,
  .partner-tile:hover,
  .section-services--accent .service-card:hover,
  .influencer-shot:hover .influencer-shot__chrome,
  .capacity-panel:hover,
  #solutions .rounded-full.bg-nibbl:hover,
  #how-it-works .size-\[68px\]:hover,
  #why-nibbl-partner .rounded-2xl:hover,
  #contact .rounded-2xl.border:hover,
  .cert-badge:hover .cert-badge__logo,
  .hero-chip:hover > span:first-child,
  .brand-tile:hover .brand-tile__logo,
  .partner-tile:hover .partner-tile__logo,
  .service-card:hover .service-card__icon,
  .influencer-shot:hover .influencer-shot__play{
    transform:none!important;
    filter:none!important;
  }
}

/* —— DIY chaos infographic (Why Partner left card only) —— */
.diy-chaos{
  background:
    linear-gradient(165deg, #f5f7f9 0%, #f1f3f6 52%, #eceef2 100%);
  box-shadow: inset 0 0 0 1px rgba(90, 100, 120, .055);
}
/* Blueprint / planning-doc paper — subtle under chips, readable as desk texture */
.diy-chaos__blueprint{
  z-index: 0;
  opacity: .17;
  background-color: transparent;
  background-image:
    /* fine grid */
    linear-gradient(rgba(70, 105, 145, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 105, 145, .18) 1px, transparent 1px),
    /* major grid */
    linear-gradient(rgba(70, 105, 145, .28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 105, 145, .28) 1px, transparent 1px);
  background-size: 14px 14px, 14px 14px, 70px 70px, 70px 70px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
/* Subtle title-block corner (corporate drawing sheet) */
.diy-chaos__blueprint::after{
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 72px;
  height: 40px;
  border: 1px solid rgba(70, 105, 145, .22);
  background:
    linear-gradient(rgba(70, 105, 145, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 105, 145, .12) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px;
  opacity: .36;
  pointer-events: none;
}
/* Desk props — calculator + pen behind content, faintly visible */
.diy-chaos__props{
  z-index: 0;
  overflow: hidden;
}
.diy-chaos__prop{
  position: absolute;
  color: rgba(70, 105, 145, .62);
  pointer-events: none;
}
.diy-chaos__prop--calc{
  width: 92px;
  height: auto;
  left: -18px;
  bottom: -28px;
  opacity: .18;
  transform: rotate(-18deg);
}
.diy-chaos__prop--pen{
  width: 22px;
  height: auto;
  right: -4px;
  bottom: 36px;
  opacity: .20;
  transform: rotate(28deg);
}
.diy-chaos__status{
  position: relative;
}
.diy-chaos__badge{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px dashed #a39e95;
  background: #e8e5df;
  padding: .2rem .55rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #5c584f;
  transform: rotate(-2deg);
  box-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.diy-chaos__badge--pending{ transform: rotate(2.5deg); border-style: solid; background: #eceae5; }
.diy-chaos__badge--blocked{
  transform: rotate(-3.5deg) translateY(2px);
  border-color: #9a8f86;
  background: #ddd8d1;
  color: #4a453e;
}
.diy-chaos__badge--legal{
  transform: rotate(1.8deg) translateX(4px);
  border-color: #8a857c;
  border-style: solid;
  background: #d9d5ce;
}
.diy-chaos__badge--revise{ transform: rotate(-1.2deg); opacity: .92; }
.diy-chaos__badge--queue{
  transform: rotate(3deg) translateY(-1px);
  border-style: dotted;
  background: #e3e0da;
}
.diy-chaos__callout{
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #b8b2a8;
  background: rgba(255,255,255,.55);
  padding: .18rem .5rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5a564e;
  box-shadow: 1px 1px 0 rgba(90,86,78,.12);
}
.diy-chaos__callout--bottleneck{
  transform: rotate(-4deg);
  border-color: #9a8f86;
  background: #e4dfd6;
}
.diy-chaos__callout--approval{
  transform: rotate(2.5deg) translateY(3px);
  border-style: dashed;
}
.diy-chaos__callout--legal{
  transform: rotate(-1.5deg);
  background: #dcd8d1;
  border-color: #8f8a81;
}
.diy-chaos__callout--loop{
  transform: rotate(3.5deg) translateX(-2px);
  border-style: dotted;
  opacity: .9;
}
.diy-chaos__steps{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .4rem;
  margin: 0;
  padding: .35rem .15rem .15rem;
  list-style: none;
}
.diy-chaos__chip{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  border: 1px solid #c9c3b9;
  background: #f7f6f3;
  padding: .4rem .65rem;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.15;
  color: rgba(43, 43, 43, .78);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7),
    1px 2px 0 rgba(90, 86, 78, .08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.diy-chaos__chip--warn{
  border-color: #b0a89c;
  background: #ebe6de;
  color: rgba(43, 43, 43, .82);
}
.diy-chaos__chip--muted{
  border-style: dashed;
  background: #f0eeea;
  color: rgba(43, 43, 43, .62);
}
.diy-chaos__chip--ghost{
  border-style: dotted;
  background: rgba(247, 246, 243, .72);
  color: rgba(43, 43, 43, .5);
  opacity: .88;
}

/* Overlap / skew pattern — denser chaos on sm+ */
@media (min-width: 640px){
  .diy-chaos__steps{
    gap: .2rem .28rem;
    padding-top: .55rem;
  }
  .diy-chaos__chip:nth-child(3n){ transform: rotate(-3.2deg) translateY(3px); z-index: 2; }
  .diy-chaos__chip:nth-child(3n+1){ transform: rotate(2.4deg) translateY(-2px); }
  .diy-chaos__chip:nth-child(3n+2){ transform: rotate(-1.6deg) translateX(2px); }
  .diy-chaos__chip:nth-child(4n){ margin-left: -.15rem; z-index: 3; }
  .diy-chaos__chip:nth-child(5n){ margin-top: -.2rem; transform: rotate(4deg) translateY(4px); }
  .diy-chaos__chip:nth-child(7n){ transform: rotate(-5deg) translate(-2px, 2px); z-index: 4; }
  .diy-chaos__chip:nth-child(8n){ margin-left: .35rem; }
  .diy-chaos__chip:nth-child(11){ transform: rotate(6deg) translateY(-4px); z-index: 5; }
  .diy-chaos__chip:nth-child(14){ transform: rotate(-4.5deg) translate(3px, 5px); }
  .diy-chaos__chip:nth-child(19){ transform: rotate(3.8deg) translateY(-3px); }
  .diy-chaos__chip:nth-child(23){ transform: rotate(-6deg) translateX(-4px); z-index: 3; }
  .diy-chaos__chip:nth-child(26),
  .diy-chaos__chip:nth-child(27){ transform: rotate(5deg) translateY(2px); opacity: .85; }
}
@media (hover:hover){
  .diy-chaos__chip:hover{
    z-index: 6;
    border-color: #a39e95;
    background: #fff;
    box-shadow: 0 4px 10px rgba(70, 66, 58, .12);
    transform: rotate(0deg) translateY(-1px) scale(1.03);
  }
}

/* Mobile: readable density, light chaos only */
@media (max-width: 639px){
  .diy-chaos__blueprint{ opacity: .12; }
  .diy-chaos__blueprint::after{ width: 56px; height: 32px; right: 8px; bottom: 8px; }
  .diy-chaos__prop--calc{
    width: 68px;
    opacity: .10;
    left: -22px;
    bottom: -32px;
  }
  .diy-chaos__prop--pen{
    width: 16px;
    opacity: .12;
    right: -6px;
    bottom: 28px;
  }
  .diy-chaos__badge:nth-child(n+4),
  .diy-chaos__callout:nth-child(n+3){ display: none; }
  .diy-chaos__chip{
    font-size: 11px;
    padding: .35rem .55rem;
    transform: none !important;
    margin: 0 !important;
  }
  .diy-chaos__chip:nth-child(odd){ transform: rotate(-.8deg) !important; }
  .diy-chaos__chip:nth-child(even){ transform: rotate(.7deg) !important; }
  .diy-chaos__status{ gap: .35rem; }
}

@media (prefers-reduced-motion: reduce){
  .diy-chaos__chip,
  .diy-chaos__badge,
  .diy-chaos__callout{
    transition: none !important;
  }
}

/* Keep DIY panel hover colder (override shared orange lift feel slightly) */
@media (hover:hover){
  #why-nibbl-partner .diy-chaos:hover{
    transform: translateY(-2px);
    border-color: #a8a297;
    box-shadow: 0 14px 28px rgba(70, 66, 58, .1);
  }
}

/* —— Food Drop Culture page —— */
.page-drops{
  background:linear-gradient(180deg,#fffaf6 0%,#ffffff 28%,#ffffff 100%);
}
.drops-hero{
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%,rgba(242,101,34,.1),transparent 55%),
    radial-gradient(ellipse 55% 45% at 88% 10%,rgba(249,168,37,.08),transparent 50%),
    linear-gradient(180deg,#fff8f3 0%,#ffffff 100%);
}
.drops-hero__glow{display:none}
.drops-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--nibbl-orange,#f26522);
}
.drops-hero__title{
  font-size:clamp(2rem,5vw,2.75rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--nibbl-ink,#2b2b2b);
}
.drops-stats{align-items:stretch}
.drops-stat{
  padding:1.25rem 1.15rem;
  border:1px solid color-mix(in srgb, var(--nibbl-orange,#f26522) 18%, var(--nibbl-line,#e8e4df));
  border-radius:1rem;
  background:linear-gradient(160deg,#fff8f3,#ffffff);
  text-align:center;
}
.drops-stat__value{
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--nibbl-orange,#f26522);
}
.drops-stat__label{
  margin-top:.4rem;
  font-size:13px;
  line-height:1.45;
  color:var(--nibbl-muted,#6b6560);
}
.drops-loop-section{
  background:linear-gradient(180deg,#ffffff 0%,#fffaf6 100%);
}
.drops-loop{
  max-width:720px;
  margin-inline:auto;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.drops-loop__svg{
  display:block;
  width:100%;
  min-width:520px;
  height:auto;
}
.drops-loop__path{
  animation:drops-dash 18s linear infinite;
}
@keyframes drops-dash{
  to{stroke-dashoffset:-160}
}
.drops-loop__list{list-style:none;margin:0;padding:0}
.drops-loop__item{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:1rem 1.05rem;
  border:1px solid var(--nibbl-line,#e8e4df);
  border-radius:.9rem;
  background:#fff;
}
.drops-loop__item strong{
  font-size:14px;
  font-weight:800;
  color:var(--nibbl-ink,#2b2b2b);
}
.drops-loop__item span{
  font-size:13px;
  line-height:1.5;
  color:var(--nibbl-muted,#6b6560);
}
.drops-compare__panel{
  padding:1.35rem 1.25rem;
  border-radius:1rem;
  border:1px solid var(--nibbl-line,#e8e4df);
  background:#fff;
}
.drops-compare__panel--drop{
  border-color:color-mix(in srgb, var(--nibbl-orange,#f26522) 28%, var(--nibbl-line,#e8e4df));
  background:linear-gradient(160deg,#fff8f3,#ffffff);
}
.drops-compare__tag{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--nibbl-muted,#6b6560);
}
.drops-compare__panel--drop .drops-compare__tag{
  color:var(--nibbl-orange,#f26522);
}
.drops-compare__panel ul{
  margin:.85rem 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.55rem;
}
.drops-compare__panel li{
  position:relative;
  padding-left:1rem;
  font-size:13.5px;
  line-height:1.5;
  color:var(--nibbl-muted,#6b6560);
}
.drops-compare__panel li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:.4rem;
  height:.4rem;
  border-radius:999px;
  background:color-mix(in srgb, var(--nibbl-ink,#2b2b2b) 28%, transparent);
}
.drops-compare__panel--drop li::before{
  background:var(--nibbl-orange,#f26522);
}
.drops-brand{
  padding:1.25rem 1.2rem;
  border:1px solid color-mix(in srgb, var(--nibbl-orange,#f26522) 16%, var(--nibbl-line,#e8e4df));
  border-radius:1rem;
  background:#fff;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.drops-brand--featured{
  background:linear-gradient(160deg,#fff8f3,#ffffff);
}
@media (hover:hover){
  .drops-brand:hover{
    border-color:color-mix(in srgb, var(--nibbl-orange,#f26522) 42%, var(--nibbl-line,#e8e4df));
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(242,101,34,.1);
  }
}
.drops-brand__cat{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--nibbl-orange,#f26522);
}
.drops-brand__name{
  margin-top:.35rem;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--nibbl-ink,#2b2b2b);
}
.drops-brand__copy{
  margin-top:.55rem;
  font-size:13.5px;
  line-height:1.6;
  color:var(--nibbl-muted,#6b6560);
}
.drops-nibbl-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1rem;
}
@media (min-width:768px){
  .drops-nibbl-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.15rem;
  }
}
.drops-nibbl-step{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding:1.15rem 1.1rem;
  border:1px solid var(--nibbl-line,#e8e4df);
  border-radius:1rem;
  background:linear-gradient(160deg,#fffaf6,#ffffff);
}
.drops-nibbl-step__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:2.35rem;
  height:2.35rem;
  border-radius:999px;
  border:1.5px solid color-mix(in srgb, var(--nibbl-orange,#f26522) 35%, var(--nibbl-line,#e8e4df));
  background:#fff4ed;
  font-size:11px;
  font-weight:800;
  color:var(--nibbl-orange,#f26522);
}
.drops-nibbl-step h3{
  font-size:15px;
  font-weight:800;
  color:var(--nibbl-ink,#2b2b2b);
}
.drops-nibbl-step p{
  margin-top:.35rem;
  font-size:13px;
  line-height:1.55;
  color:var(--nibbl-muted,#6b6560);
}
.drops-cta-band{
  padding-top:2.5rem; /* 40px */
  padding-bottom:3.5rem; /* 56px — clear orange buffer below Back button */
}
@media (min-width:1024px){
  .drops-cta-band{
    padding-top:3rem;
    padding-bottom:3.5rem;
  }
}
.drops-disclaimer{
  letter-spacing:.01em;
}
.snack-drops__learn-more{
  color:var(--nibbl-orange,#f26522);
}
.page-drops .reveal{
  opacity:0;
  transform:translateY(16px);
}
.page-drops .reveal.visible{
  opacity:1;
  transform:none;
  animation:.72s var(--nibbl-ease-out,cubic-bezier(.22,1,.36,1)) both fade-up;
  animation-delay:calc(var(--stagger, 0) * .055s);
}
@media (prefers-reduced-motion: reduce){
  .drops-loop__path{animation:none!important}
  .page-drops .reveal,
  .page-drops .reveal.visible{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .drops-brand:hover{transform:none}
}
@media (max-width:639px){
  .drops-stat{padding:1.05rem}
  .drops-brand{padding:1.1rem 1rem}
}

/* —— "What is a Nibbl?" examples section — handled entirely by inline styles —— */

/* ── Campaign Performance Widget Animations ── */
@keyframes cp-line-draw{
  from{stroke-dashoffset:var(--cp-path-len,600)}
  to{stroke-dashoffset:0}
}
@keyframes cp-glow-pulse{
  0%,100%{opacity:.18}
  50%{opacity:.38}
}
@keyframes cp-value-pop{
  0%{opacity:0;transform:translateY(6px)}
  60%{opacity:1;transform:translateY(-2px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes cp-dot-blink{
  0%,100%{opacity:1}
  50%{opacity:.25}
}

/* live indicator dot */
.campaign-performance__live{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:9px;
  font-weight:600;
  color:var(--nibbl-muted);
  line-height:1.3;
}
.campaign-performance__live-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#22c55e;
  flex-shrink:0;
}

/* graph line draw + glow */
.campaign-performance__graph .cp-line{
  stroke-dasharray:var(--cp-path-len,600);
  stroke-dashoffset:var(--cp-path-len,600);
  transition:none;
}
.campaign-performance__graph .cp-fill{
  opacity:0;
  transition:opacity .4s ease .9s;
}
.campaign-performance.cp-animated .cp-line{
  animation:cp-line-draw 1.1s cubic-bezier(.4,0,.2,1) .15s both;
}
.campaign-performance.cp-animated .cp-fill{
  opacity:.25;
}

/* stat value pop-in */
.campaign-performance__value{
  transition:none;
}
.campaign-performance.cp-animated .campaign-performance__value{
  animation:cp-value-pop .5s cubic-bezier(.22,1,.36,1) both;
}
.campaign-performance.cp-animated .campaign-performance__stat:nth-child(1) .campaign-performance__value{animation-delay:.3s}
.campaign-performance.cp-animated .campaign-performance__stat:nth-child(2) .campaign-performance__value{animation-delay:.45s}
.campaign-performance.cp-animated .campaign-performance__stat:nth-child(3) .campaign-performance__value{animation-delay:.6s}
.campaign-performance.cp-animated .campaign-performance__stat:nth-child(4) .campaign-performance__value{animation-delay:.75s}

/* live dot blink (always on once widget is visible) */
.campaign-performance.cp-animated .campaign-performance__live-dot{
  animation:cp-dot-blink 1.8s ease-in-out 1.4s infinite;
}

/* accent value subtle ongoing pulse */
@keyframes cp-accent-tick{
  0%,90%,100%{color:var(--nibbl-orange)}
  95%{color:#f97316}
}
.campaign-performance.cp-animated .campaign-performance__value--accent{
  animation:cp-value-pop .5s cubic-bezier(.22,1,.36,1) .75s both,
            cp-accent-tick 4s ease-in-out 2s infinite;
}

@media (prefers-reduced-motion:reduce){
  .campaign-performance.cp-animated .cp-line,
  .campaign-performance.cp-animated .campaign-performance__value,
  .campaign-performance.cp-animated .campaign-performance__value--accent,
  .campaign-performance.cp-animated .campaign-performance__live-dot{
    animation:none!important;
  }
  .campaign-performance.cp-animated .cp-fill{opacity:.25}
  .campaign-performance.cp-animated .campaign-performance__value{opacity:1;transform:none}
}

/* Portal / app UI helpers (CSP-safe; no inline handlers needed) */
.text-nibbl-orange{color:var(--nibbl-orange,#f26522)}
.btn-nibbl{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:var(--nibbl-orange,#f26522);
  color:#fff;
  font-weight:600;
  border-radius:0.5rem;
  transition:opacity .2s ease;
  cursor:pointer;
  text-decoration:none;
  border:none;
}
.btn-nibbl:hover{opacity:.9}
.btn-nibbl:disabled,
.btn-nibbl[aria-disabled="true"]{
  background-color:#f0f0f0;
  color:#999;
  cursor:not-allowed;
  opacity:1;
}
.btn-nibbl-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--nibbl-ink,#2b2b2b);
  font-weight:600;
  border-radius:0.5rem;
  border:1px solid var(--nibbl-line,#e8e4df);
  transition:background-color .2s ease;
  cursor:pointer;
  text-decoration:none;
}
.btn-nibbl-secondary:hover{background-color:#f5f5f5}

/* Portal status / alert utilities (used by admin, partner, consumer pages; not in compiled styles.css) */
.bg-emerald-100{background-color:#d1fae5}
.text-emerald-700{color:#047857}
.text-emerald-600{color:#059669}
.bg-blue-100{background-color:#dbeafe}
.text-blue-700{color:#1d4ed8}
.bg-red-100{background-color:#fee2e2}
.text-red-600{color:#dc2626}
.text-red-700{color:#b91c1c}
.bg-gray-100{background-color:#f3f4f6}
.text-gray-700{color:#374151}
.hover\:bg-gray-100:hover{background-color:#f3f4f6}
.bg-\[\#fff5f5\]{background-color:#fff5f5}
.bg-\[\#f0fdf4\]{background-color:#f0fdf4}
.border-red-600\/20{border-color:rgba(220,38,38,.2)}
.border-emerald-600\/20{border-color:rgba(5,150,105,.2)}
.border-amber-600\/20{border-color:rgba(217,119,6,.2)}
.bg-amber-100{background-color:#fef3c7}
.text-amber-600{color:#d97706}
.text-amber-700{color:#b45309}
.text-purple-700{color:#6d28d9}
.hover\:text-purple-800:hover{color:#5b21b6}