/* "Explore the real app": scenes with pins, a 60-second spotlight tour, and a full-screen viewer. Light and dark follow the page theme. */
.product-tour.at { --at-ink:#e8f1fc; --at-soft:#b4c4d8; --at-card:#0b1220e6; --at-line:#ffffff26; --at-accent:#38bdf8; --at-accent-ink:#04121f; --at-chip:#ffffff10; --at-pin:#38bdf8; padding:14px; font-family:inherit; }
.cinematic[data-theme="light"] .product-tour.at { --at-ink:#14395a; --at-soft:#43607b; --at-card:#ffffffe6; --at-line:#aac3d9; --at-accent:#1b6ba5; --at-accent-ink:#fff; --at-chip:#ffffffb0; --at-pin:#1b6ba5; }
/* the page fades text in and out near the screen edges; inside the tour that made labels look washed out, so it is switched off here */
.cinematic .product-tour.at [data-v7-text] { opacity:1 !important; }
.at em, .at strong, .at b, .at h3, .at p, .at button, .at a { font-family:inherit; font-style:normal; }
.product-tour.at .tour-top { margin-bottom:10px; color:var(--at-soft); }
.product-tour.at .tour-top span { color:inherit; }
:where(.at) button { color:inherit; }          /* zero specificity: a button's own colour (white on the accent) must win */
.at button { cursor:pointer; }
.at button:focus-visible, .at a:focus-visible { outline:3px solid var(--at-accent); outline-offset:2px; }

/* a clear start: the tour is the first thing offered, and while it runs the same row shows progress */
.at-intro { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; margin:0 0 14px; padding:12px 14px; border:1px solid var(--at-line); border-radius:14px; background:var(--at-card); color:var(--at-soft); font-size:15px; }
.at-start, .at-guide .at-next, .at-end a.at-next { min-height:46px; padding:10px 20px; border:1px solid var(--at-accent); border-radius:12px; background:var(--at-accent); color:var(--at-accent-ink); font-size:16px; font-weight:500; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.at-start:hover, .at-guide .at-next:hover { filter:brightness(1.08); }
.at-running { flex-wrap:nowrap; }
.at-running .at-step { flex:0 0 auto; font-size:14px; color:var(--at-ink); font-weight:500; }
.at-progress { flex:1 1 auto; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; min-width:60px; }
.at-progress i { height:6px; border-radius:3px; background:var(--at-line); transition:background .3s ease; }
.at-progress i.on { background:var(--at-accent); }
.at-quiet { background:none !important; border-color:transparent !important; color:var(--at-soft) !important; text-decoration:underline; }

/* the scene tabs: numbered, with a crop of what each scene shows */
.at-tabs { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:thin; scroll-snap-type:x proximity; }
.at-tab { flex:0 0 auto; display:grid; gap:6px; width:132px; padding:6px; text-align:left; border:1px solid var(--at-line); border-radius:12px; background:var(--at-chip); color:var(--at-soft); font-size:14px; scroll-snap-align:start; }
.at-thumb { display:block; width:100%; aspect-ratio:16/9; border-radius:8px; background-color:#0a1220; background-repeat:no-repeat; }
.at-thumb.at-play { display:grid; place-items:center; color:#e8f1fc; font-size:20px; background:linear-gradient(135deg,#1b3a5c,#0a1220); }
.at-tab[aria-selected="true"] { color:var(--at-ink); border-color:var(--at-accent); box-shadow:0 0 0 1px var(--at-accent) inset; }

/* the picture and its caption, side by side on a wide screen */
.at-panel { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr); gap:20px; align-items:start; }
.at-frame { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--at-line); background:#060b13; touch-action:pan-y; }
.at-zoom { position:relative; transform-origin:0 0; will-change:transform; transition:transform .85s cubic-bezier(.45,0,.2,1); }
.at-open { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.at-open img { display:block; width:100%; height:auto; aspect-ratio:16/9; }
.at-expand { position:absolute; right:10px; top:10px; z-index:3; display:inline-flex; gap:6px; align-items:center; min-height:38px; padding:6px 14px; border:1px solid #ffffff66; border-radius:999px; background:#050b14f0; color:#f2f7fd; font-size:14px; }
.at-expand:hover { background:#0b2036; }
.at-hint { display:none; margin:8px 2px 0; font-size:13px; color:var(--at-soft); text-align:center; }
@media (pointer:coarse) { .at-hint { display:block; } }
.at-videoframe video { display:block; width:100%; aspect-ratio:16/9; background:#060b13; }

/* pins: white numbered badges beside the thing they point at, with a ring round the selected one */
.at-pinlayer { position:absolute; inset:0; pointer-events:none; }
.at-pin { position:absolute; transform:translate(-85%,-85%); width:28px; height:28px; padding:0; display:grid; place-items:center; border-radius:50%; border:2px solid #0b1c2e; background:#fff; color:#0b1c2e; font-size:14px; line-height:1; box-shadow:0 2px 8px #000a; pointer-events:auto; transition:transform .25s ease, background .25s ease; }
.at-pin::after { content:""; position:absolute; inset:-9px; border-radius:50%; }            /* a 46px touch target round a 28px badge */
.at-pin b { font-weight:700; }
.at-pin.on { background:var(--at-pin); border-color:#fff; color:#fff; transform:translate(-85%,-85%) scale(1.18); }
.at-pin.inv { transform:translate(-85%,-85%) scale(var(--inv,1)); pointer-events:none; }
.at-pin.inv.on { transform:translate(-85%,-85%) scale(calc(var(--inv,1) * 1.18)); }
.at-ring { position:absolute; border:2.5px solid #38bdf8; border-radius:10px; box-shadow:0 0 0 3px #38bdf833, 0 0 22px #38bdf866; pointer-events:none; animation:at-pulse 2.2s ease-in-out infinite; }
@keyframes at-pulse { 0%,100% { box-shadow:0 0 0 3px #38bdf833, 0 0 18px #38bdf855; } 50% { box-shadow:0 0 0 6px #38bdf822, 0 0 30px #38bdf88c; } }
/* during the tour the ring is a spotlight: everything outside it is dimmed and the picture has zoomed to it */
.at-frame.guided .at-ring { border-radius:8px; animation:none; box-shadow:0 0 0 3px #38bdf8aa, 0 0 0 9999px #030810a8; }
.at-frame.guided .at-open { cursor:default; }

/* the caption column and the tour card */
.at-side { color:var(--at-ink); }
.at-count { margin:2px 0 8px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--at-soft); }
.at-side h3 { margin:0 0 10px; font-size:clamp(21px,1.9vw,27px); line-height:1.22; font-weight:500; color:var(--at-ink); }
.at-desc { margin:0 0 14px; font-size:16px; line-height:1.6; color:var(--at-soft); }
.at-pinlist { list-style:none; margin:0 0 16px; padding:0; display:grid; gap:6px; }
.at-pinlist button { width:100%; display:flex; gap:10px; align-items:flex-start; text-align:left; padding:10px 12px; border:1px solid var(--at-line); border-radius:11px; background:var(--at-chip); }
.at-pinlist b { flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#0b1c2e; color:#fff; font-size:13px; font-weight:600; }
.at-pinlist li.on button { border-color:var(--at-accent); background:var(--at-card); }
.at-pinlist li.on b { background:var(--at-pin); }
.at-pinlist span { display:grid; gap:3px; }
.at-pinlist strong { font-weight:500; font-size:15px; }
.at-pinlist em { font-size:14px; line-height:1.5; color:var(--at-soft); }
.at-activetext { display:none; margin:0 0 14px; font-size:15px; line-height:1.55; color:var(--at-soft); }
.at-activetext strong { color:var(--at-ink); font-weight:500; }
.at-guidecard { padding:18px 18px 16px; border:1px solid var(--at-accent); border-radius:14px; background:var(--at-card); box-shadow:0 10px 30px #0003; }
.at-guidecard h3 { font-size:clamp(22px,2vw,28px); }
.at-guide { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.at-guide button:not(.at-next) { min-height:46px; padding:10px 18px; border:1px solid var(--at-line); border-radius:12px; background:var(--at-chip); color:var(--at-ink); font-size:16px; display:inline-flex; align-items:center; }
.at-guide button:disabled { opacity:.4; cursor:default; }
.at-cta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:18px 2px 4px; padding-top:14px; border-top:1px solid var(--at-line); color:var(--at-soft); font-size:15px; }
.at-cta span { margin-right:6px; }
.at-cta a { min-height:44px; padding:9px 16px; border:1px solid var(--at-line); border-radius:11px; text-decoration:none; display:inline-flex; align-items:center; color:var(--at-ink); }
.at-cta a:first-of-type { background:var(--at-accent); border-color:var(--at-accent); color:var(--at-accent-ink); }

/* the full-screen viewer */
.at-viewer { position:fixed; inset:0; z-index:2147483000; display:flex; flex-direction:column; background:#03080ff2; color:#e8f1fc; overscroll-behavior:contain; font-family:inherit; }
.at-vbar { display:flex; gap:12px; justify-content:space-between; align-items:center; padding:10px 14px; background:#07101be6; border-bottom:1px solid #ffffff1f; }
.at-vtitle { display:grid; gap:2px; min-width:0; }
.at-vtitle span { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#a9bbd2; }
.at-vtitle strong { font-weight:500; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-vtools { display:flex; gap:6px; align-items:center; }
.at-vtools button { min-width:44px; min-height:44px; padding:6px 12px; border:1px solid #ffffff38; border-radius:10px; background:#ffffff12; color:#f2f7fd; font-size:17px; }
.at-vtools button[aria-pressed="true"] { border-color:#38bdf8; color:#7dd3fc; }
.at-vtools button:disabled { opacity:.35; cursor:default; }
.at-vtools output { min-width:56px; text-align:center; font-size:14px; color:#c4d3e6; }
.at-vclose { margin-left:6px; }
.at-varea { position:relative; flex:1; min-height:0; overflow:hidden; touch-action:none; cursor:grab; user-select:none; }
.at-varea:active { cursor:grabbing; }
.at-vstage { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
.at-vstage.glide { transition:transform .38s cubic-bezier(.22,.9,.3,1); }
.at-vstage img { position:absolute; inset:0; width:100%; height:100%; display:block; -webkit-user-drag:none; }
.at-vhi { opacity:0; transition:opacity .3s ease; }
.at-vhi.ready { opacity:1; }
.at-vnav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:72px; border:1px solid #ffffff38; border-radius:12px; background:#050b14c4; color:#f2f7fd; font-size:30px; line-height:1; z-index:3; }
.at-vnav.prev { left:10px; } .at-vnav.next { right:10px; }
.at-vcap { padding:10px 16px 14px; background:#07101be6; border-top:1px solid #ffffff1f; }
.at-vcap p { margin:8px 0 4px; font-size:15px; line-height:1.55; color:#e0ebf8; }
.at-vcap small { display:block; font-size:12px; color:#a9bbd2; }
.at-vchips { display:flex; flex-wrap:wrap; gap:6px; }
.at-vchips button { display:inline-flex; gap:8px; align-items:center; min-height:40px; padding:6px 14px 6px 6px; border:1px solid #ffffff33; border-radius:999px; background:#ffffff0d; color:#e0ebf8; font-size:14px; }
.at-vchips b { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#16324f; font-size:12px; }
.at-vchips .on { border-color:#38bdf8; } .at-vchips .on b { background:#38bdf8; color:#04121f; }

@media (max-width:900px) {
  .product-tour.at { padding:10px; }
  .at-intro { padding:10px 12px; font-size:14px; }
  .at-intro > span:first-child { flex:1 1 100%; }
  .at-start { width:100%; justify-content:center; }
  .at-running { flex-wrap:wrap; }
  .at-panel { display:block; }                                  /* one column, so the picture can stay in view while the tour card scrolls */
  .at-tab { width:112px; font-size:13px; }
  .at-tabs { -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); padding-right:28px; }
  .at-pin { width:32px; height:32px; }
  .at-expand { top:auto; bottom:10px; right:10px; min-height:44px; padding:8px 16px; }
  .at-side { margin-top:12px; }
  .at-pinlist:not(.at-chapters) { display:flex; gap:8px; overflow-x:auto; margin-bottom:10px; padding-bottom:4px; }
  .at-pinlist:not(.at-chapters) li { flex:0 0 auto; }
  .at-pinlist:not(.at-chapters) button { width:auto; padding:8px 14px 8px 8px; align-items:center; }
  .at-pinlist:not(.at-chapters) em { display:none; }
  .at-activetext { display:block; }
  .at-panel.touring .at-main { position:sticky; top:72px; z-index:4; padding-bottom:8px; background:linear-gradient(var(--at-card),var(--at-card)); }
  .at-guidecard { padding:14px; }
  .at-guide .at-next, .at-guide button:not(.at-next) { flex:1 1 auto; justify-content:center; }
  .at-vtitle strong { font-size:14px; }
  .at-vtools button { min-width:40px; padding:6px 9px; }
  .at-vnav { width:34px; height:52px; font-size:24px; opacity:.6; }
}
@media (prefers-reduced-motion:reduce) { .at-ring { animation:none; } .at-pin, .at-vhi, .at-vstage.glide, .at-zoom, .at-progress i { transition:none; } }

/* the tour as an onboarding dialog (/v16/): the app zoomed to one thing on top, words and dots under it */
.atd-overlay { position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; padding:20px; background:#07101ba3; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); overscroll-behavior:contain; animation:atd-fade .25s ease; }
.atd { position:relative; width:min(560px,100%); max-height:calc(100% - 8px); overflow-y:auto; border:1px solid var(--at-line); border-radius:22px; background:var(--at-card); color:var(--at-ink); box-shadow:0 30px 90px #0006, 0 0 0 1px #ffffff12 inset; animation:atd-rise .3s cubic-bezier(.2,.8,.2,1); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.cinematic[data-theme="light"] .atd { background:#fbfdff; }
.atd-media { margin:8px; border-radius:16px; aspect-ratio:16/9; }
.atd-media .at-zoom { transition:transform .9s cubic-bezier(.45,0,.2,1); }
.atd-body { padding:6px 24px 22px; display:grid; gap:10px; }
.atd-count { margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--at-soft); }
.atd h2 { margin:0; font-size:clamp(22px,3vw,28px); line-height:1.2; font-weight:500; color:var(--at-ink); }
.atd-text { margin:0; font-size:16px; line-height:1.6; color:var(--at-soft); min-height:3.2em; }
.atd-foot { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-top:6px; }
.atd-dots { display:flex; gap:7px; align-items:center; }
.atd-dots i { width:8px; height:8px; border-radius:50%; background:var(--at-accent); opacity:.22; transition:opacity .25s ease, transform .25s ease; }
.atd-dots i.past { opacity:.55; }
.atd-dots i.on { opacity:1; transform:scale(1.35); }
.atd-actions { display:flex; gap:8px; align-items:center; }
.atd-ghost { min-height:44px; padding:8px 14px; border:1px solid transparent; border-radius:12px; background:none; color:var(--at-soft); font-size:16px; }
.atd-ghost:hover { background:var(--at-chip); color:var(--at-ink); }
.atd-next { min-height:46px; padding:10px 20px; border:1px solid var(--at-accent); border-radius:12px; background:var(--at-accent); color:var(--at-accent-ink); font-size:16px; font-weight:500; display:inline-flex; gap:10px; align-items:center; }
.atd-next span { opacity:.75; transition:transform .2s ease; }
.atd-next:hover span { transform:translateX(3px); }
.atd-close { position:absolute; right:14px; top:14px; z-index:5; width:40px; height:40px; display:grid; place-items:center; border:1px solid #ffffff55; border-radius:50%; background:#050b14d9; color:#f2f7fd; font-size:16px; }
.atd-close:hover { background:#0b2036; }
@keyframes atd-fade { from { opacity:0; } to { opacity:1; } }
@keyframes atd-rise { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
@media (max-width:600px) {
  .atd-overlay { align-items:end; padding:0; }
  .atd { width:100%; max-height:92%; border-radius:22px 22px 0 0; }
  .atd-body { padding:4px 18px 18px; }
  .atd-foot { flex-direction:column-reverse; align-items:stretch; }
  .atd-dots { justify-content:center; }
  .atd-actions { justify-content:space-between; }
  .atd-next { flex:1 1 auto; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { .atd-overlay, .atd { animation:none; } .atd-dots i, .atd-next span { transition:none; } .atd-media .at-zoom { transition:none; } }

/* while a full-screen layer is open the tour must not be moved or filtered by the page's scroll reveal, or the layer would be fixed to the tour instead of the window */
.product-tour.at.at-open { translate:none !important; transform:none !important; filter:none !important; will-change:auto !important; }

/* a toggle for the numbered pins, and a clearer picture behind the dialog */
.at-pinstoggle { position:absolute; left:10px; top:10px; z-index:3; display:inline-flex; gap:6px; align-items:center; min-height:38px; padding:6px 14px; border:1px solid #ffffff66; border-radius:999px; background:#050b14f0; color:#f2f7fd; font-size:14px; }
.at-pinstoggle[aria-pressed="true"] { border-color:#38bdf8; color:#7dd3fc; }
.product-tour.at.at-open .at-panel .at-pinlayer { visibility:hidden; }
/* the dialog with a clip of the real app instead of a still (/v17/) */
.atd-wide { width:min(760px,100%); }
.atd-video { overflow:hidden; background:#060b13; }
.atd-video video { display:block; width:100%; height:100%; object-fit:cover; }

/* v17 lean: the picture and a title; the guided tour carries the explanation */
.at-lean .at-panel { align-items:center; }
.at-lean .at-side h3 { margin-bottom:0; }
.at-lean .at-count { margin-bottom:8px; }
.at-lean .at-zoom > img { display:block; width:100%; height:auto; aspect-ratio:16/9; }
.at-lean18 .at-panel { display:block; }
.at-lean18 .at-main { max-width:960px; margin:0 auto; }

/* The audience gate as a step-by-step form (/v18/): one question group at a time. */
.v9-wiz { gap:12px; }
.v9-wiz-count { margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#8fa3bb; }
.v9-wiz-bar { display:flex; gap:6px; }
.v9-wiz-bar i { flex:1; height:3px; border-radius:3px; background:#ffffff1f; }
.v9-wiz-bar i.on { background:#38bdf8; }
.v9-wiz-group { display:grid; gap:12px; }
.v9-wiz-field { display:grid; gap:5px; font-size:13px; color:#9db0c6; }
.v9-wiz-field em { font-style:normal; opacity:.75; }
.v9-wiz-field input, .v9-wiz-field select { min-height:46px; padding:9px 12px; border-radius:10px; border:1px solid #ffffff24; background:#0a111c; color:#e6f1ff; font:inherit; font-size:16px; }
.v9-wiz-field input:focus-visible, .v9-wiz-field select:focus-visible, .v9-wiz-back:focus-visible, .v9-wiz-skip:focus-visible { outline:2px solid #7dd3fc; outline-offset:2px; }
.v9-wiz-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.v9-wiz-actions .v9-gate-submit { margin-left:auto; }
.v9-wiz-back, .v9-wiz-skip { min-height:46px; padding:10px 14px; border:0; background:none; color:#9db0c6; font:inherit; font-size:15px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.v9-wiz-err { margin:0; font-size:13px; color:#fca5a5; }
.v9-wiz-gdpr { display:flex; gap:10px; align-items:flex-start; font-size:11px; line-height:1.5; color:#9db0c6; }
.v9-wiz-gdpr svg { flex:none; margin-top:1px; color:#7dd3fc; }
.v9-wiz-gdpr p { margin:0; }
.v9-wiz-gdpr b { color:#e6f1ff; font-weight:500; }
.v9-wiz-gdpr a { color:#7dd3fc; }
.v9-wiz .v9-gate-choice { grid-template-columns:1fr 1fr; }
@media (max-width:700px) { .v9-wiz .v9-gate-choice { grid-template-columns:1fr; } }
.cinematic.cinematic-v10[data-theme="light"] .v9-wiz-count, .cinematic.cinematic-v10[data-theme="light"] .v9-wiz-field, .cinematic.cinematic-v10[data-theme="light"] .v9-wiz-back, .cinematic.cinematic-v10[data-theme="light"] .v9-wiz-skip { color:#4d6781; }
.cinematic.cinematic-v10[data-theme="light"] .v9-wiz-bar i { background:#c9d9e8; }
.cinematic.cinematic-v10[data-theme="light"] .v9-wiz-bar i.on { background:#1b6ba5; }
.cinematic.cinematic-v10[data-theme="light"] .v9-wiz-field input, .cinematic.cinematic-v10[data-theme="light"] .v9-wiz-field select { background:#fff; color:#14395a; border-color:#b9cde0; }
.cinematic.cinematic-v10[data-theme="light"] .v9-wiz-err { color:#b91c1c; }
.cinematic.cinematic-v10[data-theme="light"] .v9-wiz-gdpr { color:#4d6781; }
.cinematic.cinematic-v10[data-theme="light"] .v9-wiz-gdpr svg { color:#1b6ba5; }
.cinematic.cinematic-v10[data-theme="light"] .v9-wiz-gdpr b { color:#14395a; }
.cinematic.cinematic-v10[data-theme="light"] .v9-wiz-gdpr a { color:#1b6ba5; }

.v9-wiz-field input, .v9-wiz-field select { scroll-margin:120px 0; }

/* v18: the tour button looks like the hero's "Explore the workflow" button; the demo and pilot links are plain text like the hero's. */
.at-lean18 .at-intro { border:0; background:none; padding:0; margin:0 0 16px; justify-content:center; }
.at-lean18 .at-intro .cine-actions { margin-top:0; justify-content:center; }
.at-lean18 .cine-actions a.at-start18 { cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.at-cta18 a { min-height:0; padding:0; border:0; border-radius:0; background:none !important; color:var(--at-soft) !important; font-size:14px; text-decoration:none; }
.at-cta18 a:hover, .at-cta18 a:focus-visible { color:var(--at-ink) !important; text-decoration:underline; text-underline-offset:3px; }
.at-cta18 { gap:10px 22px; }
.enquiry-form .contact-privacy { margin:12px 0 0; font-size:11.5px; line-height:1.5; width:100%; max-width:none; }

.v9-li-icon { display:inline-block; vertical-align:-2px; margin:0 2px 0 1px; }

/* Phones: the Investors link stays in the header, as on desktop. */
@media (max-width:1099px) {
  html body .cine-header nav > a[href="/investors/"] { display:flex !important; font-size:12px; white-space:nowrap; }
}