Pillar page — extension styles
   Builds on kit.css (which is loaded first).
   ======================================================================== */

.tw-page { background:#fff; }
.pp-density-airy section { padding-top: 112px; padding-bottom: 112px; }
.pp-density-compact section { padding-top: 64px; padding-bottom: 64px; }

/* Buttons: never underline anchor variants */
.tw-btn { text-decoration: none !important; }
a { text-decoration: none; }

/* ===================== HERO ===================== */
.pp-hero{
  position:relative; padding: 88px 80px 88px;
  background: linear-gradient(180deg, #F5EEFC 0%, #EDF0FC 50%, #F5EEFC 100%);
  overflow:hidden; min-height: 720px;
}
.pp-hero-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.pp-hero-lines{ position:absolute; inset:0; width:100%; height:100%; }
.pp-hl{
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  animation: pp-draw 5.5s cubic-bezier(.22,.7,.2,1) .2s forwards;
}
.pp-hl-2{ animation-delay: .8s; }
.pp-hl-3{ animation-delay: 1.4s; }
@keyframes pp-draw { to { stroke-dashoffset: 0; } }

/* hero bg eggs */
.pp-hero-egg{ position:absolute; pointer-events:none;
  border-radius: 50% 50% 40% 60% / 50% 60% 40% 50%;
          
}
.pp-hero-egg-1{ right:-180px; top:-140px; width:560px; height:632px; background:#D6BAF2; opacity:.45; transform:rotate(-12deg);
  animation: pp-drift-a 14s ease-in-out infinite alternate; }
.pp-hero-egg-2{ left:-200px; bottom:-220px; width:420px; height:472px; background:#DCE2FA; opacity:.55; transform:rotate(10deg);
  animation: pp-drift-b 16s ease-in-out infinite alternate; }
@keyframes pp-drift-a { from { transform: rotate(-12deg) translate(0,0); } to { transform: rotate(-8deg) translate(-20px,18px); } }
@keyframes pp-drift-b { from { transform: rotate(10deg) translate(0,0); } to { transform: rotate(14deg) translate(20px,-18px); } }

/* hero inner: centered stack */
.pp-hero-inner.pp-hero-center{
  position:relative; z-index:2; max-width:980px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.pp-hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:600 13px/1 'Poppins'; letter-spacing:.14em; color:#3E5EE2;
  background:#fff; padding:8px 16px 8px 8px; border-radius:999px; border:1px solid #DCE2FA;
  box-shadow: 0 1px 2px rgba(25,7,80,.04);
  animation: pp-rise .7s cubic-bezier(.22,.7,.2,1) both;
}
.pp-hero-eyebrow-dot{ width:18px; height:18px; border-radius:999px;
  background: linear-gradient(135deg,#3E5EE2,#7526C5); display:inline-block; }

.pp-hero h1{
  font:600 68px/1.06 'Poppins'; color:#190750; letter-spacing:-.022em;
  margin:22px 0 22px;
  animation: pp-rise .85s cubic-bezier(.22,.7,.2,1) .08s both;
}
.pp-hero h1 em{
  font-style:normal;
  background: linear-gradient(135deg,#3E5EE2 0%, #7526C5 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pp-hero h1 .pp-hero-h1-tail{ font-weight:500; opacity:.85; }

.pp-hero-sub{
  font-size:18px; line-height:1.55; color:#190750; opacity:.86;
  max-width:860px; margin:0 0 28px;
  animation: pp-rise .9s cubic-bezier(.22,.7,.2,1) .16s both;
  text-wrap: balance;
}
.pp-hero-cta{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center;
  animation: pp-rise .9s cubic-bezier(.22,.7,.2,1) .22s both;
}
.pp-hero-cta .tw-btn-primary{ padding:15px 28px; font-size:15px; }
.pp-hero-jump{ font:600 14px/1 'Poppins'; color:#190750;
  display:inline-flex; align-items:center; gap:8px; padding:14px 8px; }
.pp-hero-jump:hover{ color:#3E5EE2; }

@keyframes pp-rise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }

/* hero stat band below CTAs */
.pp-hero-stat-band{
  margin-top: 56px; padding: 22px 32px;
  display:inline-flex; align-items:center; gap:28px;
  background:#fff; border:1px solid #DCE2FA; border-radius: 999px;
  box-shadow: 0 12px 36px rgba(25,7,80,.08);
  animation: pp-rise 1s cubic-bezier(.22,.7,.2,1) .35s both;
  position:relative; z-index:2;
}
.pp-hero-stat-num{
  font:600 56px/.9 'Poppins'; letter-spacing:-.025em;
  background: linear-gradient(135deg,#3E5EE2 0%, #7526C5 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  flex-shrink:0;
}
.pp-hero-stat-cap{ font-size:14px; line-height:1.45; color:#190750; text-align:left; max-width:380px; }

/* Floating cards */
.pp-float{
  position:absolute; z-index:1; background:#fff;
  border:1px solid #EDF0FC; border-radius:18px;
  padding:14px 16px;
  box-shadow: 0 16px 40px rgba(25,7,80,.08);
  font-family:'Poppins'; color:#190750;
  animation: pp-float-y 7s ease-in-out infinite alternate, pp-float-in .8s cubic-bezier(.22,.7,.2,1) both;
}
@keyframes pp-float-in { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes pp-float-y { from { transform: translateY(0); } to { transform: translateY(-10px); } }

.pp-float-a{ left: 6%;  top: 110px; animation-delay: 0s, .5s; }
.pp-float-b{ right: 8%; top: 90px;  animation-delay: 0s, .7s; }
.pp-float-c{ left: 4%;  bottom: 110px; animation-delay: 0s, .9s; }
.pp-float-d{ right: 5%; bottom: 140px; animation-delay: 0s, 1.1s; }

.pp-float-tag{ font:600 11px/1 'Poppins'; letter-spacing:.14em; color:#3E5EE2; margin-bottom:6px; }
.pp-float-num{ font:600 26px/1 'Poppins'; letter-spacing:-.01em;
  background: linear-gradient(135deg,#3E5EE2,#7526C5);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pp-float-cap{ font-size:11px; opacity:.7; margin-top:2px; }
.pp-float-mini{ font-size:11px; opacity:.7; }
.pp-float-row{ display:flex; align-items:center; gap:7px; font:500 12px/1.2 'Poppins'; }
.pp-float-dot{ width:7px; height:7px; border-radius:999px; background:#3E5EE2;
  box-shadow: 0 0 0 4px rgba(62,94,226,.18);
  animation: pp-pulse 1.6s ease-in-out infinite;
}
.pp-float-dot-violet{ background:#7526C5; box-shadow: 0 0 0 4px rgba(117,38,197,.18); }
@keyframes pp-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(62,94,226,.30)} 50%{box-shadow:0 0 0 6px rgba(62,94,226,0)} }
.pp-float-spark{ display:block; width:80px; height:18px; margin-top:6px; }

/* ===================== TRUST STRIP (marquee) ===================== */
.pp-trust{
  padding: 36px 0 72px;
  background: linear-gradient(180deg, #F5EEFC 0%, #F5EEFC 55%, #fff 100%);
  overflow: hidden;
}
.pp-trust-label{
  display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;
  font:500 15px/1.4 'Poppins'; color:#190750; text-align:center;
  padding: 0 24px 28px;
}
.pp-trust-label b{ font-weight:700; color:#3E5EE2; }
.pp-trust-dot{ opacity:.55; }

.pp-trust-marquee{
  position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.pp-trust-track{
  display: flex; align-items: center; gap: 80px;
  width: max-content;
  animation: pp-marquee 42s linear infinite;
}
.pp-trust:hover .pp-trust-track{ animation-play-state: paused; }
.pp-trust-cell{
  flex: 0 0 auto;
  display:flex; align-items:center; justify-content:center;
  height: 48px;
}
.pp-trust-cell img{
  height: 32px; width: auto; max-width: 160px;
  opacity: .95;
  display: block;
}
@keyframes pp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===================== SECTION HEADER ===================== */
.pp-section{ padding: 64px 80px; max-width:1440px; margin:0 auto; }
.pp-section-head{ max-width: 1200px; margin: 0 auto 40px; text-align:center; }
.pp-section-eyebrow{ font:600 13px/1 'Poppins'; letter-spacing:.14em; color:#3E5EE2; margin-bottom:14px; }
.pp-section-title{
  font:600 48px/1.12 'Poppins'; color:#190750; letter-spacing:-.018em; margin:0;
  max-width: 1100px; margin-left:auto; margin-right:auto;
  text-wrap: balance;
}
.pp-section-sub{
  font-size:17px; line-height:1.55; color:#190750; opacity:.82;
  margin:18px auto 0; max-width:920px;
  text-wrap: balance;
}

/* ===================== RETHINK section ===================== */
.pp-rethink{ background:#fff; }
.pp-rethink-grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap:24px; max-width:1280px; margin: 0 auto; }
.pp-rethink-col{ border-radius:28px; padding:36px; border:1px solid #E5E7EA; background:#fff; }
.pp-rethink-col.pp-tw{
  background:#fff; border:1px solid transparent; position:relative;
  box-shadow: 0 24px 60px rgba(62,94,226,.10);
}
.pp-rethink-col.pp-tw::before{
  content:""; position:absolute; inset:-1px; border-radius:28px; padding:1px;
  background: linear-gradient(135deg,#3E5EE2 0%, #7526C5 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.pp-rethink-tag{ display:inline-flex; align-items:center; gap:8px;
  font:600 12px/1 'Poppins'; letter-spacing:.14em; color:#190750; opacity:.7;
  padding:6px 12px; background:#F5EEFC; border-radius:999px; margin-bottom:18px; }
.pp-rethink-col.pp-tw .pp-rethink-tag{
  color:#fff; opacity:1; background:linear-gradient(135deg,#3E5EE2 0%, #7526C5 100%);
}
.pp-rethink-h{ font:600 28px/1.2 'Poppins'; color:#190750; margin:0 0 22px; letter-spacing:-.005em; }
.pp-rethink-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.pp-rethink-list li{ display:flex; gap:14px; align-items:center; padding:14px 0; font-size:16px; line-height:1.4; color:#190750;
  border-bottom:1px solid #EDF0FC;
  opacity:0; transform: translateX(-8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.7,.2,1);
}
.pp-rethink.is-in .pp-rethink-list li{ opacity:1; transform: translateX(0); }
.pp-rethink-list li:last-child{ border-bottom:0; }
.pp-rethink-icon{ width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.pp-rethink-col.pp-trad .pp-rethink-icon{ color:#190750; opacity:.55; }
.pp-rethink-col.pp-tw   .pp-rethink-icon{ color:#3E5EE2; }
.pp-rethink-foot{ margin-top:24px; padding-top:20px; border-top:1px dashed #E5E7EA; font-size:14px; color:#190750; opacity:.78; }
.pp-rethink-col.pp-tw .pp-rethink-foot{ opacity:1; color:#190750; font-weight:500; }

/* SVG check/x stroke draw animations */
.pp-anim-svg{ width:24px; height:24px; }
.pp-anim-svg polyline,
.pp-anim-svg line{
  stroke-dasharray: 60; stroke-dashoffset: 60;
}
.pp-rethink.is-in .pp-anim-svg polyline,
.pp-rethink.is-in .pp-anim-svg line{
  animation: pp-draw-mark .55s cubic-bezier(.22,.7,.2,1) forwards;
}
@keyframes pp-draw-mark { to { stroke-dashoffset: 0; } }

/* ===================== OS — anatomy layout (NEW) ===================== */
.pp-os.pp-os-anatomy{
  max-width: 1280px; margin: 0 auto;
  background: linear-gradient(180deg, #fff 0%, #F8F6FE 100%);
  border: 1px solid #DCE2FA;
  border-radius: 32px;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(25,7,80,.06);
  display: grid;
  grid-template-columns: 0.85fr 1.6fr;
  grid-template-rows: auto auto;
  gap: 24px;
  position: relative; overflow: hidden;
}

/* soft brand accent in the bg */
.pp-os.pp-os-anatomy::before{
  content:""; position:absolute; right:-160px; top:-160px; width:520px; height:586px;
  background: linear-gradient(135deg, rgba(62,94,226,.10), rgba(117,38,197,.06));
  border-radius: 50% 50% 40% 60% / 50% 60% 40% 50%;
          
  transform: rotate(-12deg);
  pointer-events: none;
}

/* === LEFT: Traditional (compact) === */
.pp-os-old{
  background: #fff;
  border: 1px solid #E5E7EA;
  border-radius: 24px;
  padding: 28px 28px 26px;
  display: flex; flex-direction: column;
  align-self: stretch;
  position: relative;
}
.pp-os-old-tag{
  display: inline-flex; align-items: center; gap: 8px;
  font:600 11px/1 'Poppins'; letter-spacing:.14em; color:#190750; opacity:.7;
  padding:6px 12px; background:#F5EEFC; border-radius:999px;
  margin-bottom: 14px; align-self: flex-start;
}
.pp-os-old-h{
  font:600 26px/1.15 'Poppins'; color:#190750; margin: 0 0 18px; letter-spacing:-.005em;
}
.pp-os-old-list{ flex: 1; }
.pp-os-old-list li{
  border-bottom: 1px solid #EDF0FC; padding: 12px 0;
  font-size: 15px;
}
.pp-os-old-list .pp-rethink-icon{ color: #190750; opacity: .5; }
.pp-os-old-foot{
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed #E5E7EA;
  font:500 12px/1.4 'Poppins'; color:#190750; opacity:.6;
  letter-spacing: .04em;
}

/* === RIGHT: Tastewise OS (3-layer architecture stack) === */
.pp-os-new{
  position: relative;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  align-self: stretch;
  box-shadow: 0 16px 40px rgba(62,94,226,.10);
}
.pp-os-new::before{
  content:""; position:absolute; inset:-1px; border-radius:24px; padding:1px;
  background: linear-gradient(135deg, #3E5EE2 0%, #7526C5 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.pp-os-new-tag{
  display: inline-flex; align-items: center; gap: 8px;
  font:600 11px/1 'Poppins'; letter-spacing:.14em; color:#fff;
  padding:6px 12px;
  background: linear-gradient(135deg, #3E5EE2, #7526C5);
  border-radius:999px; align-self: flex-start;
  margin-bottom: 4px;
}
.pp-os-new-h{
  font:600 26px/1.15 'Poppins'; color:#190750; margin: 0 0 8px; letter-spacing:-.005em;
}
.pp-os-new-foot{
  margin-top: 6px; padding-top: 12px;
  border-top: 1px dashed #E5E7EA;
  font:500 12px/1.4 'Poppins'; color:#190750; opacity:.78;
  letter-spacing: .02em;
}

/* === Stack steps === */
.pp-os-stack{
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.pp-os-stack-step{
  display: grid; grid-template-columns: 48px 1fr; gap: 16px;
  padding: 14px 16px;
  background: #FAFBFF;
  border: 1px solid #EDF0FC;
  border-radius: 14px;
  align-items: center;
  transition: background .18s ease, border-color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.pp-os-stack-step:hover{
  background:#fff; border-color:#DCE2FA;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(25,7,80,.04);
}
.pp-os-stack-step-foundation{
  background: linear-gradient(180deg, #EDF0FC 0%, #F5EEFC 100%);
  border-color: #DCE2FA;
}
.pp-os-stack-num{
  display:flex; align-items:center; justify-content:center;
  font:700 13px/1 'Poppins'; letter-spacing:.06em;
  color: #fff;
  background: linear-gradient(135deg, #3E5EE2, #7526C5);
  width:36px; height:36px; border-radius:10px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(62,94,226,.20);
}
.pp-os-stack-body{ display: flex; flex-direction: column; gap: 6px; }
.pp-os-stack-label{
  font:600 11px/1 'Poppins'; letter-spacing:.14em; color:#3E5EE2;
}
.pp-os-stack-sub{ color:#190750; opacity:.6; font-weight: 500; letter-spacing: .02em; }
.pp-os-stack-items{ display: flex; flex-wrap: wrap; gap: 6px; }
.pp-os-stack-pill{
  font:500 13px/1.25 'Poppins'; color:#190750;
  padding: 6px 10px; background:#fff; border:1px solid #DCE2FA;
  border-radius: 8px; white-space: nowrap;
}
.pp-os-stack-step-foundation .pp-os-stack-pill{ background: rgba(255,255,255,.7); }

/* Connector between layers */
.pp-os-stack-connector{
  width: 2px; height: 14px;
  background: linear-gradient(180deg, #7526C5 0%, #3E5EE2 100%);
  margin: 0 auto;
  opacity: .35;
  border-radius: 2px;
}

/* Active statement under each layer label */
.pp-os-stack-statement{
  font:500 14.5px/1.5 'Poppins'; color:#190750; opacity:.86;
  margin-top: 4px; max-width: 60ch;
}

/* Increase breathing room between layers so it scans fast */
.pp-os-stack-step{ padding: 18px 20px; gap: 18px; }
.pp-os-stack-step .pp-os-stack-num{ width: 40px; height: 40px; font-size: 13px; }
.pp-os-stack-label{
  font:600 11.5px/1 'Poppins'; letter-spacing:.14em; color:#3E5EE2;
  text-transform: none;
}
.pp-os-stack-connector{ height: 18px; opacity: .25; }

/* === Bottom inline trust band, full width === */
.pp-os-trust{
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding-top: 4px;
  border-top: 1px solid #DCE2FA;
  margin-top: 8px; padding-top: 22px;
}
.pp-os-trust-item{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 4px 8px;
}
.pp-os-trust-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, #3E5EE2, #7526C5);
  flex-shrink: 0; margin-top: 6px;
  box-shadow: 0 0 0 4px rgba(62,94,226,.10);
}
.pp-os-trust-h{ font:600 14px/1.25 'Poppins'; color:#190750; }
.pp-os-trust-body{ font-size: 12.5px; line-height: 1.5; color:#190750; opacity:.78; margin-top: 2px; }
.pp-why{
  background: linear-gradient(180deg, #fff 0%, #EDF0FC 18%, #EDF0FC 82%, #fff 100%);
}
.pp-why-stack{ max-width: 1280px; margin: 0 auto; display: grid; gap: 20px; }

/* Top: data layer pill-card */
.pp-why-layer{
  background:#fff; border:1px solid #DCE2FA; border-radius: 24px;
  padding: 32px 40px;
  box-shadow: 0 2px 6px rgba(25,7,80,.04);
}
.pp-why-layer-head{
  font:600 22px/1.25 'Poppins'; color:#3E5EE2; text-align:center;
  letter-spacing:-.005em; margin-bottom: 22px;
}
.pp-why-layer-grid{
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: 32px; align-items: start;
}
.pp-why-layer-divider{ background:#DCE2FA; height:60px; align-self:center; }
.pp-why-layer-col{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.pp-why-layer-eyebrow{
  font:600 12px/1 'Poppins'; letter-spacing:.14em; color:#3E5EE2;
}
.pp-why-layer-chips{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: 8px 12px;
  font:500 15px/1.4 'Poppins'; color:#190750;
}
.pp-why-chip{ white-space: nowrap; }
.pp-why-chip-dot{ color:#190750; opacity:.35; }

/* Bottom: 4 differentiator cards */
.pp-why-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.pp-why-card{
  background:#fff; border:1px solid #DCE2FA; border-radius: 24px;
  padding: 28px 26px;
  display:flex; flex-direction:column; gap: 14px;
  min-height: 220px;
  box-shadow: 0 2px 6px rgba(25,7,80,.04);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.pp-why-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(25,7,80,.08);
}
.pp-why-card-h{
  font:600 20px/1.25 'Poppins'; color:#3E5EE2;
  letter-spacing:-.005em; text-align:center;
  padding-bottom: 14px; border-bottom: 1px solid #EDF0FC;
}
.pp-why-stats{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px; }
.pp-why-stats li{
  font:500 15px/1.4 'Poppins'; color:#190750;
  display: flex; gap: 8px; align-items: baseline;
}
.pp-why-stats li b{
  font:700 16px/1 'Poppins'; color:#190750; min-width: 70px;
}
.pp-why-card-body{
  font-size:15px; line-height:1.55; color:#190750; margin:0; flex:1;
}
.pp-why-card-logos{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px;
  align-items: center; justify-items: center;
}
.pp-why-card-logos img{
  max-height: 22px; max-width: 100%; width: auto; opacity: .92;
}
.pp-why-card-foot{
  font-size: 13px; line-height:1.5; color:#190750; opacity:.78; margin: 4px 0 0;
  text-align: center;
}

/* ===================== MATRIX ===================== */
.pp-matrix-wrap{ background:#fff; }
.pp-matrix-card{ max-width:1440px; margin: 0 auto; border:1px solid #E5E7EA; border-radius:28px; overflow:hidden; box-shadow: 0 2px 6px rgba(25,7,80,.04); }
.pp-matrix-head{
  display:grid; grid-template-columns: 280px repeat(13, minmax(64px, 1fr));
  background:#fff; border-bottom:1px solid #E5E7EA;
  position:sticky; top:0; z-index:5;
}
.pp-matrix-row{
  display:grid; grid-template-columns: 280px repeat(13, minmax(64px, 1fr));
  border-bottom:1px solid #EDF0FC;
}
.pp-matrix-row:last-child{ border-bottom:0; }
.pp-matrix-row:hover{ background:#F5EEFC; }
.pp-mcell{
  padding:18px 6px; display:flex; align-items:center; justify-content:center;
  font:500 13px/1.3 'Poppins'; color:#190750;
}
.pp-mcell-rowlabel{
  justify-content:flex-start; padding:18px 20px 18px 28px; font-weight:500; font-size:14px;
  border-right:1px solid #EDF0FC; background:#fff;
}
.pp-mcell-tw{
  background: linear-gradient(180deg,#3E5EE2 0%, #7526C5 100%);
  color:#fff;
}
.pp-mcell-head{ padding:18px 4px; font:600 12px/1.2 'Poppins'; color:#190750; }
.pp-mcell-head .pp-cmark{ display:block; margin-bottom:8px; font-size:10px; letter-spacing:.14em; opacity:.55; }
.pp-mcell-head.pp-mcell-tw .pp-cmark{ opacity:.85; color:#fff; }
.pp-mcell-head .pp-cname{ display:block; font-size:12px; line-height:1.3; }
.pp-matrix-head .pp-mcell-rowlabel{ font:600 12px/1 'Poppins'; color:#190750; opacity:.55; letter-spacing:.14em; }

.pp-mark{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; }
.pp-mark-full{ background:#3E5EE2; color:#fff; }
.pp-mcell-tw .pp-mark-full{ background:#fff; color:#3E5EE2; }
.pp-mark-partial{ background:#fff; color:#190750; border:1.5px solid #190750; }
.pp-mcell-tw .pp-mark-partial{ background:transparent; color:#fff; border-color:#fff; }
.pp-mark-none{ width:18px; height:1.5px; background:#190750; opacity:.25; border-radius:2px; }
.pp-mcell-tw .pp-mark-none{ background:#fff; opacity:.55; }
.pp-mark-full svg, .pp-mark-partial svg{ width:12px; height:12px; }

.pp-matrix-legend{
  display:flex; justify-content:center; gap:28px; margin-top:24px; flex-wrap:wrap;
  font:500 13px/1 'Poppins'; color:#190750;
}
.pp-matrix-legend > span{ display:inline-flex; align-items:center; gap:8px; }

/* ===================== COMPETITOR cards ===================== */
.pp-comps{ background:#fff; }
.pp-comp-filters{ display:flex; justify-content:center; gap:8px; margin: 0 auto 40px; flex-wrap:wrap; }
.pp-chip{
  font:600 13px/1 'Poppins'; color:#190750; padding:10px 16px;
  border:1px solid #DCE2FA; background:#fff; border-radius:999px; cursor:pointer;
  transition:all .18s cubic-bezier(.2,.8,.2,1);
}
.pp-chip:hover{ border-color:#3E5EE2; color:#3E5EE2; }
.pp-chip.is-active{ background:#190750; color:#fff; border-color:#190750; }
.pp-comp-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
  max-width:1280px; margin:0 auto;
}
.pp-comp-card{
  background:#fff; border:1px solid #E5E7EA; border-radius:24px; padding:28px 28px 24px;
  position:relative; transition: all .2s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
}
.pp-comp-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(25,7,80,.08);
  border-color:#DCE2FA;
}
.pp-comp-cat{ font:600 11px/1 'Poppins'; letter-spacing:.14em; color:#190750; opacity:.55; margin-bottom:10px; }
.pp-comp-name{ font:600 22px/1.15 'Poppins'; color:#190750; margin:0 0 16px; letter-spacing:-.005em; display:flex; align-items:center; gap:14px; }
.pp-comp-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width: 88px; height: 44px; padding: 4px 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #EDF0FC;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(25,7,80,.04);
}
.pp-comp-logo img{
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
.pp-comp-built{ font-size:15px; line-height:1.5; color:#190750; opacity:.78; margin:0 0 14px; }
.pp-comp-built b{ font-weight:600; color:#190750; opacity:1; }
.pp-comp-contrast{
  font-size:15px; line-height:1.55; color:#190750; margin:0 0 20px;
  padding-top:16px; border-top:1px dashed #EDF0FC;
  flex:1;
}
.pp-comp-contrast::before{ content:"Tastewise"; display:block; font:600 11px/1 'Poppins'; letter-spacing:.14em; color:#3E5EE2; margin-bottom:8px; }
.pp-comp-link{
  align-self:flex-start;
  font:600 13px/1 'Poppins'; color:#3E5EE2;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px;
  background:#EDF0FC; border:1px solid transparent;
  transition: all .18s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}
.pp-comp-link svg{ width:14px; height:14px; transition: transform .18s ease; }
.pp-comp-link:hover{ background:#fff; border-color:#3E5EE2; }
.pp-comp-link:hover svg{ transform: translateX(3px); }
.pp-comp-card:hover .pp-comp-link{ background:#fff; border-color:#3E5EE2; }

/* ===================== QUOTE + STATS (merged) ===================== */
.pp-quote{
  background: linear-gradient(180deg, #fff 0%, #F5EEFC 25%, #F5EEFC 75%, #fff 100%);
  padding: 48px 80px;
}
.pp-quote-card{
  max-width: 1040px; margin: 0 auto;
  background:#fff; border-radius: 28px;
  border:1px solid #EDF0FC; box-shadow: 0 20px 48px rgba(25,7,80,.06);
  display:grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  overflow:hidden;
}
.pp-quote-side{ padding: 36px 44px 32px; display:flex; flex-direction:column; }
.pp-quote-glyph{ width: 44px; height: 34px; display:block; margin: 0 0 18px; }
.pp-quote-body{
  font:500 22px/1.35 'Poppins'; color:#190750; letter-spacing:-.003em; margin:0;
}
.pp-quote-attr{
  margin-top: 24px; display:flex; align-items:center; gap:14px;
}
.pp-quote-avatar{
  width: 48px; height: 48px; border-radius: 999px; object-fit: cover;
  background:#EDF0FC; flex-shrink:0;
  box-shadow: 0 2px 6px rgba(25,7,80,.06);
}
.pp-quote-attr-text{ display:flex; flex-direction:column; gap:3px; }
.pp-quote-attr-name{ font:600 15px/1.2 'Poppins'; color:#190750; }
.pp-quote-attr-role{ display:flex; align-items:center; gap:8px; font:500 12.5px/1 'Poppins'; color:#190750; opacity:.78; }
.pp-quote-brand{ height: 16px; width: auto; }
.pp-quote-link{
  margin-top: auto; padding-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font:600 13px/1 'Poppins'; color:#3E5EE2;
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.pp-quote-link svg{ width:13px; height:13px; transition: transform .15s ease; }
.pp-quote-link:hover{ border-bottom-color:#3E5EE2; }
.pp-quote-link:hover svg{ transform: translateX(3px); }

.pp-quote-stats{
  background: linear-gradient(180deg,#3E5EE2 0%, #7526C5 100%);
  padding: 36px 36px;
  display:flex; flex-direction:column; justify-content:center; gap: 20px;
  color:#fff;
}
.pp-qs-row{ display:flex; flex-direction:column; gap:6px; }
.pp-qs-row + .pp-qs-row{ border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; }
.pp-qs-num{
  font:600 44px/.95 'Poppins'; letter-spacing:-.025em; color:#fff;
}
.pp-qs-num small{ font-size: 22px; font-weight:600; }
.pp-qs-cap{ font-size:13.5px; line-height:1.4; color:#fff; opacity:.92; max-width: 260px; }
.pp-qs-cap b{ font-weight: 600; }

/* ===================== FAQ ===================== */
.pp-faq-wrap{ background:#fff; padding: 56px 80px 96px; }
.pp-faq-inner{ max-width: 880px; margin: 0 auto; }
.pp-faq-head{ text-align:center; margin-bottom: 48px; }
.pp-faq-h{ font:600 44px/1.12 'Poppins'; color:#190750; letter-spacing:-.018em; margin:14px 0 16px; }
.pp-faq-sub{ font-size:16px; line-height:1.55; color:#190750; opacity:.78; margin:0 auto; max-width:560px; }
.pp-faq-list{ list-style:none; padding:0; margin:0; border-top:1px solid #E5E7EA; }
.pp-faq-item{ border-bottom:1px solid #E5E7EA; }
.pp-faq-q-btn{
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:22px 4px; display:flex; justify-content:space-between; align-items:center; gap:24px;
  font:600 19px/1.4 'Poppins'; color:#190750;
}
.pp-faq-q-btn:hover{ color:#3E5EE2; }
.pp-faq-sign{
  width:32px; height:32px; border-radius:999px; background:#EDF0FC; color:#3E5EE2;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition: all .2s ease;
  font-size:20px; font-weight:300; line-height:1;
}
.pp-faq-item.is-open .pp-faq-sign{ background:linear-gradient(135deg,#3E5EE2,#7526C5); color:#fff; transform:rotate(180deg); }
.pp-faq-a{ font-size:16px; line-height:1.6; color:#190750; opacity:.86;
  max-height:0; overflow:hidden; transition: max-height .3s ease, padding .3s ease, opacity .3s ease;
  padding: 0 4px;
}
.pp-faq-item.is-open .pp-faq-a{ max-height:360px; padding: 0 4px 22px; }

/* ===================== BOTTOM CTA (lightweight band) ===================== */
.pp-cta-wrap{ padding: 24px 80px 48px; background: #fff; }
.pp-cta-band{
  max-width: 1200px; margin: 0 auto;
  background: linear-gradient(135deg, #EDF0FC 0%, #F5EEFC 60%, #EDE3FA 100%);
  border: 1px solid #DCE2FA;
  border-radius: 28px;
  padding: 44px 56px;
  position: relative; overflow: hidden;
  text-align: center;
  box-shadow: 0 12px 36px rgba(25,7,80,.06);
}
.pp-cta-band-inner{ position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
.pp-cta-band-h{
  font:600 28px/1.2 'Poppins'; color:#190750; letter-spacing:-.012em;
  margin: 10px 0 22px;
  white-space: nowrap;
}
.pp-cta-band-btn{ padding: 14px 28px; font-size: 15px; }

/* Soft egg accents */
.pp-cta-egg-soft{
  position:absolute; pointer-events:none; opacity:.55;
  border-radius: 50% 50% 40% 60% / 50% 60% 40% 50%;
          
}
.pp-cta-egg-soft-l{
  left: -70px; top: -50px; width: 200px; height: 225px;
  background: #D6BAF2; transform: rotate(-14deg);
  animation: pp-drift-a 14s ease-in-out infinite alternate;
}
.pp-cta-egg-soft-r{
  right: -80px; bottom: -80px; width: 240px; height: 270px;
  background: #C9D7FA; transform: rotate(10deg);
  animation: pp-drift-b 16s ease-in-out infinite alternate;
}

/* ===================== MISC ===================== */
.pp-anchor{ scroll-margin-top: 80px; }

@media (max-width: 1300px){
  .pp-matrix-card{ overflow-x:auto; }
  .pp-matrix-head, .pp-matrix-row{ min-width: 1240px; }
   Pillar page — v2 overrides (loaded after pillar.css)
   Tightens 2026 design-system rules and brings the page in line
   with the marketing home page (nav, hero h1, customer logos).
   ============================================================ */

/* ----- 1. Headings — design-system H1/H2/H3 -----------------
   Pull tokens straight from colors_and_type.css:
     • H1 = 56 / 600 / line-height 1.2
     • H2 = 44 / 600 / line-height 1.2
     • H3 = 36 / 600 / line-height 1.2
   These override prior bespoke sizes (62 / 48 / 28 etc.) so the
   whole pillar page conforms 1:1 with the design system scale.
*/
.pp-hero h1{
  font: 600 var(--tw-fs-h1)/var(--tw-lh-heading) 'Poppins', sans-serif;
  letter-spacing: -.02em;
  margin: 22px 0 20px;
}
.pp-hero h1 .pp-hero-h1-tail{ font-weight: 500; }

.pp-section-title,
.pp-faq-h{
  font: 600 var(--tw-fs-h2)/var(--tw-lh-heading) 'Poppins', sans-serif !important;
  letter-spacing: -.018em;
}

.pp-faq-v2-h,
.pp-cta-band-h{
  font: 600 var(--tw-fs-h3)/var(--tw-lh-heading) 'Poppins', sans-serif;
  letter-spacing: -.015em;
  color: #190750;
  margin: 0 auto;
}

/* CTA band — fix the heading↔button overlap. The inline-style height
   on .pp-cta-band + zeroed margin on .pp-cta-band-h were pushing the
   button right on top of the heading. Re-stack with flex-column so
   the items always sit on their own rows with breathable spacing. */
.pp-cta-band{ height: auto !important; min-height: 200px; }
.pp-cta-band-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.pp-cta-band-h{
  margin: 0 !important;
  white-space: normal;
  max-width: 920px;
  text-wrap: balance;
}

/* Lock hero sub to body type spec (Poppins 18/1.55 max-width 520-860) */
.pp-hero-sub{
  font: 400 18px/1.55 'Poppins', sans-serif;
  margin: 0 0 28px;
  max-width: 760px;
}

/* ----- 2. One eyebrow size per artifact (default = 12px) -----
   2026 rule: "one eyebrow size per artifact". Standardize every
   eyebrow to the kit's canonical pill spec.
*/
.pp-section-eyebrow,
.pp-hero-eyebrow,
.pp-rethink-tag,
.pp-os-old-tag,
.pp-os-new-tag,
.pp-os-stack-label{
  font: 600 12px/1 'Poppins', sans-serif !important;
  letter-spacing: .14em;
  text-transform: none;  /* 2026 rule: no all-caps anywhere */
}

/* Hero eyebrow keeps its pill chrome, just resync the type */
.pp-hero-eyebrow{
  padding: 8px 16px 8px 8px;
}

/* ----- 3. Sentence case enforcement --------------------------
   Wipe any inherited uppercase from kit / colors_and_type.css.
*/
.tw-page .tw-eyebrow,
.tw-page .tw-art-caption,
.tw-page .tw-case-tag,
.tw-page .tw-case-brand-line,
.tw-page .tw-h6,
.tw-page .pp-case-arrow strong{
  text-transform: none !important;
  letter-spacing: .14em;
}

/* ----- 4. Peer-card parity in the OS stack -------------------
   Rule 2: peer items at the same hierarchy level must share the
   same surface treatment. The original highlighted step 1 with a
   gradient fill — that reads as ranking. Unify all three.
*/
.pp-os-stack-step,
.pp-os-stack-step-foundation{
  background: #FAFBFF;
  border: 1px solid #EDF0FC;
}
.pp-os-stack-step-foundation .pp-os-stack-pill{
  background: #fff;
}
/* Step number chips keep the brand mark but identical across peers */
.pp-os-stack-num{
  background: linear-gradient(135deg, #3E5EE2, #7526C5);
}

/* ----- 5. Single edge-anchored egg per section ---------------
   Rule 6: at most one egg per section, big, edge-anchored.
   Hero had two; CTA had two. Keep the dominant one each.
*/
.pp-hero-egg-2{ display: none; }
.pp-hero-egg-1{
  right: -200px; top: -120px;
  width: 720px; height: 812px;
  opacity: .40;
}

.pp-cta-egg-soft-l{ display: none; }
.pp-cta-egg-soft-r{
  right: -120px; bottom: -120px;
  width: 320px; height: 360px;
  opacity: .55;
}

/* ----- 5b. Data-lines sit BELOW the hero text + buttons ------
   The animated curves used to weave across the entire hero,
   crossing the headline and CTA row. Anchor the SVG to the
   bottom band of the hero so the lines run below the buttons
   (and behind the floating stat band / footer cards).
*/
.pp-hero-lines{
  inset: auto 0 0 0;
  height: 42%;
  width: 100%;
}

/* ----- 6. Section eyebrow color step (hierarchy 2b) ---------
   Eyebrows in blue, titles in deep indigo, body at .82 opacity.
*/
.pp-section-eyebrow{ color: #3E5EE2; margin-bottom: 14px; }

/* Givaudan attribution logo — swap to a tightly cropped SVG and
   scale up. Original SVG has ~80% transparent padding around the
   wordmark so 16px → 26px barely moved the visible logo. The
   tight-cropped variant has zero padding, so this height genuinely
   grows the visible mark by ~60% over the v1 baseline. */
.pp-quote-brand{
  
  height: 26px;
  width: auto;
}

/* Drop the entire attribution block (avatar + name + logo) toward
   the bottom of the white quote panel, just above the "Read the
   full story" link. */
.pp-quote-attr{ margin-top: auto; }
.pp-quote-link{ margin-top: 24px; padding-top: 0; }

/* ============================================================
   NAV — 1:1 with design-system preview/nav.html
   ============================================================ */
.tw-page .tw-nav{
  padding: 16px 28px;
  border-bottom: 1px solid #EFEFEF;
}
.tw-page .tw-nav-logo{ height: 28px; }
.tw-page .tw-nav-left{ gap: 32px; }
.tw-page .tw-nav-links{ gap: 22px; }
.tw-page .tw-nav-links a{
  font: 500 14px/1 'Poppins', sans-serif;
  color: #190750;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tw-page .tw-nav-links a:hover{ color: #3E5EE2; }
.tw-page .tw-chev{
  width: 6px; height: 6px;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  transform: rotate(45deg);
  display: inline-block;
  margin-bottom: 2px; margin-left: 4px;
  opacity: .7;
}
/* Ghost "Login" — flatter chrome to match the DS preview */
.tw-page .tw-nav-right .tw-btn-ghost{
  border: 0;
  padding: 10px 14px;
  font: 500 14px/1 'Poppins', sans-serif;
}

/* ============================================================
   CUSTOMER LOGOS — 1:1 with the marketing-home marquee.
   Paper background, top + bottom 1px borders, 60s scroll, full-
   color 83px-tall logos with a side mask for graceful fade.
   ============================================================ */
.marquee-band{
  background: #FBF9FF;        /* var(--tw-paper) */
  padding: 48px 0 30px;
  border-top: 1px solid #E5E7EA;
  border-bottom: 1px solid #E5E7EA;
  overflow: hidden;
}
.marquee-label{
  text-align: center;
  font: 500 17px/1.4 'Poppins', sans-serif;
  color: #190751;
  letter-spacing: 0;
  margin-bottom: 28px;
}
.marquee-label strong{
  font-weight: 700;
  color: #3E5EE2;
}
.marquee{
  display: flex; gap: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{
  display: flex; align-items: center; gap: 56px;
  animation: pp-v2-scroll 60s linear infinite;
  flex-shrink: 0;
  padding-right: 56px;
}
.pp-trust:hover .marquee-track{ animation-play-state: paused; }
@keyframes pp-v2-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
.logo-pill{
  display: inline-flex; align-items: center; justify-content: center;
  height: 83px; flex-shrink: 0; white-space: nowrap;
}
.logo-pill img{
  height: 83px; width: auto; max-width: 276px;
  object-fit: contain;
}

/* Neutralize v1 .pp-trust marquee classes — the new strip uses the
   home-page marquee classes only. Keep the pp-trust hook for hover. */
.pp-trust .pp-trust-label,
.pp-trust .pp-trust-marquee,
.pp-trust .pp-trust-track,
.pp-trust .pp-trust-cell{ all: unset; display: revert; }

/* ============================================================
   FAQ — 1:1 with the marketing-home design.
   Native <details>/<summary>, numbered rows, blue +/− toggle.
   ============================================================ */
.pp-faq-v2-wrap{
  background: #fff;
  padding: 110px 0;
}
.pp-faq-v2-inner{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
}
.pp-faq-v2-head{
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
}
.pp-faq-v2-h em{
  font-style: normal;
  font-weight: 600;
  background: linear-gradient(135deg, #3E5EE2 0%, #7526C5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.faq-list{ max-width: 920px; margin: 0 auto; }
details.faq{
  border-bottom: 1px solid #E5E7EA;
  padding: 22px 0;
}
details.faq summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font: 600 18px/1.4 'Poppins', sans-serif;
  color: #190750;
  gap: 24px;
}
details.faq summary::-webkit-details-marker{ display: none; }
details.faq .num{
  color: #3E5EE2;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  padding-top: 4px;
}
details.faq summary::after{
  content: "+";
  font-size: 28px;
  color: #3E5EE2;
  font-weight: 300;
  line-height: 1;
  margin-left: auto;
}
details.faq[open] summary::after{ content: "−"; }
details.faq p{
  margin: 16px 0 0;
  padding-left: 32px;
  color: #505D70;
  font-size: 15px;



/* -- Load More button styles -- */
#load-more-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
#load-more-btn {
  font: 600 15px/1 'Poppins', sans-serif;
  color: #fff;
  background: #3E5EE2;
  border: 1px solid #3E5EE2;
  border-radius: 999px;
  padding: 14px 32px;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 14px rgba(62,94,226,.24);
  outline: none;
}
#load-more-btn:hover {
  background: #2a45c0;
  border-color: #2a45c0;
  box-shadow: 0 6px 20px rgba(62,94,226,.32);
  transform: translateY(-1px);
}
#load-more-btn:active {
  transform: translateY(0);
}