/* PURP product pages. The Point of Sale page uses all of it; Run the Floor (PURP Admin) takes the
   shared chrome, type, hero and finale from here and adds its own live wall and lock-on viewer in
   run-the-floor.css, Stock the Shelves (PURP Buying) adds its line of stations and one-scan moment
   in stock-the-shelves.css, Know the Business (PURP Reports) adds its dive and any-angle moment
   in know-the-business.css, and Build the Relationship (PURP Loyalty) adds its climb in
   build-the-relationship.css. Class names keep the page they began on.
   Colour comes from the Design Brain (@purp/ui tokens in purp-ui.css). The look: a Mist lavender page with
   white films in soft PURP glows, fading at dusk into dark plum stages for the cinematic sections. */
:root {
  color-scheme: light;
  /* Mist: the page sits between Lavender 50 and 100; the deeper tint is a shade toward Lavender 200. */
  --tint: color-mix(in srgb, var(--pdb-lavender-50, #f6f1ff) 55%, var(--pdb-lavender-100, #efe8ff));
  --tint-deep: color-mix(in srgb, var(--pdb-lavender-100, #efe8ff) 78%, var(--pdb-lavender-200, #d9cbff));
  --ground: var(--tint);
  --surface: var(--tint-deep);
  --raised: var(--pdb-bg-surface-raised, #fff);
  --edge-line: color-mix(in srgb, var(--pdb-lavender-200, #d9cbff) 70%, #fff);
  --action: var(--pdb-purp-action, #6d28d9);
  --action-hover: var(--pdb-purp-violet, #7c3aed);
  --on-action: var(--pdb-text-on-brand, #fff);
  --accent: var(--pdb-purp-violet, #7c3aed);
  --soft: var(--pdb-purp-primary, #5b16a3);
  --type: var(--pdb-text-primary, #17121f);
  --type-muted: var(--pdb-text-secondary, #5f536f);
  /* The headline voice: Ink settling into PURP purple. */
  --headline: linear-gradient(180deg, var(--type) 30%, var(--soft));
  /* On a light page the PURP light is a lavender wash laid over the page, not light added to it. */
  --beam: linear-gradient(180deg, var(--pdb-purp-lavender, #d9cbff), color-mix(in srgb, var(--pdb-purp-lavender, #d9cbff) 55%, transparent) 28%, color-mix(in srgb, var(--pdb-purp-mist, #eee7ff) 40%, transparent) 68%, transparent);
  --beam-blend: multiply;
  /* The soft PURP glow a light section lays behind its film. */
  --glow: color-mix(in srgb, var(--pdb-purp-orchid, #a78bfa) 30%, transparent);
  /* White films lift off the lavender on purple-tinted shadows. */
  --film-shadow:
    0 0 0 1px color-mix(in srgb, var(--pdb-purp-lavender, #d9cbff) 60%, transparent),
    0 2px 6px color-mix(in srgb, var(--pdb-purp-plum, #210033) 6%, transparent),
    0 24px 50px -22px color-mix(in srgb, var(--pdb-purp-royal, #3f0a6a) 30%, transparent),
    0 60px 110px -40px color-mix(in srgb, var(--pdb-purp-action, #6d28d9) 38%, transparent);
  --tile-shadow:
    0 1px 3px color-mix(in srgb, var(--pdb-purp-plum, #210033) 7%, transparent),
    0 14px 30px -14px color-mix(in srgb, var(--pdb-purp-royal, #3f0a6a) 26%, transparent),
    0 34px 70px -34px color-mix(in srgb, var(--pdb-purp-action, #6d28d9) 30%, transparent);
  /* Controls laid over a film keep a dark glass: the films are light app screens. */
  --over-film: color-mix(in srgb, var(--pdb-purp-ink, #17121f) 66%, transparent);
  /* The stage: the dark plum band the cinematic sections and the finale play on. */
  --stage: var(--pdb-purp-midnight, #15001f);
  --stage-raised: var(--pdb-purp-plum, #210033);
  /* Dusk: the one path between the two, Mist through Orchid and Royal to Midnight, in even steps.
     Where a light section meets a stage, the light side runs Mist to --dusk-2 over its --fade-out
     (or --fade-in) and the stage side --dusk-2 to Midnight over its own, so the colour where they
     meet is the same on both sides. point-of-sale.mjs tints the pinned bar's strip from this path. */
  --dusk-1: color-mix(in srgb, var(--pdb-purp-orchid, #a78bfa) 75%, var(--tint));
  --dusk-2: color-mix(in srgb, var(--pdb-purp-royal, #3f0a6a) 50%, var(--pdb-purp-orchid, #a78bfa));
  --dusk-3: var(--pdb-purp-royal, #3f0a6a);
  --gutter: 22px;
  /* --scrollbar is measured by the page script; a classic scrollbar is part of 100vw but not of the page. */
  --content: min(1260px, calc(100vw - var(--scrollbar, 0px) - 2 * var(--gutter)));
  --radius: 28px;
  /* Where the pinned product bar ends, plus breathing room: every headline that shares a screen
     with its film sits below this line, so a title is never read through the bar. */
  --bar-space: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: smooth; scroll-padding-top: var(--bar-space); }
body { margin: 0; min-height: 100%; padding-top: 88px; overflow-x: hidden; background: var(--ground); color: var(--type); font-size: 17px; line-height: 1.47; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; font: inherit; color: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 200; top: -100px; left: 24px; padding: 13px 18px; border-radius: 999px; background: var(--type); color: var(--ground); font-weight: 600; }
.skip-link:focus { top: 18px; }

/* ---- Regular PURP navigation: kept identical to story/style.css (parity is tested). ---- */
.site-nav, footer.site-footer { line-height: normal; }
body::before{content:"";position:fixed;inset:0;z-index:19;pointer-events:none;background:#17092333;opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:opacity .22s ease,backdrop-filter .22s ease,-webkit-backdrop-filter .22s ease}
body:has(.nav-menu__trigger[aria-expanded=true])::before{opacity:1;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.site-nav{min-height:64px;position:fixed;top:0;left:0;right:0;transition:transform .24s ease;z-index:20;display:flex;align-items:center;gap:12px;margin:8px 16px;padding:8px 10px 8px 24px;background:#fbfafdF2;box-shadow:0 16px 45px -30px #2c123f99,0 1px 0 #fff inset;border:1px solid #e7deec;border-radius:18px;overflow:visible;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.site-nav::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,var(--pdb-purp-orchid),var(--pdb-purp-action) 58%,var(--pdb-status-danger-dot)) left/5px 100% no-repeat}
.site-nav__brand{display:flex;align-items:center;padding:6px 0}.site-nav__brand img{width:78px;height:28px}.site-nav__menus{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:13px;color:#5f5369}.site-nav__toggle{display:none}.nav-menu{position:relative}.nav-menu__trigger{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:11px;background:transparent;color:#4e4258;font-size:13px;font-weight:650;letter-spacing:-.01em}.nav-menu__trigger:hover,.nav-menu__trigger[aria-expanded=true]{background:#f0e9f7;color:#6d2ab7}.nav-menu__trigger--plus{color:#7130c5}.nav-menu__plus{display:inline-flex;align-items:baseline;gap:2px}.nav-menu__plus span{font-size:17px;line-height:0;color:#a35be4}.nav-menu__trigger svg{width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}.nav-menu__trigger[aria-expanded=true] svg{transform:rotate(180deg)}
.site-nav__brand .site-nav__brand-white{display:none;object-fit:contain}
.nav-menu__panel{--menu-bg:#fff;--menu-text:#21172c;--menu-muted:#786b82;--menu-border:#e8ddec;--menu-accent:#7433c5;--menu-hover:#f7f2fa;position:fixed;top:80px;left:50%;width:min(1160px,calc(100vw - 32px));max-height:calc(100dvh - 96px);overflow:auto;padding:0;border:1px solid var(--menu-border);border-radius:26px;background:var(--menu-bg);color:var(--menu-text);box-shadow:0 38px 95px -38px #210b38c7,0 10px 28px -20px #210b387d;transform:translateX(-50%)}
.nav-menu__panel--plus{--menu-bg:#160b23;--menu-text:#fff;--menu-muted:#c6b7d1;--menu-border:#ffffff1c;--menu-accent:#d6a5ff;--menu-hover:#ffffff0c;background:radial-gradient(circle at 18% 4%,#843bd34d,transparent 38%),linear-gradient(145deg,#13071f,#251039)}
.nav-menu__panel:not([hidden]) .nav-story{animation:nav-story-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes nav-story-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav-story{display:grid;grid-template-columns:minmax(300px,.88fr) minmax(0,1.55fr);min-height:396px}
.nav-story__intro{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding:38px;overflow:hidden;border-right:1px solid var(--menu-border);background:radial-gradient(circle at 25% 4%,#fff 0,transparent 38%),linear-gradient(145deg,#f8f2fc,#eee2f7)}
.nav-menu__panel--plus .nav-story__intro{background:radial-gradient(circle at 20% 0,#7433c560,transparent 43%),linear-gradient(155deg,#21102f,#170a24)}
.nav-story__mark{position:absolute;top:-42px;right:-54px;width:250px;height:250px;opacity:.075;transform:rotate(9deg);pointer-events:none}
.nav-menu__panel--plus .nav-story__mark{filter:brightness(0) invert(1);opacity:.09}
.nav-story__eyebrow{position:relative;margin-bottom:auto;font-size:11px;line-height:1;font-weight:800;letter-spacing:.105em;text-transform:uppercase;color:var(--menu-accent)}
.nav-story__intro .nav-story__title{position:relative;max-width:9.5ch;margin:72px 0 0;font-size:clamp(32px,3.2vw,46px);line-height:.98;font-weight:680;letter-spacing:-.052em}
.nav-story__intro p{position:relative;max-width:29ch;margin-top:18px;font-size:14px;line-height:1.5;color:var(--menu-muted)}
.nav-story__chapters{display:flex;flex-direction:column;min-width:0;padding:13px 24px 15px}
.nav-story__chapter{display:grid;grid-template-columns:32px minmax(0,1fr) 24px;align-items:center;gap:16px;flex:1;min-height:58px;padding:10px 12px;border-bottom:1px solid var(--menu-border);border-radius:12px;transition:background-color .17s ease,color .17s ease}
.nav-story__chapter:last-child{border-bottom-color:transparent}
.nav-story__chapter:hover,.nav-story__chapter:focus-visible{background:var(--menu-hover)}
.nav-story__chapter:focus-visible{outline-offset:-2px}
.nav-story__number{align-self:start;padding-top:4px;font-size:10px;line-height:1;font-weight:780;letter-spacing:.08em;color:var(--menu-accent)}
.nav-story__copy{display:block;min-width:0}.nav-story__copy strong{display:block;font-size:17px;line-height:1.2;font-weight:670;letter-spacing:-.025em}.nav-story__copy>span{display:block;margin-top:4px;font-size:13px;line-height:1.3;font-weight:500;letter-spacing:-.005em;color:var(--menu-muted)}
.nav-story__arrow{justify-self:end;font-size:17px;color:var(--menu-accent);transition:transform .17s ease}.nav-story__chapter:hover .nav-story__arrow,.nav-story__chapter:focus-visible .nav-story__arrow{transform:translateX(4px)}
.site-nav__contact{display:inline-flex;align-items:center;gap:8px;min-height:42px;margin-left:6px;padding:0 17px;border-radius:12px;background:linear-gradient(115deg,#6e2ebf,#8d4bd4);box-shadow:0 10px 22px -15px #5d159c;color:#fff;font-size:13px;font-weight:700;white-space:nowrap;transition:transform .16s ease,box-shadow .16s ease}.site-nav__contact:hover{transform:translateY(-1px);box-shadow:0 13px 26px -15px #5d159c}.site-nav__contact span{font-size:12px}
.site-nav.is-scroll-hidden:not(:focus-within):not(.is-menu-open){transform:translateY(calc(-100% - 16px));pointer-events:none}
@media(max-width:760px){
  .site-nav{height:auto;min-height:56px;max-height:calc(100dvh - 16px);margin:8px 10px;padding:8px 10px 8px 18px;flex-wrap:wrap;gap:0;border-radius:16px}
  .site-nav__brand img{width:68px;height:25px}
  .site-nav__toggle{display:flex;align-items:center;gap:9px;min-height:44px;margin-left:auto;padding:0 10px;border-radius:10px;background:transparent;color:#55475f;font-size:12px;font-weight:700}
  .site-nav__toggle:hover,.site-nav__toggle[aria-expanded=true]{background:#f0e9f7;color:#6d2ab7}
  .site-nav__toggle-icon{position:relative;display:block;width:18px;height:14px}
  .site-nav__toggle-icon i{position:absolute;left:0;width:18px;height:1.5px;border-radius:2px;background:currentColor;transition:top .18s ease,transform .18s ease}
  .site-nav__toggle-icon i:first-child{top:3px}.site-nav__toggle-icon i:last-child{top:10px}
  .site-nav__toggle[aria-expanded=true] .site-nav__toggle-icon i:first-child{top:7px;transform:rotate(45deg)}
  .site-nav__toggle[aria-expanded=true] .site-nav__toggle-icon i:last-child{top:7px;transform:rotate(-45deg)}
  .site-nav nav.site-nav__menus{display:none;flex:0 0 100%;width:100%;max-height:calc(100dvh - 80px);margin:8px 0 0;padding:8px 0 2px;border-top:1px solid #e7deec;overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:3px}
  .site-nav.is-menu-open{overflow:hidden}.site-nav.is-menu-open nav.site-nav__menus{display:flex}
  .nav-menu{width:100%}.nav-menu__trigger{width:100%;min-height:45px;justify-content:space-between;padding:0 10px;font-size:15px}
  .nav-menu__panel{position:static;width:100%;max-height:none;margin:3px 0 8px;border-radius:19px;box-shadow:none;transform:none}
  .nav-story{display:block;min-height:0}
  .nav-story__intro{min-height:180px;padding:22px 20px 24px;border-right:0;border-bottom:1px solid var(--menu-border)}
  .nav-story__mark{top:-34px;right:-28px;width:165px;height:165px}
  .nav-story__intro .nav-story__title{margin-top:46px;font-size:30px}.nav-story__intro p{max-width:31ch;margin-top:13px;font-size:12px}
  .nav-story__chapters{padding:6px 8px 9px}.nav-story__chapter{grid-template-columns:26px minmax(0,1fr) 18px;gap:10px;min-height:66px;padding:10px 8px;border-radius:10px}
  .nav-story__copy strong{font-size:15px}.nav-story__copy>span{font-size:12px;margin-top:3px}.nav-story__chapter:hover .nav-story__arrow,.nav-story__chapter:focus-visible .nav-story__arrow{transform:none}
  .site-nav__contact{justify-content:center;min-height:44px;margin:5px 0 2px;border-radius:11px;font-size:14px}
}
/* ---- End of the regular navigation. ---- */
.site-nav { color: #21172c; }
.site-nav :focus-visible, footer.site-footer :focus-visible { outline: 3px solid var(--pdb-purp-primary, #5b16a3); outline-offset: 5px; }
.site-nav img { display: block; }
/* The PURP+ plus sign and the Platform menu's intro line hold AA on the navigation's lavender glass. */
.nav-menu__plus span { color: var(--pdb-purp-violet, #7c3aed); }
.nav-menu__panel:not(.nav-menu__panel--plus) { --menu-muted: var(--pdb-ink-600, #5f536f); }

/* Local product bar: rides under the regular navigation, then pins once that scrolls away. */
.product-nav { --strip-above: 12px; --strip-below: 28px; position: sticky; z-index: 18; top: 12px; padding: 0 var(--gutter); pointer-events: none; }
/* Like Apple's product bar: while the regular navigation shows (at the top of the page, or when
   it holds focus or its menu), the product bar steps aside so the two never stack; it slides in
   once the regular navigation leaves. Its place in the flow is kept, so nothing below it moves. */
.product-nav { transition: opacity .24s ease, transform .24s ease, visibility 0s linear 0s; }
body:has(.site-nav:not(.is-scroll-hidden), .site-nav:focus-within, .site-nav.is-menu-open) .product-nav {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
/* Like Apple's bar, the whole width above the pill softens what scrolls under it: a heading
   fades and blurs away evenly instead of showing around the pill's ends, sliced in half. Its tint
   is the page's own colour under it at four heights (--veil-0 to --veil-80, set by point-of-sale.mjs
   from the dusk path), so it is Mist over the light page, Midnight over a stage and dusk in between. */
.product-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--strip-above)) 0 calc(-1 * var(--strip-below));
  background: linear-gradient(180deg, color-mix(in srgb, var(--veil-0, var(--ground)) 90%, transparent), color-mix(in srgb, var(--veil-30, var(--ground)) 81%, transparent) 30%, color-mix(in srgb, var(--veil-60, var(--ground)) 72%, transparent) 60%, color-mix(in srgb, var(--veil-80, var(--ground)) 36%, transparent) 80%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
  mask-image: linear-gradient(180deg, #000 62%, transparent);
  pointer-events: none;
}
.product-nav__inner {
  display: flex;
  align-items: center;
  gap: 7px;
  width: min(1024px, 100%);
  min-height: 52px;
  margin: 0 auto;
  padding: 0 8px 0 20px;
  border: 1px solid var(--edge-line);
  border-radius: 999px;
  /* A clean white pill on the light page and on a stage alike. */
  background: color-mix(in srgb, var(--raised) 90%, transparent);
  box-shadow: var(--pdb-card-shadow, 0 1px 2px rgba(33, 23, 43, .04));
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  pointer-events: auto;
}
.product-nav__brand { display: flex; flex: none; align-items: center; }
.product-nav__brand img { width: 62px; height: auto; }
.product-nav__title { font-size: 17px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
/* A product whose name is its own logo wears it whole: PURP Intake is Admin's glass Intake button (the
   Design Brain's .pdb-button--glass, white PURP wordmark), nested in the bar like the button on its right. */
.product-nav__inner:has(> .product-nav__logo) { padding-left: 8px; }
/* Admin's glass lifts off a drawer on a deep shadow; inside the bar a close glow keeps it from smudging. */
.product-nav__logo { height: 36px; padding: 0 14px; gap: 7px; font-size: 14px; cursor: pointer; box-shadow: 0 0 14px color-mix(in srgb, var(--pdb-purp-violet, #7c3aed) 26%, transparent), inset 0 1px 0 var(--pdb-glass-highlight); }
.product-nav__logo img { width: auto; height: 20px; }
.product-nav__logo:not(a) { cursor: default; }
.product-nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.product-nav__actions a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; transition: background-color .2s ease; }
.product-nav__link { border: 1px solid var(--pdb-border-strong, #cbbee6); color: var(--type); }
.product-nav__link:hover { background: var(--surface); }
.product-nav__cta { background: var(--action); color: var(--on-action); }
.product-nav__cta:hover { background: var(--action-hover); }

/* Shared media frame, play control and progress */
.register-stage,
.story-frame {
  position: relative;
  width: var(--content);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--edge-line);
  border-radius: var(--radius);
  background: var(--surface);
  aspect-ratio: 16 / 10;
}
.story-video, .gallery__media video { width: 100%; height: 100%; object-fit: cover; }
.video-toggle {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--over-film);
  color: var(--on-action);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color .2s ease, transform .2s ease;
}
.video-toggle:hover { background: var(--action); transform: scale(1.06); }
.video-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.video-toggle__pause, .video-toggle__play, .video-toggle__replay { display: none; }
[data-state="playing"] > .video-toggle .video-toggle__pause { display: block; }
[data-state="paused"] > .video-toggle .video-toggle__play { display: block; }
[data-state="ended"] > .video-toggle .video-toggle__replay { display: block; }
.story-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: color-mix(in srgb, var(--pdb-purp-ink, #17121f) 12%, transparent); }
.story-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--action), var(--action-hover)); transform: scaleX(0); transform-origin: left; }

/* Hero: the mark lights up, throws a beam, and the register rises into it, in a soft PURP glow.
   Its foot is the first half of the dusk into the stage below it. */
.pos-hero {
  --fade-out: 150px;
  position: relative;
  isolation: isolate;
  padding: 20px var(--gutter) 100px;
  overflow: hidden;
  background:
    linear-gradient(to top, var(--dusk-2), var(--dusk-1) calc(var(--fade-out) / 2), transparent var(--fade-out)),
    radial-gradient(ellipse 62% 44% at 50% 54%, var(--glow), transparent 72%),
    var(--ground);
  text-align: center;
}
/* The halo behind the film: it fits inside the hero with room to breathe, so it has faded out long
   before the hero's edge and is never cut off by it. */
.pos-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8%;
  bottom: 24%;
  left: 50%;
  width: min(1500px, 130vw);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pdb-purp-lavender, #d9cbff) 85%, transparent), color-mix(in srgb, var(--pdb-purp-lavender, #d9cbff) 40%, transparent) 52%, transparent 76%);
  opacity: 0;
  transform: translateX(-50%);
  animation: halo-in 1.8s ease 1.1s both, halo-breathe 9s ease-in-out 3.2s infinite;
}
.pos-hero__light { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
/* The PURP light: the mark lights up and throws a violet beam. The hero plays it once on arrival;
   the finale plays it again when it is reached and keeps it lit. */
.pos-hero__source, .live-cta__source {
  position: absolute;
  left: 50%;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  border-radius: 14px;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--pdb-purp-lavender, #d9cbff) 95%, transparent)) drop-shadow(0 0 64px color-mix(in srgb, var(--pdb-purp-violet, #7c3aed) 90%, transparent));
}
.pos-hero__beam, .live-cta__beam {
  position: absolute;
  left: 50%;
  clip-path: polygon(47.6% 0, 52.4% 0, 100% 100%, 0 100%);
  background: var(--beam);
  filter: blur(7px);
  mix-blend-mode: var(--beam-blend);
  transform-origin: top center;
}
.pos-hero__source { top: 52px; opacity: 0; animation: source-on 2.9s var(--ease) .15s both; }
.pos-hero__beam {
  top: 104px;
  width: min(1040px, 92vw);
  height: clamp(280px, 48vh, 460px);
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
  animation: beam-fall 2.9s cubic-bezier(.3, .6, .2, 1) .15s both;
}
/* The opening line and the closing line share one voice. */
.pos-hero h1, .live-cta h2 {
  padding-bottom: .06em;
  font-weight: 600;
  letter-spacing: -.02em;
  background: var(--headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pos-hero h1 { font-size: clamp(52px, 7.2vw, 88px); line-height: 1.02; animation: rise .9s var(--ease) 2.2s both; }
/* The headline, the whole register and the line under it share the first screen, before any
   scrolling: the regular navigation and the bar (140), the headline (95), the gaps (54), the
   line under the film (63) and 16px to spare. */
.pos-hero .register-stage {
  width: min(var(--content), max(440px, calc((100svh - 388px) * 1.6)));
  margin-top: 28px;
  box-shadow: var(--film-shadow);
  animation: stage-rise 1.5s var(--ease) 1s both;
}
.pos-hero__lede { margin-top: 26px; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; font-weight: 600; animation: rise .9s var(--ease) 2.5s both; }
/* The mark has dissolved before the headline rises where it stood. */
@keyframes source-on { 0% { opacity: 0; transform: scale(.5); } 14% { opacity: 1; transform: scale(1.1); } 22%, 58% { opacity: 1; transform: scale(1); } 72%, 100% { opacity: 0; transform: scale(.82) translateY(-10px); } }
@keyframes beam-fall { 0%, 12% { opacity: 0; transform: translateX(-50%) scaleY(0); } 20% { opacity: 1; } 46%, 72% { opacity: 1; transform: translateX(-50%) scaleY(1); } 100% { opacity: 0; transform: translateX(-50%) scaleY(1); } }
@keyframes stage-rise { from { opacity: 0; transform: translateY(46px) scale(.955); filter: brightness(.3) blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes halo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes halo-breathe { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.08); } }

.pos-action {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--action);
  color: var(--on-action);
  font-size: 17px;
  font-weight: 500;
  transition: background-color .2s ease, transform .2s ease;
}
.pos-action:hover { background: var(--action-hover); transform: translateY(-1px); }
.pos-link { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; color: var(--soft); font-size: 17px; }
.pos-link:hover { color: var(--type); }
.pos-link span { transition: transform .2s ease; }
.pos-link:hover span { transform: translateX(3px); }

/* The stages: Loyalty's climb, Reports' dive, the highlights, Admin's lock-on viewer, Buying's line
   and the finale play on dark plum, the way Apple's light pages turn dark for their cinematic
   moments. Each re-points the page's colour names at Midnight, Plum, Pearl, Lavender and Orchid, so
   everything inside reads light on plum and needs no colour of its own. */
.climb, .dive, .highlights, .lock, .line, .live-cta {
  --ground: var(--stage);
  --surface: var(--stage-raised);
  --raised: var(--stage-raised);
  --chip: color-mix(in srgb, var(--pdb-purp-pearl, #f8f5ff) 12%, transparent);
  --edge-line: var(--pdb-surface-brand-border, rgba(222, 200, 255, .24));
  --accent: var(--pdb-purp-orchid, #a78bfa);
  --soft: var(--pdb-purp-lavender, #d9cbff);
  --type: var(--pdb-purp-pearl, #f8f5ff);
  --type-muted: var(--pdb-surface-brand-text-muted, rgba(255, 255, 255, .72));
  --type-quiet: color-mix(in srgb, var(--pdb-purp-lavender, #d9cbff) 64%, var(--pdb-purp-midnight, #15001f));
  --headline: linear-gradient(180deg, var(--pdb-text-on-brand, #fff) 30%, var(--soft));
  --beam: linear-gradient(180deg, color-mix(in srgb, var(--pdb-purp-pearl, #f8f5ff) 82%, transparent), color-mix(in srgb, var(--pdb-purp-orchid, #a78bfa) 34%, transparent) 28%, color-mix(in srgb, var(--pdb-purp-violet, #7c3aed) 10%, transparent) 68%, transparent);
  --beam-blend: screen;
  /* On a stage the films glow: Orchid light around them, never a hard edge. */
  --film-shadow: 0 0 0 1px var(--pdb-surface-brand-border, rgba(222, 200, 255, .24)), 0 30px 90px -28px color-mix(in srgb, var(--pdb-purp-violet, #7c3aed) 62%, transparent), 0 0 110px -20px color-mix(in srgb, var(--pdb-purp-orchid, #a78bfa) 26%, transparent);
  /* The lit card needs no shadow on the stage (its film glows), and the scroller would cut one off. */
  --tile-shadow: none;
  color-scheme: dark;
  color: var(--type);
}

/* Highlights: a real sideways scroller (trackpad, touch, drag, arrows) that also plays itself, on a
   stage the hero fades into above and the returns fade out of below. */
/* Explore lands the heading row right under the bar. The section is the target because it never
   moves; the heading row rises 30px as it is revealed, so aiming at it would land it under the bar. */
.highlights {
  --section-top: 130px;
  --fade-in: 110px;
  --fade-out: 150px;
  padding: var(--section-top) 0 48px;
  scroll-margin-top: calc(-1 * var(--section-top));
  background:
    linear-gradient(to bottom, var(--dusk-2), var(--dusk-3) calc(var(--fade-in) / 2), transparent var(--fade-in)),
    linear-gradient(to top, var(--dusk-2), var(--dusk-3) calc(var(--fade-out) / 2), transparent var(--fade-out)),
    var(--ground);
}
.highlights__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: var(--content); margin: 0 auto 28px; }
.highlights h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; font-weight: 600; letter-spacing: -.015em; }
.gallery__paddles { display: flex; flex: none; gap: 12px; }
.gallery__paddle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--chip); color: var(--type); transition: background-color .2s ease, opacity .2s ease, transform .2s ease; }
.gallery__paddle:hover:not(:disabled) { background: var(--action); color: var(--on-action); transform: scale(1.06); }
.gallery__paddle:disabled { opacity: .32; cursor: default; }
.gallery__paddle svg { width: 18px; height: 18px; }
.gallery { position: relative; }
.gallery__viewport {
  container-type: inline-size;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100% - min(1260px, calc(100% - 2 * var(--gutter)))) / 2);  /* the scrollport is its own reference */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.gallery__viewport.is-dragging * { pointer-events: none; user-select: none; }
/* --card is the scrollport's own width: cards live in a max-content track, where a percentage
   would have nothing definite to resolve against. */
.gallery__track { --card: min(1260px, calc(100cqw - 2 * var(--gutter))); display: flex; gap: 20px; width: max-content; padding: 0 calc((100cqw - var(--card)) / 2); list-style: none; }
.gallery__card {
  display: flex;
  flex: 0 0 var(--card);
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 36px 56px 84px;
  border: 1px solid var(--edge-line);
  border-radius: var(--radius);
  /* A step up from the stage, lit a little from above. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--pdb-purp-royal, #3f0a6a) 28%, var(--raised)), var(--raised) 62%);
  scroll-snap-align: start;
  opacity: .42;
  transform: scale(.975);
  transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
}
.gallery__card.is-active { opacity: 1; transform: none; box-shadow: var(--tile-shadow); }
.gallery__copy { max-width: 720px; text-align: center; }
.gallery__copy h3 { font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: -.01em; }
.gallery__copy p { margin-top: 10px; font-size: 19px; line-height: 1.3; color: var(--type-muted); }
/* The heading, the card's copy, the film and its controls fit one screen below the bar together:
   --bar-space, the heading row (88), the card's padding, copy and gap (211) and 16px to spare. */
.gallery__media { width: min(100%, max(440px, calc((100svh - var(--bar-space) - 315px) * 1.6))); overflow: hidden; border-radius: 16px; background: var(--surface); aspect-ratio: 16 / 10; }
.gallery__card.is-active .gallery__media { box-shadow: var(--film-shadow); }
.gallery__controls { position: absolute; bottom: 22px; left: 50%; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); }
.gallery__dots { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px; border: 1px solid var(--edge-line); border-radius: 999px; background: color-mix(in srgb, var(--raised) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gallery__dot { display: grid; place-items: center; width: 20px; height: 28px; padding: 0; background: none; transition: width .35s ease; }
.gallery__dot.is-active { width: 62px; }
.gallery__pip { position: relative; display: block; width: 8px; height: 8px; overflow: hidden; border-radius: 999px; background: var(--type-quiet); transition: width .35s ease; }
.gallery__dot.is-active .gallery__pip { width: 50px; background: var(--chip); }
.gallery__fill { position: absolute; inset: 0; background: var(--action); transform: scaleX(0); transform-origin: left; }
.gallery__toggle { position: static; width: 44px; height: 44px; border: 1px solid var(--edge-line); background: color-mix(in srgb, var(--raised) 86%, transparent); color: var(--type); }
.gallery__toggle:hover { color: var(--on-action); }
.gallery__toggle .video-toggle__pause { display: block; }
[data-playing="false"] .gallery__toggle .video-toggle__pause { display: none; }
[data-playing="false"] .gallery__toggle .video-toggle__play { display: block; }

/* Returns and exchanges: back on the light page between two stages, dawn above and dusk below,
   with a glow behind the film and white fact tiles. */
.returns {
  --fade-in: 112px;
  --fade-out: 180px;
  padding: 48px var(--gutter) 130px;
  background:
    linear-gradient(to bottom, var(--dusk-2), var(--dusk-1) calc(var(--fade-in) / 2), transparent var(--fade-in)),
    linear-gradient(to top, var(--dusk-2), var(--dusk-1) calc(var(--fade-out) / 2), transparent var(--fade-out)),
    radial-gradient(ellipse 60% 40% at 50% 42%, var(--glow), transparent 72%),
    var(--ground);
  text-align: center;
}
.returns h2 { font-size: clamp(38px, 5vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -.018em; }
/* The headline, the whole film and the three facts share one screen below the bar (--bar-space,
   the headline 67, the gaps 48, the facts 137 and 16px to spare). */
.returns .story-frame { width: min(var(--content), max(560px, calc((100svh - var(--bar-space) - 268px) * 1.6))); margin-top: 28px; box-shadow: var(--film-shadow); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: var(--content); margin: 20px auto 0; padding: 0; list-style: none; text-align: left; }
.facts li { padding: 22px 24px; border: 1px solid var(--edge-line); border-radius: 22px; background: var(--raised); box-shadow: var(--tile-shadow); }
.facts h3 { font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.facts p { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--type-muted); }
.facts li:nth-child(2) { --reveal-order: 1; }
.facts li:nth-child(3) { --reveal-order: 2; }

/* Finale: the page ends where it began. The PURP mark lights again at the top, its beam falls
   through the last line onto the two ways in, and the light stays on. It is the last thing a
   reader sees. It plays on the stage and stays dark from there into the footer; after a light
   section (Reports' any angle, the returns, Buying's one scan) it opens with the second half of
   their dusk. */
.angle + .live-cta, .returns + .live-cta, .scan + .live-cta {
  --fade-in: 100px;
  --dusk-in: linear-gradient(to bottom, var(--dusk-2), var(--dusk-3) calc(var(--fade-in) / 2), transparent var(--fade-in));
}
.live-cta {
  position: relative;
  isolation: isolate;
  padding: 196px var(--gutter) 112px;
  overflow: hidden;
  background: var(--dusk-in, none), radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--action) 50%, transparent), transparent 58%), linear-gradient(180deg, var(--ground), var(--surface));
  text-align: center;
}
.live-cta h2 { margin: 0 auto; font-size: clamp(46px, 6.4vw, 92px); line-height: 1.02; text-wrap: balance; }
.live-cta__light { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.live-cta__source { top: 64px; }
.live-cta__beam { top: 116px; bottom: 64px; width: min(1100px, 100%); opacity: .78; transform: translateX(-50%); }
.live-cta__actions { position: relative; margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; }
/* Where the beam lands, the light pools under the buttons. */
.live-cta__actions::before { content: ""; position: absolute; z-index: -1; inset: -34px -90px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pdb-purp-orchid, #a78bfa) 34%, transparent), color-mix(in srgb, var(--pdb-purp-violet, #7c3aed) 12%, transparent) 60%, transparent); filter: blur(8px); }
/* The two ways in are the finale's subject, so they are sized for it. */
.live-cta :is(.pos-action, .pos-link) { min-height: 54px; font-size: 19px; }
/* Talk to PURP is one button everywhere: the footer's gradient pill, sized for the finale. */
.live-cta .pos-action { gap: 10px; padding: 0 30px; border: 1px solid #c996ff55; background: linear-gradient(115deg, #7130c5, #8d4bd4); box-shadow: 0 18px 60px -14px #c896ffaa; color: #fff; }
.live-cta .pos-action:hover { background: linear-gradient(115deg, #7e39d3, #9a59e1); }
/* Lit once, when reached (point-of-sale.mjs adds .is-lit). Without the script, or with reduced
   motion, it is simply lit and still: nothing is hidden waiting for an animation. */
@media (prefers-reduced-motion: no-preference) {
  .js .live-cta:not(.is-lit) :is(h2, .live-cta__source, .live-cta__beam, .live-cta__actions) { opacity: 0; }
  .live-cta.is-lit .live-cta__source { animation: source-light 1.2s var(--ease) .1s both; }
  .live-cta.is-lit .live-cta__beam { animation: beam-light 1.5s cubic-bezier(.3, .6, .2, 1) .4s both, beam-glow 7s ease-in-out 1.9s infinite; }
  .live-cta.is-lit h2 { animation: rise .9s var(--ease) .95s both; }
  .live-cta.is-lit .live-cta__actions { animation: rise .9s var(--ease) 1.25s both; }
  /* Reached by the keyboard, the buttons come up at once rather than after the light. */
  .live-cta.is-lit:focus-within :is(h2, .live-cta__source, .live-cta__beam, .live-cta__actions) { animation-delay: 0s; }
}
@keyframes source-light { 0% { opacity: 0; transform: scale(.5); } 35% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: none; } }
@keyframes beam-light { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); } 55% { opacity: 1; transform: translateX(-50%) scaleY(1); } 100% { opacity: .78; transform: translateX(-50%) scaleY(1); } }
@keyframes beam-glow { 0%, 100% { opacity: .78; } 50% { opacity: .56; } }

/* ---- Site footer: kept identical to story/style.css (parity is tested). ---- */
footer.site-footer{position:relative;overflow:hidden;padding:0 max(calc((100vw - 1120px)/2),28px);border:0;background:radial-gradient(circle at 16% -45%,#7130aa70,transparent 44%),var(--night);color:#fff}
.site-footer { --night: var(--stage); }
footer.site-footer::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#7130c5,#b678f0 52%,#7130c5)}
.footer-main{position:relative;z-index:1;min-height:132px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.footer-brand{display:flex;align-items:center;gap:22px;min-width:0}
.footer-brand img{width:88px;height:32px;filter:brightness(0) invert(1);opacity:1}
.footer-brand>span{padding-left:22px;border-left:1px solid #ffffff24;font-size:13px;line-height:1.45;font-weight:500;color:#c8b9d4}
.footer-actions{display:flex;align-items:center;gap:24px;flex:none}
.footer-actions a{font-size:13px;font-weight:650;color:#cdbdde;text-decoration:none}
.footer-actions a:hover{color:#fff}
.footer-cta{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border:1px solid #c996ff55;border-radius:999px;background:linear-gradient(115deg,#7130c5,#8d4bd4);box-shadow:0 12px 28px -18px #c896ff;color:#fff!important}
.footer-legal{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 26px;border-top:1px solid #ffffff1a;font-size:12px;color:#a996bc}
.footer-legal nav{display:flex;gap:22px}
.footer-legal a{font-weight:600;color:#cdbdde;text-decoration:none}
.footer-legal a:hover{color:#fff}
@media(max-width:560px){.footer-legal{flex-direction:column;align-items:flex-start;gap:4px}.footer-legal nav{gap:0 24px}.footer-legal a{display:inline-flex;align-items:center;min-height:44px}}
.footer-cta:hover{background:linear-gradient(115deg,#7e39d3,#9a59e1)}
/* ---- End of the site footer. ---- */

/* ---- Live app viewer: the homepage's own, kept identical to story/style.css (parity is tested). The
   register and Admin open here in this tab, with "Back to PURP" at the top. ---- */
.experience{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#130924;color:white;overflow:hidden}.experience[open]{display:flex;flex-direction:column}.experience::backdrop{background:#130924ed}.experience-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 24px;min-height:62px;font-size:14px;border-bottom:1px solid #ffffff20}.experience-bar button{color:white;background:transparent;padding:10px 0}.experience-frames{position:relative;flex:1;min-height:0;background:#0a0318}.experience iframe{border:0;width:100%;height:100%;display:block;background:#0a0318}.experience iframe[hidden]{display:none}body:has(.experience[open]) .story-scroll{overflow:hidden}
/* Nothing behind the viewer scrolls while it is open, so Back finds the page where it was left. */
html:has(.experience[open]) { overflow: hidden; }
.experience { overscroll-behavior: contain; font-size: 14px; line-height: normal; }
.experience-bar :focus-visible { outline-offset: 2px; }
@media(max-width:760px){.experience-bar{padding:10px 15px;gap:10px}.experience-bar button{font-size:12px}}
/* ---- End of the live app viewer. ---- */

/* Everything arrives: sections rise into place as they are reached. */
.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--reveal-order, 0) * 110ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .gallery__card { padding: 36px 36px 84px; }
}

@media (max-width: 760px) {
  body { padding-top: 76px; }
  footer.site-footer{padding:0 24px}.footer-main{min-height:0;padding:32px 0 28px;align-items:flex-start;flex-direction:column;gap:26px}.footer-brand{width:100%;gap:18px}.footer-brand>span{padding-left:18px}.footer-actions{width:100%;justify-content:space-between;gap:18px}
}

@media (max-width: 900px) {
  .facts { grid-template-columns: 1fr; }
}

@media (max-width: 734px) {
  :root { --gutter: 16px; --radius: 20px; --bar-space: 68px; }
  .product-nav { top: 8px; }
  .product-nav__inner { min-height: 46px; padding: 0 6px 0 14px; }
  .product-nav__title { font-size: 15px; }
  .product-nav__inner:has(> .product-nav__logo) { padding-left: 6px; }
  .product-nav__logo { height: 34px; padding: 0 12px; font-size: 13px; }
  .product-nav__logo img { height: 18px; }
  .product-nav__actions a { min-height: 36px; padding: 0 14px; }
  .pos-hero { padding: 26px var(--gutter) 90px; }
  .pos-hero__source { top: 40px; width: 44px; height: 44px; margin-left: -22px; }
  .pos-hero__beam { top: 80px; }
  .pos-hero .register-stage { width: var(--content); margin-top: 30px; }
  .pos-hero__lede { margin-top: 26px; }
  .video-toggle { right: 10px; bottom: 10px; width: 40px; height: 40px; }
  .video-toggle svg { width: 16px; height: 16px; }
  .pos-hero { --fade-out: 120px; }
  .highlights { --section-top: 92px; --fade-in: 94px; --fade-out: 130px; padding-bottom: 40px; }
  .highlights__head { margin-bottom: 26px; }
  .gallery__paddles { display: none; }
  .gallery__track { gap: 12px; }
  .gallery__card { gap: 24px; padding: 30px 16px 84px; }
  .gallery__copy h3 { font-size: 23px; }
  .gallery__copy p { font-size: 16px; }
  .gallery__media { width: 100%; border-radius: 12px; }
  .gallery__controls { bottom: 20px; }
  .gallery__dots { height: 44px; padding: 0 10px; }
  .gallery__dot { width: 26px; height: 44px; }
  .gallery__toggle { position: static; width: 40px; height: 40px; }
  .gallery__toggle svg { width: 16px; height: 16px; }
  .returns { --fade-out: 130px; padding: 36px var(--gutter) 88px; }
  .returns .story-frame { width: var(--content); margin-top: 34px; }
  .live-cta { padding: 148px var(--gutter) 88px; }
  .live-cta__source { top: 48px; width: 44px; height: 44px; margin-left: -22px; }
  .live-cta__beam { top: 88px; bottom: 48px; }
  .live-cta__actions { margin-top: 32px; }
}

@media (max-width: 480px) {
  .product-nav__actions .product-nav__link { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, .site-nav { transition: none; }
  .product-nav { transition: none !important; }
  .nav-menu__panel:not([hidden]) .nav-story { animation: none; }
  .nav-story__arrow { transition: none; }
  .pos-hero::before, .pos-hero h1, .pos-hero__lede, .pos-hero .register-stage { animation: none; opacity: 1; }
  .pos-hero__light { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .gallery__viewport { scroll-behavior: auto; }
  .gallery__card, .gallery__dot, .gallery__pip, .video-toggle, .pos-action, .gallery__paddle { transition: none; }
}

/* ---- A live Admin section (live-admin.mjs): the real Admin, one Company Settings section alone ---- */
.live-admin { overflow: hidden; border: 1px solid #ffffff26; border-radius: 16px; background: #fbf8fe; box-shadow: 0 30px 90px #03000755, 0 0 110px #7c3aed44; }
.live-admin__bar { display: flex; align-items: center; gap: 10px; padding: 11px 18px; background: #1b0f2c; color: #d9cbff; font-size: 13px; }
.live-admin__bar strong { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.live-admin__dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a9c8; box-shadow: 0 0 10px #f5a9c8; }
.live-admin__screen { position: relative; aspect-ratio: 16 / 10; }
.live-admin__poster, .live-admin__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-admin__poster { object-fit: cover; object-position: top; transition: opacity .5s ease; }
.live-admin__frame { background: transparent; opacity: 0; transition: opacity .5s ease; }
.live-admin[data-state="ready"] .live-admin__frame, .live-admin[data-state="failed"] .live-admin__frame { opacity: 1; }
.live-admin[data-state="ready"] .live-admin__poster, .live-admin[data-state="failed"] .live-admin__poster { opacity: 0; pointer-events: none; }
.live-admin__bar[hidden] { display: none; }
.live-admin__bar button { margin-left: auto; padding: 8px 12px; border: 1px solid #d9cbff66; border-radius: 8px; color: #fff; background: transparent; cursor: pointer; }
/* Phones keep the page's recording: the live Admin is a laptop's. */
@media (max-width: 734px) { .live-admin { display: none; } }
/* ---- The live demo is for computers (sessionWatch.mjs liveDemoAvailable stamps html[data-purp-live]) ----
 * A phone keeps a live section's poster without claiming it is live, and the one Design Brain note
 * (computerNoticeElement) stands where the live application would: under a section, and in the viewer. */
html[data-purp-live="off"] .live-admin__dot, html[data-purp-live="off"] .live-admin__bar strong { display: none; }
.computer-note { width: min(var(--content, 1120px), 620px); margin: 22px auto 0; text-align: left; }
.computer-note[hidden], .experience-note[hidden] { display: none; }
.experience-note { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; gap: 28px; padding: clamp(72px, 18vh, 170px) 16px 24px; overflow: auto; }
.experience-note__mark { display: block; width: 123px; height: auto; }
.experience-note .pdb-notice { width: min(100%, 520px); }

/* One shared presentation for page-specific international examples. */
.market-fit{width:var(--content);margin:0 auto;padding:clamp(64px,8vw,112px) 0;color:var(--type)}
.market-fit__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.market-fit h2{font-size:clamp(34px,4vw,54px);line-height:1.08;letter-spacing:-.025em;font-weight:600;text-wrap:balance;color:var(--soft)}
.market-fit__intro>p{font-size:19px;line-height:1.55;color:var(--type-muted)}
.market-fit__examples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;padding:0;margin:38px 0 0;list-style:none}
.market-fit__examples li{border-top:1px solid var(--edge-line);padding-top:18px}
.market-fit h3{font-size:20px;line-height:1.3;font-weight:600;color:var(--soft)}
.market-fit__examples p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--type-muted)}
.market-fit__setup{max-width:78ch;margin-top:28px;font-size:16px;line-height:1.6;color:var(--type-muted)}
.market-fit>.pos-link{display:inline-flex;margin-top:18px;color:var(--action);text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.market-fit__intro{grid-template-columns:1fr;gap:22px}.market-fit__examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}.market-fit__intro>p{font-size:18px}}
@media(max-width:480px){.market-fit__examples{grid-template-columns:1fr}}