/* SalzPoint and ServizPoint product pages (static pages built by tools/product_pages.py).
   Built on the site's tokens: --color-ink is the page background, --color-deep the card surface, --color-paper the
   text, --color-mist and --color-haze secondary text, --color-orange the accent. Light theme first; dark follows from
   the same tokens. Easing: --ease-glide, --ease-flow, --ease-press only. */

.pp-wrap { width: 100%; max-width: 1320px; margin: 0 auto; }
.pp-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--color-haze); }
.pp-eyebrow i { width: 8px; height: 8px; border-radius: 2px; background: var(--color-orange); }
.pp-h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; line-height: 1.06; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); color: var(--color-paper); text-wrap: balance; margin: 0; }
.pp-lede { color: var(--color-mist); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; max-width: 52ch; margin: 0; }
.pp-card { background: var(--color-deep); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); }
.pp-small { font-size: .8125rem; color: var(--color-haze); }

/* reveal: replays every time a section comes back into view */
.pp-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-glide), transform .8s var(--ease-glide); transition-delay: calc(var(--d, 0) * 90ms); }
.pp-in .pp-reveal { opacity: 1; transform: none; }
html:not(.js) .pp-reveal { opacity: 1; transform: none; }

/* ---------- devices ---------- */
.pp-phone { position: relative; aspect-ratio: 468 / 864; height: min(62svh, 560px); max-width: 100%; border-radius: 34px; padding: 9px; background: linear-gradient(160deg, #2a3550, #0e1424 55%, #232d45); box-shadow: 0 40px 70px -34px rgba(13, 27, 46, .55), 0 0 0 1px rgba(13, 27, 46, .25), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pp-phone .pp-screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #fff; }
.pp-phone .pp-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .6s var(--ease-flow); }

/* hero: two phones, a slow float and one light sweep when the section comes into view */
.pp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.pp-hero-copy { display: grid; gap: clamp(14px, 2.4svh, 22px); justify-items: start; }
.pp-hero-copy h1 { margin: 0; text-wrap: balance; color: var(--color-paper); }
.pp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .875rem; color: var(--color-haze); }
.pp-crumbs a { color: inherit; text-decoration: none; }
.pp-crumbs a:hover { color: var(--color-paper); }
.pp-for { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-for span { font-size: .875rem; font-weight: 600; color: var(--color-mist); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; background: var(--color-deep); }
.pp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pp-stage { position: relative; display: grid; place-items: center; min-height: min(66svh, 600px); }
.pp-stage .pp-phone { grid-area: 1 / 1; }
.pp-stage .pp-phone.back { transform: translate(-34%, 6%) rotate(-7deg) scale(.86); filter: saturate(.95); opacity: .96; }
.pp-stage .pp-phone.front { transform: translate(18%, -2%) rotate(3deg); }
.pp-stage .pp-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 34px; }
.pp-stage .pp-phone.front .pp-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; transform: skewX(-18deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.pp-in .pp-stage .pp-phone.front .pp-sheen::before { animation: pp-sweep 2.4s var(--ease-flow) .5s both; }
.pp-in .pp-stage .pp-phone.front { animation: pp-float-a 9s var(--ease-flow) infinite alternate; }
.pp-in .pp-stage .pp-phone.back { animation: pp-float-b 11s var(--ease-flow) infinite alternate; }
@keyframes pp-sweep { to { left: 130%; } }
@keyframes pp-float-a { from { transform: translate(18%, -2%) rotate(3deg); } to { transform: translate(18%, -4%) rotate(2deg); } }
@keyframes pp-float-b { from { transform: translate(-34%, 6%) rotate(-7deg) scale(.86); } to { transform: translate(-34%, 8%) rotate(-6deg) scale(.86); } }

/* laptop frame (ServizPoint's web app) */
.pp-laptop { position: relative; width: min(100%, 640px); }
.pp-laptop .pp-lid { border-radius: 16px 16px 6px 6px; padding: 10px; background: linear-gradient(160deg, #2a3550, #0e1424 60%); box-shadow: 0 40px 70px -34px rgba(13, 27, 46, .55), 0 0 0 1px rgba(13, 27, 46, .25); }
.pp-laptop .pp-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #fff; }
.pp-laptop .pp-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity .6s var(--ease-flow); }
.pp-laptop .pp-base { height: 14px; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(#c9d2e0, #9aa6ba); }
:root[data-theme=dark] .pp-laptop .pp-base { background: linear-gradient(#3a4766, #26314d); }

/* ---------- how it works: the guided tour ---------- */
/* steps on the left (where the background fades, so text stays clear), the device on the right */
.pp-tour { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.pp-overlay { position: absolute; pointer-events: none; }
.pp-phone .pp-overlay { inset: 9px; }
.pp-laptop .pp-overlay { inset: 0; }
.pp-tour-stage { position: relative; display: grid; place-items: center; }
.pp-tour-stage .pp-phone { height: min(60svh, 540px); }
.pp-shot { opacity: 0; }
.pp-shot.on { opacity: 1; }
.pp-hot { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; border: 2px solid var(--color-orange); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-orange) 22%, transparent); transition: left .7s var(--ease-glide), top .7s var(--ease-glide), opacity .4s var(--ease-glide); }
.pp-hot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--color-orange); animation: pp-ping 1.8s var(--ease-flow) infinite; }
@keyframes pp-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
.pp-board { position: absolute; inset: 6% -12% 8% 6%; display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 14px; border-radius: 14px; background: var(--color-deep); border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -30px rgba(13, 27, 46, .5); opacity: 0; transform: translateX(8%); transition: opacity .6s var(--ease-glide), transform .7s var(--ease-glide); }
.pp-board.on { opacity: 1; transform: none; }
.pp-board header { display: flex; justify-content: space-between; align-items: center; font-size: .8125rem; font-weight: 600; color: var(--color-paper); }
.pp-board header span { color: var(--color-haze); font-weight: 400; }
.pp-board .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-board .tile { border-radius: 10px; padding: 10px; background: var(--color-ink); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; font-size: .8125rem; color: var(--color-mist); }
.pp-board .bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--color-orange) var(--w, 60%), var(--line-strong) 0); }
.pp-board .spark { height: 34px; border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-orange) 20%, transparent), transparent), repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 22px); clip-path: polygon(0 80%, 15% 60%, 30% 66%, 45% 35%, 60% 45%, 75% 20%, 90% 30%, 100% 10%, 100% 100%, 0 100%); }
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pp-step button { width: 100%; text-align: left; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--color-haze); font: inherit; cursor: pointer; transition: background-color .4s var(--ease-glide), border-color .4s var(--ease-glide), color .3s var(--ease-glide); }
.pp-step b { grid-row: span 2; font-weight: 600; font-size: 1.125rem; line-height: 1.35; color: var(--color-haze); font-variant-numeric: tabular-nums; }
.pp-step strong { font-weight: 600; font-size: 1.0625rem; color: var(--color-mist); }
.pp-step p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--color-mist); display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-glide); }
.pp-step p > span { overflow: hidden; min-height: 0; }
.pp-step .prog { grid-column: 2; height: 2px; border-radius: 1px; background: var(--line-strong); overflow: hidden; margin-top: 8px; opacity: 0; }
.pp-step .prog i { display: block; height: 100%; width: 0; background: var(--color-orange); }
.pp-step[aria-current=step] button { background: var(--color-deep); border-color: var(--line); box-shadow: var(--shadow-card); }
.pp-step[aria-current=step] b { color: var(--color-orange); }
.pp-step[aria-current=step] strong { color: var(--color-paper); }
.pp-step[aria-current=step] p { grid-template-rows: 1fr; }
.pp-step[aria-current=step] .prog { opacity: 1; }
.pp-step button:hover strong { color: var(--color-paper); }
.pp-controls { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pp-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--color-deep); color: var(--color-paper); cursor: pointer; transition: border-color .3s var(--ease-glide); }
.pp-icon-btn:hover { border-color: var(--color-orange); }
.pp-icon-btn svg { width: 16px; height: 16px; }
.pp-count { font-size: .875rem; color: var(--color-haze); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* ---------- who it's for: role tabs ---------- */
.pp-who-head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: end; justify-content: space-between; }
.pp-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 14px; background: var(--color-navy); }
.pp-tabs button { border: 0; border-radius: 10px; padding: 10px 16px; font: inherit; font-weight: 600; font-size: .9375rem; color: var(--color-mist); background: none; cursor: pointer; transition: background-color .3s var(--ease-glide), color .3s var(--ease-glide); }
.pp-tabs button[aria-selected=true] { background: var(--color-deep); color: var(--color-paper); box-shadow: var(--shadow-card); }
.pp-tabs button:hover { color: var(--color-paper); }
.pp-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.pp-panel[hidden] { display: none; }
.pp-panel .pp-card { padding: clamp(18px, 2.6svh, 28px); display: grid; gap: 14px; align-content: start; }
.pp-panel h3 { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-haze); }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pp-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 1.0625rem; line-height: 1.45; color: var(--color-paper); }
.pp-list li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 6px; background: color-mix(in srgb, var(--color-orange) 14%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ea7532' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pp-list.out li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ea7532' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h9M8.5 4.5L12 8l-3.5 3.5'/%3E%3C/svg%3E"); }
.pp-panel .pp-card.change { background: linear-gradient(160deg, color-mix(in srgb, var(--color-orange) 7%, var(--color-deep)), var(--color-deep)); }
.pp-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* the full feature list: a rail of modules on the left, the chosen module's features on the right */
.pp-dlg { margin: auto; width: min(1080px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 1px solid rgba(255, 255, 255, .9); border-radius: 26px; color: var(--color-paper); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(120, 100, 80, .35) transparent;
  background: radial-gradient(120% 90% at 100% 0%, rgba(234, 117, 50, .10), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(214, 196, 168, .28), transparent 60%), linear-gradient(165deg, #fffdfa, #f6f1ea);
  box-shadow: 0 50px 120px -40px rgba(60, 40, 20, .45), 0 0 0 1px rgba(13, 27, 46, .06); }
:root[data-theme=dark] .pp-dlg { border-color: rgba(238, 242, 248, .12); box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .7);
  background: radial-gradient(120% 90% at 100% 0%, rgba(234, 117, 50, .14), transparent 55%), linear-gradient(165deg, #0f1d3c, #081128); }
.pp-dlg::backdrop { background: rgba(40, 32, 24, .32); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
:root[data-theme=dark] .pp-dlg::backdrop { background: rgba(4, 9, 22, .6); }
.pp-dlg[open] { animation: pp-dlg-in .6s var(--ease-glide) both; }
.pp-dlg[open]::backdrop { animation: pp-fade .4s ease both; }
@keyframes pp-dlg-in { from { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(4px); } }
@keyframes pp-fade { from { opacity: 0; } }
.pp-dlg-box { padding: clamp(20px, 3.4svh, 34px) clamp(18px, 2.8vw, 38px); display: grid; gap: clamp(16px, 2.6svh, 24px); }
.pp-dlg-top { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.pp-dlg-top h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem); letter-spacing: -.01em; line-height: 1.1; }
.pp-dlg-sub { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--color-haze); font-size: .9375rem; }
.pp-dlg-sub b { color: var(--color-paper); font-weight: 600; }
.pp-dlg-sub i { width: 4px; height: 4px; border-radius: 50%; background: var(--color-orange); }

.pp-explorer { display: grid; grid-template-columns: minmax(250px, 310px) 1fr; gap: clamp(14px, 2vw, 24px); align-items: stretch; }
.pp-rail { display: grid; align-content: start; gap: 4px; }
.pp-rail-btn { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: 14px; background: transparent; color: var(--color-mist); font: inherit; font-size: 1rem; text-align: left; cursor: pointer;
  transition: background .35s var(--ease-glide), color .35s var(--ease-glide), box-shadow .35s var(--ease-glide); }
.pp-rail-btn span { flex: 1; white-space: nowrap; }
.pp-rail-btn em { font-style: normal; font-size: .8125rem; min-width: 26px; padding: 2px 8px; border-radius: 99px; text-align: center; color: var(--color-haze); background: rgba(13, 27, 46, .05); transition: inherit; }
.pp-rail-btn .pp-ic { width: 32px; height: 32px; padding: 7px; border-radius: 10px; color: var(--color-haze); background: rgba(13, 27, 46, .04); transition: inherit; }
.pp-rail-btn:hover { background: rgba(255, 255, 255, .7); color: var(--color-paper); }
.pp-rail-btn[aria-selected=true] { background: #fff; color: var(--color-paper); font-weight: 600; box-shadow: 0 10px 26px -14px rgba(60, 40, 20, .35), 0 0 0 1px rgba(13, 27, 46, .05); }
.pp-rail-btn[aria-selected=true] .pp-ic { color: #fff; background: var(--color-orange); box-shadow: 0 6px 14px -6px var(--color-orange); }
.pp-rail-btn[aria-selected=true] em { color: var(--color-orange); background: color-mix(in srgb, var(--color-orange) 12%, transparent); }
:root[data-theme=dark] .pp-rail-btn:hover { background: rgba(255, 255, 255, .05); }
:root[data-theme=dark] .pp-rail-btn[aria-selected=true] { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(238, 242, 248, .1); }
:root[data-theme=dark] .pp-rail-btn em, :root[data-theme=dark] .pp-rail-btn:not([aria-selected=true]) .pp-ic { background: rgba(255, 255, 255, .06); }
.pp-dlg[open] .pp-rail-btn { animation: pp-pop-in .6s var(--ease-glide) both; animation-delay: calc(var(--r) * 35ms + 120ms); }

.pp-mod-stage { display: grid; border-radius: 22px; padding: clamp(18px, 3svh, 30px) clamp(18px, 2.4vw, 32px); background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 24px 50px -30px rgba(60, 40, 20, .35), 0 0 0 1px rgba(13, 27, 46, .04); }
:root[data-theme=dark] .pp-mod-stage { background: rgba(255, 255, 255, .04); border-color: rgba(238, 242, 248, .1); box-shadow: none; }
.pp-mod { grid-area: 1 / 1; display: grid; align-content: start; gap: clamp(16px, 2.6svh, 24px); }
.pp-mod[hidden] { display: none; }
.pp-mod header { display: flex; align-items: center; gap: 16px; }
.pp-mod-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: #fff; flex: none;
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-orange) 78%, #fff), var(--color-orange)); box-shadow: 0 14px 28px -14px var(--color-orange); }
.pp-mod-badge .pp-ic { width: 28px; height: 28px; }
.pp-mod small { display: block; font-size: .8125rem; letter-spacing: .04em; color: var(--color-haze); }
.pp-mod h3 { margin: 2px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1vw, 1.875rem); line-height: 1.15; }
.pp-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.pp-feats li { display: flex; align-items: start; gap: 12px; padding: 14px 16px; border-radius: 14px; font-size: 1.0625rem; line-height: 1.4; color: var(--color-paper);
  background: linear-gradient(160deg, #fff, #fbf8f4); border: 1px solid rgba(13, 27, 46, .06); }
:root[data-theme=dark] .pp-feats li { background: rgba(255, 255, 255, .05); border-color: rgba(238, 242, 248, .08); }
.pp-feats .pp-ic { width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%; color: var(--color-orange); background: color-mix(in srgb, var(--color-orange) 12%, transparent); stroke-width: 2.4; }
.pp-mod-next { justify-self: end; align-self: end; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line-strong); background: transparent; color: var(--color-paper); font: inherit; font-size: .9375rem; cursor: pointer; transition: border-color .3s var(--ease-glide); }
.pp-mod-next .pp-ic { color: var(--color-orange); transition: transform .4s var(--ease-press); }
.pp-mod-next:hover { border-color: var(--color-orange); }
.pp-mod-next:hover .pp-ic { transform: translateX(3px); }
.pp-mod.pp-swap header, .pp-mod.pp-swap li, .pp-mod.pp-swap .pp-mod-next { animation: pp-pop-in .7s var(--ease-glide) both; animation-delay: calc(var(--t, 0) * 55ms); }
@media (max-width: 760px) {
  .pp-explorer { grid-template-columns: 1fr; }
  .pp-rail { display: flex; overflow-x: auto; gap: 6px; margin: 0 -4px; padding: 2px 4px 6px; scrollbar-width: none; }
  .pp-rail-btn { flex: none; padding: 8px 12px 8px 8px; font-size: .9375rem; }
  .pp-rail-btn .pp-ic { width: 28px; height: 28px; padding: 6px; }
  .pp-rail-btn em { display: none; }
  .pp-mod-badge { width: 46px; height: 46px; border-radius: 14px; }
}

/* ---------- getting started ---------- */
.pp-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2.4svh, 24px); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chips span { font-size: .9375rem; font-weight: 600; color: var(--color-paper); background: var(--color-deep); border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 14px; }
.pp-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 0; position: relative; }
.pp-road::before { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 2px; background: linear-gradient(90deg, var(--color-orange), color-mix(in srgb, var(--color-orange) 30%, transparent)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease-flow) .2s; }
.pp-in .pp-road::before { transform: scaleX(1); }
.pp-road li { position: relative; display: grid; gap: 6px; padding-top: 42px; padding-right: 12px; }
.pp-road li i { position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--color-orange); background: var(--color-deep); border: 2px solid var(--color-orange); box-shadow: 0 0 0 5px var(--color-deep); transition: background-color .5s var(--ease-glide), color .5s var(--ease-glide); transition-delay: calc(var(--i, 0) * 170ms + .3s); }
.pp-in .pp-road li i { background: var(--color-orange); color: #fff; }
.pp-road b { font-size: 1.0625rem; color: var(--color-paper); }
.pp-road span { font-size: .9375rem; color: var(--color-mist); line-height: 1.4; }
.pp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pp-facts .pp-card { padding: clamp(16px, 2.4svh, 24px); display: grid; gap: 6px; align-content: start; }
.pp-facts strong { font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); line-height: 1.05; color: var(--color-paper); }   /* body font: Calistoga stays on the 5 headlines */
.pp-facts span { color: var(--color-mist); font-size: 1rem; line-height: 1.45; }
.pp-block-label { margin: 0 0 10px; }

/* ---------- talk to us ---------- */
.pp-cta { display: grid; justify-items: start; gap: 18px; padding: clamp(24px, 5svh, 56px) clamp(22px, 4vw, 56px); border-radius: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-orange) 9%, var(--color-deep)), var(--color-deep) 60%); border: 1px solid var(--line); box-shadow: var(--shadow-card); }

