/* Cuttl product pages (Journey Insights, Web Experiments). Loads after site.css; same tokens and type.
   Motion is CSS only (keyframes and transitions that start when a block scrolls into view), so the pages
   stay light for visitors and cheap to record. Spec: DESIGN.md §17. */

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--fog); }
.crumbs a { color: var(--graphite); }
.crumbs a:hover { color: var(--ink); }
.crumbs li { display: inline-flex; gap: 8px; list-style: none; }
.crumbs li + li::before { content: "/"; color: #c9ced6; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }

/* ---------- Hero ---------- */
.pp-hero { padding: 0 20px; }
.pp-hero-panel { position: relative; overflow: hidden; border-radius: var(--r-panel); background: var(--bone);
  background-image: radial-gradient(70% 60% at 85% 100%, var(--sky), transparent 70%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: var(--s-8);
  max-width: 1400px; margin: 0 auto; padding: var(--s-10) clamp(24px, 5vw, 80px); min-height: min(760px, calc(100svh - 92px)); }
.pp-hero-copy { display: grid; justify-items: start; gap: var(--s-3); }
.pp-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: #fff;
  font: 500 14px/1 var(--ui); color: var(--ink); box-shadow: 0 0 0 1px rgba(10, 13, 18, .05); }
.pp-eyebrow img { width: 28px; height: 28px; }
.pp-hero h1 { font-family: var(--display); font-weight: 550; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.12; letter-spacing: -0.028em; text-wrap: balance; }
.pp-hero .sub { max-width: 540px; }
.pp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--s-1); }
.pp-hero-art { position: relative; }
.pp-float { position: absolute; width: var(--s, 72px); animation: bob 4.6s ease-in-out var(--d, 0s) infinite; pointer-events: none; }

/* ---------- Quick facts ---------- */
.pp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: var(--page-max); margin: var(--s-6) auto 0; padding: 0 var(--gutter); }
.pp-fact { display: grid; gap: 6px; padding: 20px 22px; border-radius: 20px; background: var(--mist); }
.pp-fact b { font: 500 18px/1.25 var(--display); color: var(--ink); }
.pp-fact span { font-size: 14px; line-height: 1.45; color: var(--graphite); }

/* ---------- Section head ---------- */
.pp-head { display: grid; justify-items: center; gap: var(--s-2); text-align: center; max-width: 760px; margin: 0 auto var(--s-8); }
.pp-kicker { font: 500 14px/1 var(--ui); color: var(--graphite); }