/* ---------- glass sheets: every section's content sits on frosted off-white glass, in front of the moving background ---------- */
.pp-sheet { position: relative; padding: clamp(20px, 3.4svh, 42px) clamp(20px, 3vw, 46px); border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(250, 251, 253, .66));
  -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 44px 90px -52px rgba(13, 27, 46, .5), 0 0 0 1px rgba(13, 27, 46, .045), inset 0 1px 0 rgba(255, 255, 255, .95); }
:root[data-theme=dark] .pp-sheet { background: linear-gradient(160deg, rgba(16, 30, 64, .8), rgba(8, 17, 40, .66)); border-color: rgba(238, 242, 248, .1);
  box-shadow: 0 44px 90px -52px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(238, 242, 248, .07); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pp-sheet { background: var(--color-deep); } }
.pp-hero-copy.pp-sheet { justify-self: start; }
.pp-sheet .pp-card { background: var(--color-deep); }

/* ---------- premium details ---------- */
.pp-ic { width: 20px; height: 20px; flex: none; }
.pp-ic.sm { width: 16px; height: 16px; }
.pp-tabs button { display: inline-flex; align-items: center; gap: 8px; }
.pp-tabs button .pp-ic { color: var(--color-haze); transition: color .3s var(--ease-glide); }
.pp-tabs button[aria-selected=true] .pp-ic { color: var(--color-orange); }
.pp-panel h3 { display: flex; align-items: center; gap: 10px; }
.pp-role-badge { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--color-orange); background: color-mix(in srgb, var(--color-orange) 12%, transparent); }
.pp-role-badge .pp-ic { width: 18px; height: 18px; }
.pp-nums { list-style: none; margin: 0; padding: 0; display: grid; }
.pp-nums li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; padding: clamp(9px, 1.6svh, 13px) 0; border-top: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.45; color: var(--color-paper); }
.pp-nums li:first-child { border-top: 0; padding-top: 2px; }
.pp-nums b { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; color: var(--color-orange); font-variant-numeric: tabular-nums; }
.pp-gains { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pp-gains li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; font-size: 1.125rem; line-height: 1.4; font-weight: 600; color: var(--color-paper); }
.pp-gains .pp-ic { width: 26px; height: 26px; padding: 5px; border-radius: 8px; color: #fff; background: var(--color-orange); }
.pp-panel .pp-card.change { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--color-orange) 16%, transparent), transparent 58%), var(--color-deep); border-color: color-mix(in srgb, var(--color-orange) 24%, var(--line)); }
.pp-all-btn { display: inline-flex; align-items: center; gap: 12px; padding: 11px 14px 11px 20px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--color-deep); color: var(--color-paper); font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; box-shadow: var(--shadow-card); transition: border-color .3s var(--ease-glide), transform .4s var(--ease-glide); }
.pp-all-btn:hover, .pp-all-btn:focus-visible { border-color: var(--color-orange); transform: translateY(-1px); }
.pp-all-btn .pp-ic { color: var(--color-orange); transition: transform .4s var(--ease-press); }
.pp-all-btn:hover .pp-ic { transform: translateX(3px); }
.pp-count-chip { font-size: .8125rem; font-weight: 600; color: var(--color-mist); background: var(--color-navy); border-radius: 999px; padding: 4px 10px; }
.pp-block-label { display: flex; align-items: center; gap: 10px; color: var(--color-haze); }
.pp-badge { text-transform: none; letter-spacing: .02em; font-size: .8125rem; font-weight: 600; color: #fff; background: var(--color-orange); padding: 3px 10px; border-radius: 999px; }
.pp-chips span { display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-card); }
.pp-chips .pp-ic { color: var(--color-orange); }
.pp-facts .pp-card.fact { position: relative; overflow: hidden; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; }
.pp-card.fact .pp-fact-ic { grid-row: span 2; margin: 0; }
.pp-card.fact::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--color-orange), transparent 85%); }
.pp-fact-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 4px; color: var(--color-orange); background: color-mix(in srgb, var(--color-orange) 12%, transparent); }
.pp-fact-ic .pp-ic { width: 22px; height: 22px; }