/* ---------- Feature rows ---------- */
.pp-features { display: grid; gap: var(--s-15); }
.pp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: var(--s-10); }
.pp-row.flip > .pp-copy { order: 2; }
.pp-row.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.pp-copy { display: grid; justify-items: start; gap: var(--s-2); }
.pp-copy > img { width: 72px; height: 72px; margin-bottom: 4px; }
.pp-copy h2 { font-family: var(--display); font-weight: 500; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.pp-copy > p { color: var(--graphite); font-size: 17px; line-height: 1.5; max-width: 520px; }
.pp-list { display: grid; gap: 10px; padding: 0; margin: 6px 0 0; list-style: none; max-width: 520px; }
.pp-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--graphite); }
.pp-list li::before { content: ""; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%230069e0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.pp-list b { color: var(--ink); font-weight: 500; }

/* The visual side: a pastel tile with a white product panel in it */
.pp-tile { position: relative; border-radius: var(--r-card); padding: clamp(20px, 3vw, 40px); background: var(--tile, var(--sky)); overflow: hidden; }
.pp-tile.powder { --tile: #e6f2ff; } .pp-tile.lavender { --tile: #f3ecff; } .pp-tile.mint { --tile: #e3f8ec; }
.pp-tile.solar { --tile: #fff6d6; } .pp-tile.peach { --tile: #fff0e6; }

/* ---------- Product mock primitives ---------- */
.pm { position: relative; border-radius: 18px; background: #fff; box-shadow: var(--shadow-float); overflow: hidden; }
.pm-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); font-size: 12px; color: var(--fog); }
.pm-bar > i { width: 8px; height: 8px; border-radius: 50%; background: #e6e8ec; }
.pm-bar > span { margin-left: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-bar .chip { margin-left: auto; }
.pm-body { position: relative; padding: 16px; background: var(--mist); }
.pm b.sk { display: block; height: 10px; border-radius: 6px; background: #e9ebef; }
.product-page .row { display: flex; align-items: center; gap: 10px; }
.product-page .lab { font-size: 12px; color: var(--fog); }
.product-page .val { font: 500 13px/1.2 var(--mono); color: var(--ink); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #eef0f3; }
.seg span { padding: 5px 10px; border-radius: 8px; font-size: 12px; color: var(--graphite); }
.seg span.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(10, 13, 18, .08); }
.blob { position: absolute; left: var(--x); top: var(--y); width: var(--s, 80px); height: var(--s, 80px); margin: calc(var(--s, 80px) / -2) 0 0 calc(var(--s, 80px) / -2);
  border-radius: 50%; mix-blend-mode: multiply; background: radial-gradient(closest-side, rgba(255, 196, 0, .85), rgba(110, 210, 140, .55) 55%, rgba(80, 150, 255, .25) 80%, transparent); }
.blob.hot { background: radial-gradient(closest-side, rgba(240, 60, 60, .9), rgba(255, 170, 0, .75) 40%, rgba(110, 210, 140, .45) 70%, transparent); }
.pm .page { position: relative; display: grid; gap: 10px; padding: 18px; border-radius: 12px; background: #fff; overflow: hidden; }
.pm .page .h { width: 56%; height: 16px; margin: 6px auto 0; }
.pm .page .p { width: 38%; margin: 0 auto 6px; }
.pm .cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pm .cards3 > b { height: 64px; border-radius: 10px; background: #f1f3f6; }
.pm .page .cta { width: 34%; height: 22px; margin: 6px auto 0; border-radius: 11px; background: #dfe3e8; }

/* in-view motion: everything below starts when its block gets .in (site's [data-reveal] pattern) */
.js [data-reveal] .blob { scale: .3; opacity: 0; transition: scale 1s var(--spring), opacity .6s ease; transition-delay: calc(var(--w, 0) * 1s); }
.js [data-reveal].in .blob { scale: 1; opacity: 1; }
.js [data-reveal] .grow { transform-origin: 0 50%; scale: 0 1; transition: scale 1.1s var(--ease); transition-delay: calc(.2s + var(--w, 0) * 1s); }
.js [data-reveal].in .grow { scale: 1 1; }
.js [data-reveal] .pop { scale: .6; opacity: 0; transition: scale .7s var(--spring), opacity .4s ease; transition-delay: calc(.4s + var(--w, 0) * 1s); }
.js [data-reveal].in .pop { scale: 1; opacity: 1; }

/* ---------- Specific mocks ---------- */
/* hero frame toolbar */
.pm-tools { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); background: #fff; }
.pm-tools .path { padding: 5px 10px; border-radius: 8px; background: var(--mist); font: 500 12px/1 var(--mono); color: var(--ink); }
.pm-tools .seg { margin-left: auto; }
.pm-float-card { position: absolute; display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-float); font-size: 13px; }
.pm-float-card .t { font: 500 14px/1.3 var(--display); color: var(--ink); }

/* scroll depth bar */
.depth { position: absolute; right: 14px; top: 14px; bottom: 14px; width: 34px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(#ff6a4d, #ffb340 30%, #54c98a 60%, #2f8bff 85%, #cfe3ff); }
.depth i { position: absolute; left: -4px; right: -4px; height: 2px; background: #fff; }
.depth-l { position: absolute; right: 58px; z-index: 1; translate: 0 -50%; padding: 3px 7px; border-radius: 7px; background: var(--charcoal); color: #fff; font: 500 11px/1.2 var(--mono); font-style: normal; white-space: nowrap; }

/* player */
.player-s { display: grid; gap: 12px; }
.player-s .screen { position: relative; height: 210px; border-radius: 12px; background: #fff; overflow: hidden; }
.player-s .cur { position: absolute; width: 18px; height: 22px; fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round;
  animation: cur-path 7s var(--ease) infinite; filter: drop-shadow(0 2px 3px rgba(10, 13, 18, .2)); }
@keyframes cur-path { 0% { left: 18%; top: 70%; } 25% { left: 46%; top: 28%; } 45% { left: 70%; top: 62%; } 50% { left: 70%; top: 62%; } 75% { left: 30%; top: 50%; } 100% { left: 18%; top: 70%; } }
.player-s .ring { position: absolute; left: 70%; top: 62%; width: 34px; height: 34px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid #ff6a4d; opacity: 0; animation: ring 7s ease-out infinite; }
@keyframes ring { 0%, 44% { opacity: 0; scale: .4; } 47% { opacity: 1; } 60% { opacity: 0; scale: 1.8; } 100% { opacity: 0; } }
.track2 { position: relative; height: 6px; border-radius: 3px; background: #e6e8ec; }
.track2 > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--charcoal); animation: fill 7s linear infinite; }
@keyframes fill { to { width: 100%; } }
.track2 > b { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--iris-bright); box-shadow: 0 0 0 2px #fff; }
.track2 > b.bad { background: #ff6a4d; } .track2 > b.good { background: #22a06b; }
.events { display: grid; gap: 6px; }
.events p { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; font-size: 13px; color: var(--ink); }
.events p > i { width: 8px; height: 8px; border-radius: 50%; background: var(--iris-bright); }
.events p > i.bad { background: #ff6a4d; } .events p > i.good { background: #22a06b; } .events p > i.warn { background: #ffb340; }
.events p > span:last-child { font: 500 12px/1 var(--mono); color: var(--fog); }

/* issue list */
.issues { display: grid; gap: 10px; }
.issue { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #fff; }
.issue .t { font: 500 15px/1.3 var(--display); color: var(--ink); }
.issue .m { grid-column: 1 / -1; font-size: 12px; color: var(--fog); }
.issue .m b { font-family: var(--mono); font-weight: 500; color: var(--graphite); }

/* funnel */
.funnel { display: grid; gap: 10px; }
.fstep { display: grid; grid-template-columns: 110px 1fr 54px; align-items: center; gap: 12px; font-size: 13px; color: var(--graphite); }
.fstep .bar { height: 26px; border-radius: 8px; background: #e6f2ff; overflow: hidden; }
.fstep .bar i { display: block; height: 100%; width: var(--v); border-radius: 8px; background: linear-gradient(90deg, #2f8bff, #6fb2ff); }
.fstep .val { text-align: right; }
.fdrop { margin-left: 122px; font-size: 12px; color: #c2412d; }
.fields { display: grid; gap: 6px; margin-top: 4px; }
.fields p { display: grid; grid-template-columns: 1fr auto; padding: 8px 12px; border-radius: 10px; background: #fff; font-size: 13px; color: var(--ink); }
.fields p span:last-child { font: 500 12px/1.4 var(--mono); color: var(--fog); }
.fields p.worst span:last-child { color: #c2412d; }

/* feedback */
.nps { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: #fff; }
.nps-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.nps-scale span { display: grid; place-items: center; height: 30px; border-radius: 8px; background: var(--mist); font: 500 12px/1 var(--mono); color: var(--graphite); }
.nps-scale span.on { background: var(--charcoal); color: #fff; }
.quote { display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: #fff; font-size: 14px; line-height: 1.5; color: var(--ink); }
.quote .watch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--iris); }

/* vitals */
.vitals { display: grid; gap: 8px; }
.vital { display: grid; grid-template-columns: 54px 1fr 70px; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; font-size: 13px; color: var(--graphite); }
.vital b { font: 500 13px/1 var(--mono); color: var(--ink); }
.vital .gauge { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #54c98a 0 40%, #ffb340 40% 70%, #ff6a4d 70%); }
.vital .gauge i { position: absolute; top: 50%; left: var(--v); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.vital .st { justify-self: end; }

/* segment + AI */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { display: inline-flex; gap: 6px; padding: 7px 12px; border-radius: 10px; background: #fff; font-size: 13px; color: var(--graphite); box-shadow: 0 0 0 1px rgba(10, 13, 18, .05); }
.filter b { color: var(--ink); font-weight: 500; }
.ask { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: #fff; }
.ask .q { font: 500 15px/1.4 var(--display); color: var(--ink); }
.ask .a { font-size: 14px; line-height: 1.5; color: var(--graphite); }

/* experiments: report */
.report { display: grid; gap: 14px; }
.vrow { display: grid; grid-template-columns: 110px 1fr 56px; align-items: center; gap: 12px; font-size: 13px; color: var(--graphite); }
.vrow .bar { height: 30px; border-radius: 8px; background: #eef0f3; overflow: hidden; }
.vrow .bar i { display: block; height: 100%; width: var(--v); border-radius: 8px; background: #b9c1cc; }
.vrow.win .bar i { background: linear-gradient(90deg, #2f8bff, #6fb2ff); }
.vrow .val { text-align: right; }
.decision { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #fff; }
.decision .big { font: 500 22px/1.2 var(--display); color: var(--ink); }
.decision .row { flex-wrap: wrap; }

/* experiments: test types */
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.type { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: #fff; }
.type .t { font: 500 15px/1.25 var(--display); color: var(--ink); }
.type .d { font-size: 12px; line-height: 1.45; color: var(--fog); }
.type .viz { display: flex; gap: 4px; height: 26px; }
.type .viz i { flex: 1; border-radius: 6px; background: #e6f2ff; }
.type .viz i.b { background: #f1e6ff; } .type .viz i.c { background: #d3f6e3; } .type .viz i.d { background: #fff2be; }
.type.wide { grid-column: 1 / -1; }

/* experiments: editor */
.editor { display: grid; grid-template-columns: 1fr 150px; gap: 12px; }
.editor .page { min-height: 230px; }
.sel { position: relative; outline: 2px solid var(--iris-bright); outline-offset: 3px; border-radius: 11px; }
.sel::after { content: "button.cta"; position: absolute; left: -5px; top: -28px; padding: 3px 7px; border-radius: 6px; background: var(--iris-bright); color: #fff; font: 500 10px/1.3 var(--mono); }
.pm .page .cta.big { width: 46%; height: 30px; border-radius: 15px; background: var(--charcoal); }
.panel { display: grid; align-content: start; gap: 10px; padding: 12px; border-radius: 12px; background: #fff; font-size: 12px; color: var(--graphite); }
.panel .k { color: var(--fog); }
.swatches { display: flex; gap: 6px; }
.swatches i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(10, 13, 18, .08); }
.swatches i.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.field { padding: 6px 8px; border-radius: 8px; background: var(--mist); font: 500 11px/1.3 var(--mono); color: var(--ink); }

/* experiments: metrics, targeting */
.metrics { display: grid; gap: 8px; }
.metric { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 14px; border-radius: 12px; background: #fff; }
.metric .t { font-size: 14px; color: var(--ink); }
.metric .d { grid-column: 1; font-size: 12px; color: var(--fog); }
.metric .chip { grid-row: 1 / span 2; grid-column: 2; }
.rules { display: grid; gap: 8px; }
.rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 13px; color: var(--graphite); }
.rule .pill { padding: 4px 9px; border-radius: 8px; background: var(--mist); color: var(--ink); }
.rule .op { color: var(--fog); }

/* experiments: stats */
.stats { display: grid; gap: 12px; }
.planner { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: #fff; }
.planner .big { font: 500 20px/1.25 var(--display); color: var(--ink); }
.dist { position: relative; height: 90px; }
.dist svg { width: 100%; height: 100%; display: block; }

/* experiments: rollout */
.rollout { display: grid; gap: 14px; padding: 16px; border-radius: 14px; background: #fff; }
.split2 { display: flex; height: 34px; border-radius: 10px; overflow: hidden; font: 500 12px/1 var(--ui); }
.split2 span { display: grid; place-items: center; }
.split2 .new { flex: 0 0 90%; background: linear-gradient(90deg, #2f8bff, #6fb2ff); color: #fff; }
.split2 .hold { flex: 1; background: #eef0f3; color: var(--graphite); }
.ramp { display: flex; gap: 6px; flex-wrap: wrap; }
.ramp span { padding: 5px 9px; border-radius: 8px; background: var(--mist); font: 500 11px/1.2 var(--mono); color: var(--graphite); }
.ramp span.on { background: var(--charcoal); color: #fff; }

/* change impact */
.did { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.did .cell { display: grid; gap: 6px; padding: 14px; border-radius: 12px; background: #fff; }
.did .cell .val { font-size: 18px; }

/* ---------- All features grid (reuses .hg tiles) ---------- */
.pp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pp-grid .hg { align-content: start; gap: 8px; padding: 24px 20px; text-align: center; transition: background var(--d-1) var(--ease), translate var(--d-1) var(--ease); }
.pp-grid .hg:hover { background: var(--sky); translate: 0 -2px; }
.pp-grid .hg img { width: 64px; height: 64px; }
.pp-grid .hg b { position: relative; z-index: 1; font: 500 16px/1.25 var(--display); color: var(--ink); }
.pp-grid .hg span { font-size: 13px; line-height: 1.45; }

/* ---------- Trust band ---------- */
.pp-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-band > div { display: grid; align-content: start; gap: 10px; padding: 28px; border-radius: var(--r-card); background: var(--mist); }
.pp-band img { width: 56px; height: 56px; }
.pp-band b { font: 500 19px/1.25 var(--display); color: var(--ink); }
.pp-band p { font-size: 15px; line-height: 1.5; color: var(--graphite); }

/* ---------- Cross-link to the other product ---------- */
.pp-cross { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: clamp(24px, 4vw, 48px);
  border-radius: var(--r-card); background: var(--wash-lilac); box-shadow: inset 0 0 0 1px rgba(10, 13, 18, .04); }
.pp-cross img { width: 96px; height: 96px; }
.pp-cross .h3 { margin-bottom: 6px; }
.pp-cross p { color: var(--graphite); max-width: 620px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .pp-hero-panel { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-top: var(--s-8); min-height: 0; }
  .pp-row, .pp-row.flip { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .pp-row.flip > .pp-copy { order: 0; }
  .pp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-band { grid-template-columns: 1fr; }
  .pp-features { gap: var(--s-10); }
}
@media (max-width: 640px) {
  .pp-hero { padding: 0 8px; }
  .pp-hero-panel { padding: var(--s-6) 16px var(--s-5); }
  .pp-hero h1 { font-size: clamp(32px, 9vw, 40px); }
  .pp-float { display: none; }
  .pp-facts { gap: 10px; }
  .pp-fact { padding: 16px; }
  .pp-head { margin-bottom: var(--s-5); }
  .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pp-grid .hg { padding: 18px 12px; }
  .pp-grid .hg img { width: 48px; height: 48px; }
  .pp-tile { padding: 14px; border-radius: 24px; }
  .pm-body { padding: 12px; }
  .editor { grid-template-columns: 1fr; }
  .types { grid-template-columns: 1fr; }
  .fstep { grid-template-columns: 84px 1fr 46px; }
  .fdrop { margin-left: 96px; }
  .pp-cross { grid-template-columns: 1fr; justify-items: start; }
  .pp-cross img { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-float, .player-s .cur, .player-s .ring, .track2 > i { animation: none; }
  .track2 > i { width: 45%; }
  .js [data-reveal] .blob, .js [data-reveal] .grow, .js [data-reveal] .pop { scale: 1; opacity: 1; transition: none; }
}

/* Hero mock: a taller page so the heatmap reads at a glance */
.pp-hero-art .pm .page { min-height: 340px; align-content: start; gap: 14px; }
.pp-hero-art .pm .cards3 > b { height: 92px; }
@media (max-width: 640px) { .pp-hero-art .pm .page { min-height: 240px; } .pp-hero-art .pm .cards3 > b { height: 60px; } }
@media (max-width: 640px) {
  .pp-hero-art .pm-float-card { position: relative; inset: auto !important; width: auto !important; margin-top: 12px; }
  .pm-tools .lab { display: none; }
  .pp-fact b { font-size: 16px; }
  .pp-fact span { font-size: 13px; }
}
@media (max-width: 640px) {
  .pm-bar .seg { display: none; }
  .product-page .row { flex-wrap: wrap; }
  .planner .seg { margin-left: 0 !important; }
}

/* ---------- Testimonials ---------- */
.pp-note { font-size: 13px; color: var(--fog); }
.pp-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-quote { display: grid; align-content: space-between; gap: var(--s-4); margin: 0; padding: 28px; border-radius: var(--r-card); background: var(--mist); }
.pp-quote blockquote { margin: 0; font: 500 19px/1.45 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.pp-quote figcaption { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid #eceef1; }
.pp-av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tint); font: 600 15px/1 var(--display); color: var(--ink); }
.pp-quote b { display: block; font: 500 16px/1.3 var(--display); color: var(--ink); }
.pp-quote small { display: block; font-size: 13px; line-height: 1.4; color: var(--graphite); }
.pp-quote small.ind { color: var(--fog); }
@media (max-width: 1000px) { .pp-quotes { grid-template-columns: 1fr; } }

/* ---------- Sitemap page ---------- */
.sm { display: grid; gap: var(--s-2); padding-bottom: var(--section-gap); }
.sm .crumbs { margin-bottom: var(--s-2); }
.sm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.sm-col { display: grid; align-content: start; gap: 14px; padding: 28px; border-radius: var(--r-card); background: var(--mist); }
.sm-col h2 a:hover { color: var(--graphite); }
.sm-col ul { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.sm-col li a { font-size: 15px; color: var(--graphite); }
.sm-col li a:hover { color: var(--ink); }
@media (max-width: 1000px) { .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sm-grid { grid-template-columns: 1fr; } }