/* ---------- Apple-style entrances: items rise into place one after another, from slightly smaller and softly out of
   focus to sharp. --s is each item's place in the sequence. Replays every time the section comes back into view. ---------- */
.pp-pop { opacity: 0; transform: translateY(26px) scale(.965); filter: blur(6px);
  transition: opacity .7s var(--ease-glide), transform 1.05s var(--ease-glide), filter .8s var(--ease-glide);
  transition-delay: calc(var(--s, 0) * 65ms + 80ms); }
.pp-in .pp-pop { opacity: 1; transform: none; filter: none; }
html:not(.js) .pp-pop { opacity: 1; transform: none; filter: none; }
.pp-sheet-pop { opacity: 0; transform: translateY(40px) scale(.985); transition: opacity .9s var(--ease-glide), transform 1.2s var(--ease-glide); }
.pp-in .pp-sheet-pop { opacity: 1; transform: none; }
html:not(.js) .pp-sheet-pop { opacity: 1; transform: none; }
/* switching role tab replays the panel's entrance (--t: order within the panel) */
.pp-panel.pp-swap .pp-pop { animation: pp-pop-in .75s var(--ease-glide) both; animation-delay: calc(var(--t, 0) * 60ms); }
@keyframes pp-pop-in { from { opacity: 0; transform: translateY(16px) scale(.975); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- larger, easier reading in Who it's for and Getting started ---------- */
.pp-tabs button { font-size: 1.0625rem; padding: 11px 18px; }
.pp-panel h3 { font-size: .875rem; }
.pp-nums li { font-size: 1.1875rem; }
.pp-gains li { font-size: 1.25rem; }
.pp-all-btn { font-size: 1.0625rem; }
.pp-chips span { font-size: 1rem; }
.pp-road b { font-size: 1.1875rem; }
.pp-road span { font-size: 1rem; }
.pp-facts span { font-size: 1.0625rem; }

/* ---------- small screens ---------- */
@media (max-width: 1023px) {
  .pp-hero-grid, .pp-tour, .pp-panel { grid-template-columns: minmax(0, 1fr); }
  .pp-stage { min-height: 0; padding-block: 12px 24px; }
  .pp-stage .pp-phone { height: min(56svh, 460px); }
  .pp-tour-stage .pp-phone { height: min(58svh, 480px); }
  .pp-road { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .pp-road::before { display: none; }
  .pp-facts { grid-template-columns: minmax(0, 1fr); }
  .pp-board { inset: 4% -4% 6% 4%; }
}
@media (max-width: 480px) {
  .pp-stage .pp-phone.back { display: none; }
  .pp-stage .pp-phone.front { transform: none; }
  .pp-in .pp-stage .pp-phone.front { animation: none; }
}
/* short laptop screens (about 650-760px tall): tighter, so sections fit at full size instead of scaling down */
@media (min-width: 1024px) and (max-height: 760px) {
  .pp-sheet { padding: 16px 26px; border-radius: 22px; }
  .pp-tour { gap: 28px; }
  .pp-tour-stage .pp-phone { height: min(56svh, 500px); }
  .pp-step button { padding: 7px 12px; }
  .pp-step p { font-size: .9375rem; }
  .pp-controls { margin-top: 0; }
  .pp-h2 { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.5rem); }
  .pp-start { gap: 12px; }
  .pp-chips span { padding: 6px 12px; font-size: .875rem; }
  .pp-road li { padding-top: 36px; gap: 2px; }
  .pp-road span { font-size: .875rem; }
  .pp-facts .pp-card { padding: 12px 16px; }
  .pp-facts strong { font-size: 1.375rem; }
  .pp-nums li { padding: 6px 0; font-size: 1.125rem; }
  .pp-gains { gap: 8px; }
  .pp-gains li { font-size: 1.1875rem; }
  .pp-panel .pp-card { padding: 16px 20px; gap: 10px; }
  .pp-dlg-box { padding: 18px 26px; gap: 14px; }
  .pp-rail { gap: 2px; }
  .pp-rail-btn { padding: 5px 10px; font-size: .9375rem; }
  .pp-rail-btn .pp-ic { width: 28px; height: 28px; padding: 6px; }
  .pp-feats li { padding: 11px 14px; font-size: 1rem; }
  .pp-mod-badge { width: 48px; height: 48px; }
}
@media (min-width: 1024px) and (max-height: 600px) {
  .pp-rail-btn { padding: 3px 10px; }
  .pp-rail-btn .pp-ic { width: 24px; height: 24px; padding: 5px; }
}

/* reduced motion: items fade in place (no rise, zoom or blur), screens cross-fade and the sheens still pass; nothing floats or slides.
   The DSC bundle's reduced-motion rule cuts every duration to ~0 with !important, so the kept ones are restated with !important. */
@media (prefers-reduced-motion: reduce) {
  .pp-hot, .pp-step p, .pp-road::before { transition: none !important; }
  .pp-reveal, .pp-pop, .pp-sheet-pop { transform: none; filter: none; transition-property: opacity; transition-duration: 1s !important; transition-timing-function: ease; }
  .pp-board { transform: none; transition-property: opacity; }
  .pp-board, .pp-phone .pp-screen img, .pp-laptop .pp-screen img { transition-duration: .6s !important; }
  .pp-road li i { transition-duration: .5s !important; }
  .pp-panel.pp-swap .pp-pop, .pp-mod.pp-swap header, .pp-mod.pp-swap li, .pp-mod.pp-swap .pp-mod-next, .pp-dlg[open], .pp-dlg[open] .pp-rail-btn { animation-name: pp-fade !important; animation-duration: .9s !important; }
  .pp-dlg[open]::backdrop { animation-duration: .4s !important; }
  .pp-sheen::before { animation-duration: 2.6s !important; }
  .pp-hot::after, .pp-stage .pp-phone { animation: none !important; }
  .pp-road::before { transform: none; }
}

/* ---------- hero, Apple-style: centred copy on one glass sheet, the devices rising out of its bottom edge ---------- */
.pp-hero2 { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden;
  height: calc(100svh - 64px - clamp(16px, 4.5svh, 72px) - clamp(20px, 5.5svh, 72px) - 36px); max-height: 840px; min-height: 420px;
  padding: clamp(48px, 7.4svh, 84px) clamp(20px, 3vw, 48px) 0; }
.pp-hero2 .pp-crumbs { position: absolute; top: clamp(14px, 2.2svh, 22px); left: clamp(18px, 2.2vw, 30px); }
.pp-hero2-copy { display: grid; justify-items: center; gap: clamp(12px, 2.5svh, 28px); position: relative; z-index: 2; }
.pp-hero2-name { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight: 600; color: var(--color-paper); letter-spacing: -.01em; }
.pp-hero2-name span { font-size: .875rem; font-weight: 500; color: var(--color-haze); letter-spacing: 0; padding-left: 12px; border-left: 1px solid var(--line-strong); }
.pp-hero2-h1 { margin: 0; max-width: none; font-family: var(--font-display); font-weight: 400; color: var(--color-paper);
  font-size: min(clamp(2.5rem, 1.1rem + 4vw, 5.5rem), 8.8svh); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.pp-hero2-h1 .pp-grad { display: block; }
.pp-grad { background: linear-gradient(100deg, #a83e14 0%, #dd6f28 48%, #c98a2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[data-theme=dark] .pp-grad { background-image: linear-gradient(100deg, #ea7532, #f5b134); }
.pp-hero2 .pp-lede { max-width: 62ch; font-size: clamp(1.0625rem, .95rem + .45vw, 1.3125rem); }
.pp-hero2-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; margin-top: 4px; }
.pp-textlink { display: inline-flex; align-items: center; gap: 7px; color: var(--color-orange); font-weight: 600; font-size: 1.0625rem; text-decoration: none; text-underline-offset: 5px; }
.pp-textlink svg { width: 7px; height: 11px; transition: transform .4s var(--ease-press); }
.pp-textlink:hover { text-decoration: underline; }
.pp-textlink:hover svg { transform: translateX(3px); }
.pp-hero2-for { margin: 0; font-size: .9375rem; color: var(--color-haze); }

.pp-hero2-stage { position: relative; flex: 1; min-height: 0; width: 100%; margin-top: clamp(22px, 4svh, 48px); display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 2.4vw, 40px); }
.pp-hero2-stage::before { content: ""; position: absolute; left: 50%; top: 18%; width: min(1100px, 92%); height: 150%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 42% at 50% 40%, rgba(234, 117, 50, .26), rgba(245, 177, 52, .10) 55%, transparent 75%); filter: blur(10px); }
.pp-hero2-stage .pp-phone { position: relative; flex: none; height: clamp(380px, 72svh, 660px); opacity: 0; transform: translateY(22%);
  transition: transform 1.5s var(--ease-glide), opacity 1s var(--ease-glide);
  box-shadow: 0 50px 90px -40px rgba(80, 40, 10, .45), 0 0 0 1px rgba(13, 27, 46, .22), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pp-hero2-stage .pp-phone.back { margin-top: clamp(28px, 6svh, 64px); transition-delay: .25s; }
.pp-hero2-stage .pp-phone.front { transition-delay: .4s; }
.pp-in .pp-hero2-stage .pp-phone { opacity: 1; transform: none; }
.pp-hero2-stage .pp-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 34px; }
.pp-hero2-stage .pp-phone.front .pp-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; transform: skewX(-18deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
.pp-in .pp-hero2-stage .pp-phone.front .pp-sheen::before { animation: pp-sweep 2.4s var(--ease-flow) 1.4s both; }
/* the bottom of the sheet fades the phones out softly instead of a hard cut */
.pp-hero2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none; z-index: 3;
  background: linear-gradient(to bottom, transparent, rgba(252, 249, 245, .85)); }
:root[data-theme=dark] .pp-hero2::after { background: linear-gradient(to bottom, transparent, rgba(8, 17, 40, .75)); }

@media (min-width: 1024px) and (max-height: 760px) {
  .pp-hero2 { padding-top: clamp(36px, 6.5svh, 52px); }
  .pp-hero2-for { display: none; }
  .pp-hero2-h1 { font-size: min(4.5rem, 8.4svh); }
  .pp-hero2 .pp-lede { font-size: 1.0625rem; }
  .pp-hero2-copy { gap: clamp(10px, 2.2svh, 16px); }
  .pp-hero2-stage { margin-top: clamp(18px, 3.4svh, 26px); }
}
@media (max-width: 1023px) {
  .pp-hero2 { height: auto; max-height: none; min-height: 0; padding-top: 52px; }
  .pp-hero2-stage { flex: none; height: clamp(280px, 46svh, 420px); }
  .pp-hero2-stage .pp-phone { height: clamp(420px, 70svh, 560px); }
}
@media (max-width: 560px) {
  .pp-hero2-stage .pp-phone.back { display: none; }
  .pp-hero2-name { flex-direction: column; gap: 4px; }
  .pp-hero2-name span { border: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-hero2-stage .pp-phone { transform: none; transition-property: opacity; transition-duration: 1s !important; }   /* fade in, no rise */
}

/* ---------- nothing that isn't clickable looks like a button ---------- */
/* "Connects to": a plain list with an icon per system, no pill */
.pp-chips { gap: 10px 26px; }
.pp-chips span { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
/* rollout length: plain accent text in the label, not a badge */
.pp-badge { background: none; color: var(--color-orange); padding: 0; border-radius: 0; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: inherit; }
.pp-badge::before { content: "· "; color: var(--color-haze); }


/* ---------- laptop products (ServizPoint): the hero laptop rises from the sheet's bottom edge; the tour gives it more room ---------- */
.pp-hero2-stage .pp-laptop { width: min(76%, 880px); flex: none; opacity: 0; transform: translateY(16%);
  transition: transform 1.5s var(--ease-glide) .3s, opacity 1s var(--ease-glide) .3s; }
.pp-in .pp-hero2-stage .pp-laptop { opacity: 1; transform: none; }
.pp-hero2-stage .pp-laptop .pp-lid { box-shadow: 0 50px 90px -40px rgba(80, 40, 10, .42), 0 0 0 1px rgba(13, 27, 46, .22); }
.pp-hero2-stage .pp-laptop .pp-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 16px; }
.pp-hero2-stage .pp-laptop .pp-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 30%; left: -50%; transform: skewX(-18deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); }
.pp-in .pp-hero2-stage .pp-laptop .pp-sheen::before { animation: pp-sweep 2.6s var(--ease-flow) 1.5s both; }
@media (min-width: 1024px) { .pp-tour:has(.pp-laptop) { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.pp-tour-stage .pp-laptop { width: min(100%, 780px); }
.pp-tour-stage:has(.pp-laptop) .pp-board { inset: 3% 4% 12% 4%; }
@media (min-width: 1024px) and (max-height: 760px) { .pp-tour:has(.pp-laptop) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .pp-hero2-stage .pp-laptop { transform: none; transition-property: opacity; transition-duration: 1s !important; }   /* fade in, no rise */
}

/* ---------- tour step "signed off on site" (ServizPoint): a visit sheet; the client's signature draws itself, then the stamp lands ---------- */
.pp-visit { grid-template-rows: auto 1fr auto; gap: clamp(10px, 2svh, 18px); padding: clamp(14px, 2.4svh, 22px) clamp(16px, 2vw, 26px);
  background: linear-gradient(170deg, #fffefb, #fbf6ee); }
:root[data-theme=dark] .pp-visit { background: linear-gradient(170deg, #13213f, #0c1730); }
.pp-visit header { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.125rem, .9rem + .6vw, 1.5rem); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pp-visit header span { font-family: var(--font-sans, inherit); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.vs-rows { margin: 0; display: grid; gap: clamp(6px, 1.3svh, 12px); align-content: start; }
.vs-rows div { display: flex; align-items: baseline; gap: 10px; font-size: .9375rem; }
.vs-rows dt { color: var(--color-haze); white-space: nowrap; }
.vs-rows div::after { content: ""; order: 2; flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.vs-rows dd { order: 3; margin: 0; color: var(--color-paper); font-weight: 600; white-space: nowrap; }
.vs-sign { position: relative; display: grid; gap: 2px; padding-top: 4px; }
.vs-sign svg { width: min(62%, 260px); height: auto; overflow: visible; }
.vs-sign path { fill: none; stroke: #1f3b73; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
:root[data-theme=dark] .vs-sign path { stroke: #cfe0ff; }
.vs-sign span { width: min(62%, 260px); border-top: 1px solid var(--line-strong); padding-top: 4px; font-size: .75rem; color: var(--color-haze); }
.vs-stamp { position: absolute; right: 2%; bottom: 8%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 2px solid #1f8a5b; border-radius: 10px;
  color: #1f8a5b; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(31, 138, 91, .07);
  opacity: 0; transform: rotate(-8deg) scale(1.5); }
:root[data-theme=dark] .vs-stamp { color: #5fd39e; border-color: #5fd39e; background: rgba(95, 211, 158, .08); }
.vs-stamp .pp-ic { width: 14px; height: 14px; stroke-width: 2.6; }
.pp-visit.on .vs-sign path { animation: vs-ink 1.5s cubic-bezier(.45, .05, .3, 1) .45s forwards; }
.pp-visit.on .vs-stamp { animation: vs-stamp .5s var(--ease-press) 2.05s forwards; }
@keyframes vs-ink { to { stroke-dashoffset: 0; } }
@keyframes vs-stamp { 60% { opacity: 1; transform: rotate(-8deg) scale(.94); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .vs-sign path { stroke-dashoffset: 0; animation: none !important; }
  .vs-stamp { opacity: 1; transform: rotate(-8deg); animation: none !important; }
  .pp-visit.on .vs-stamp { animation: pp-fade .6s ease 1s both !important; }   /* the stamp fades in, no landing */
}
.pp-visit { overflow: hidden; }
@media (min-width: 1024px) and (max-height: 760px) {
  .pp-visit { gap: 8px; padding: 12px 18px; }
  .pp-visit header { padding-bottom: 6px; }
  .vs-rows { gap: 5px; }
  .vs-sign svg { width: min(52%, 220px); }
}
@media (max-width: 1023px) {
  .pp-visit { gap: 6px; padding: 10px 12px; border-radius: 10px; }
  .pp-visit header { font-size: 1rem; padding-bottom: 5px; }
  .pp-visit header span { font-size: .625rem; }
  .vs-rows { gap: 3px; }
  .vs-rows div { font-size: .75rem; gap: 6px; }
  .vs-sign svg { width: 42%; }
  .vs-sign span { width: 42%; font-size: .625rem; padding-top: 2px; }
  .vs-stamp { font-size: .625rem; padding: 4px 7px; border-width: 1.5px; gap: 4px; bottom: 4%; }
  .vs-stamp .pp-ic { width: 10px; height: 10px; }
}
@media (max-width: 1023px) {
  .pp-tour-stage:has(.pp-laptop) .pp-board { inset: 2% 3% 9% 3%; }
  .vs-rows div:nth-child(n + 3), .vs-sign span, .pp-visit header span { display: none; }
  .vs-sign svg { width: 34%; }
}

/* the tour's steps grow and shrink as they open; the browser must not nudge the page to compensate (scroll anchoring),
   or the section is no longer exactly in place for the next wheel click */
html { overflow-anchor: none; }