/* OVIO Space: the call to action ([ovio_cta], the OVIO Call to Action element). Glass boxes in a row (box, square, circle or pill, as the
   OVIO Box element's), made for the foot of the last scene: each stands on a point of light on the horizon, joined to it by a short beam.
   When the row first comes into view the points light, beams shoot up from them and the boxes rise out of the horizon along them, one after
   another; then signals run up the beams into the boxes in turn, and each box's picture, a small scene in a round window on space, plays.
   Everything that moves is a CSS animation of a ready-made layer (sliding, scaling, fading) or of a small picture, and it all waits while
   the element is off screen.
   Each box's colour is --c (as "r, g, b"; deeper on light glass) and --cl (the bright one, for the light in its picture), both set on the
   box; a box with no colour of its own takes the glass's. The script (ovio-cta.js) starts the entrance, keeps the boxes just above the
   horizon with the page scrolled to its end, and gives each beam --sag, how far the curved horizon falls away below it.
   Built by tools/process_css.py from plugin-src/ovio-cta.tpl.css (the motion paths come from tools/cta_motion.py): edit that, not
   assets/ovio-cta.css. */

.ovio-cta {
  --vh: 1vh;
  --cta-h: 50; --cta-above: 4; --cta-below: 24; --cta-gap: 28px; --cta-max: 1240px;
  --cta-plain: 70, 110, 230; --cta-plainl: 150, 190, 255;   /* (a box with no colour of its own: the light glass's own blue, until the script has the box's) */
  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* the horizon: with the page scrolled to its end, the last scene keeps the planet in the bottom 20% of the screen */
  padding-bottom: calc((20 + var(--cta-above)) * var(--vh));
}
@supports (height: 1lvh) { .ovio-cta { --vh: 1lvh; } }   /* (the screen's height as the animation measures it: on phones, with the address bar hidden) */
.ovio-cta.ovio-cta-manual { padding-bottom: calc(var(--cta-below) * var(--vh)); }
.ovio-cta *, .ovio-cta *::before, .ovio-cta *::after { box-sizing: border-box; }
.ovio-cta-dark { --cta-plain: 150, 200, 255; --cta-plainl: 150, 200, 255; }

/* ---- the heading (optional): as the other OVIO elements' headings ---- */
.ovio-cta-head { max-width: var(--cta-max); margin: 0 auto clamp(24px, 3.4vh, 44px); text-align: center; }
.ovio-cta-heyebrow { display: block; margin: 0 0 12px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; opacity: .72; }
.ovio-cta .ovio-cta-htitle { margin: 0; font-size: clamp(28px, 2.8vw, 42px); font-weight: 300; line-height: 1.12; color: inherit; }
.ovio-cta-htag { max-width: 560px; margin: 14px auto 0; font-size: 16px; line-height: 1.7; opacity: .8; }

/* ---- the row and its boxes ---- */
.ovio-cta-row { position: relative; display: flex; align-items: stretch; gap: var(--cta-gap); max-width: var(--cta-max); margin: 0 auto; }
.ovio-cta-item {
  --c: var(--cta-plain); --cl: var(--cta-plainl);                    /* (each box's own, set on it) */
  --leg: calc(var(--cta-above) * var(--vh) + var(--sag, 0px));      /* the beam: from the foot of the box down to the horizon */
  --d: calc(var(--i, 0) * .22s);                                     /* each box's entrance, one after another */
  --u: calc(var(--i, 0) * 1.6s);                                     /* and its signals, in turn */
  position: relative; flex: 1 1 0; min-width: 0;
}
.ovio-cta-slot { position: relative; z-index: 1; display: flex; height: 100%; min-height: calc(var(--cta-h) * var(--vh)); }
.ovio-cta-lift { position: relative; flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
/* the shapes with their own proportions (square, circle, pills) stand on the foot of the row, whatever their height */
.ovio-cta:not(.ovio-cta-s-box) .ovio-cta-slot { min-height: 0; }
.ovio-cta:not(.ovio-cta-s-box) .ovio-cta-lift { align-items: flex-end; }
/* the glass: the Glass UI draws it (its corners, padding and shape are the glass's own, as on every box); its words centred. A container,
   so a circle's or a pill's words are sized to it (cqi) */
.ovio-cta .ovio-cta-row .ovio-cta-item .ovio-cta-lift > .ovio-cta-card {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; margin-top: 0; margin-bottom: 0; text-align: center;
  container-type: inline-size; --gx-square-align: center;
}
.ovio-cta .ovio-cta-card.ovio-cta-click { cursor: pointer; }
.ovio-cta-body { width: 100%; }
.ovio-cta-body > :last-child { margin-bottom: 0; }

/* the picture, on a soft glow of its colour (and, on light glass, a soft shadow under it) */
.ovio-cta-art { position: relative; flex: none; width: var(--aw, 124px); max-width: 100%; margin: 0 auto var(--ag, clamp(14px, 2.2vh, 22px)); line-height: 0; }
.ovio-cta-art::before { content: ''; position: absolute; inset: -26%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--c), .3), rgba(var(--c), .09) 55%, rgba(var(--c), 0)); }
.ovio-cta-light .ovio-cta-art::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -9%; height: 18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 14, 40, .24), rgba(10, 14, 40, 0)); }
/* (the picture is a layer of its own, so its moving parts redraw only it, never the glass behind) */
.ovio-cta-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; transition: transform .6s cubic-bezier(.2, .8, .2, 1); will-change: transform; }

/* the words, as the site's other elements set them: a small label spaced out in capitals, a light title */
.ovio-cta-eyebrow { display: block; margin: 0 0 var(--eg, 10px); font-size: var(--ef, 13px); line-height: 1.4; letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--c)); }
.ovio-cta-plain .ovio-cta-eyebrow { color: inherit; opacity: .72; }
.ovio-cta .ovio-cta-title { margin: 0 0 var(--tg, 10px); font-size: var(--tf, clamp(22px, 1.9vw, 28px)); font-weight: 300; line-height: 1.2; letter-spacing: 0; color: inherit; }
.ovio-cta-text { max-width: var(--xw, 34ch); margin: 0 auto; font-size: var(--xf, 15px); line-height: 1.7; opacity: .82; }
.ovio-cta-text p { margin: 0 0 .6em; }
.ovio-cta-text > :last-child { margin-bottom: 0; }
.ovio-cta .ovio-cta-btn.ovio-btn-wrap { margin: var(--bg, clamp(16px, 2.6vh, 26px)) 0 0; }
.ovio-cta-btn :is(a.button-style-dark, a.button-style-light) { font-size: var(--bf, inherit); }
/* the button's glow in the box's colour (the Glass UI sets its colours on the button itself, hence the !important) */
.ovio-cta-item .ovio-cta-btn :is(a.button-style-dark, a.button-style-light) { --gx-c1: var(--c) !important; --gx-c2: var(--cl) !important; }

/* ---- the shapes: the words of a circle or a pill sized to it (cqi: hundredths of the width inside its padding) ---- */
.ovio-cta-s-circle { --gx-circle-pad: 13%; --aw: 31cqi; --ag: 4.2cqi; --ef: clamp(9.5px, 3.9cqi, 13px); --eg: 2.4cqi; --tf: clamp(15px, 7.6cqi, 26px); --tg: 2.4cqi;
  --xf: clamp(11px, 4.7cqi, 15px); --xw: 100%; --bg: 5.4cqi; --bf: clamp(11.5px, 4.9cqi, 15px); }
.ovio-cta-s-circle .ovio-cta-text { line-height: 1.6; }
.ovio-cta-s-pill-vertical { --aw: 40cqi; --ag: 6cqi; --ef: clamp(9.5px, 5cqi, 12px); --eg: 2.8cqi; --tf: clamp(16px, 9cqi, 23px); --tg: 2.8cqi;
  --xf: clamp(11.5px, 6cqi, 14.5px); --xw: 100%; --bg: 7.5cqi; --bf: clamp(11.5px, 6cqi, 14px); }
.ovio-cta.ovio-cta-s-pill-vertical .ovio-cta-row .ovio-cta-item .ovio-cta-lift > .ovio-cta-card { padding: 0 22px; }
/* a lying pill: the picture in its rounded end (centred in it), the small label, the title and the button beside it; no room for the text */
.ovio-cta-s-pill-horizontal { --aw: 30.5cqi; --ef: clamp(9px, 3.3cqi, 12px); --eg: 1.2cqi; --tf: clamp(15px, 6.2cqi, 22px); --tg: 0px; --bg: 3.3cqi; --bf: clamp(11px, 4cqi, 14px); }
.ovio-cta.ovio-cta-s-pill-horizontal .ovio-cta-row .ovio-cta-item .ovio-cta-lift > .ovio-cta-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art body" "art btn"; align-content: center; align-items: center;
  justify-items: start; column-gap: 5%; row-gap: 0; padding: 3% 8% 3% 7%; text-align: left;
}
.ovio-cta-s-pill-horizontal .ovio-cta-art { grid-area: art; margin: 0; }
.ovio-cta-s-pill-horizontal .ovio-cta-body { grid-area: body; }
.ovio-cta-s-pill-horizontal .ovio-cta-text { display: none; }
.ovio-cta-s-pill-horizontal .ovio-cta-btn.ovio-btn-wrap { grid-area: btn; text-align: left; }
.ovio-cta-s-pill-horizontal .ovio-cta-btn :is(a.button-style-dark, a.button-style-light) { --gx-btn-pad: .72em 1.35em; }
/* where the light meets each shape */
.ovio-cta-s-circle { --edge-l: 36%; --slit-l: 18%; }
.ovio-cta-s-pill-vertical { --edge-l: 30%; --slit-l: 14%; }
.ovio-cta-s-pill-horizontal { --edge-l: 22%; --slit-l: 4%; }

/* ---- the light under each box: a glow rising from the horizon behind it, a short beam down to a point of light on the horizon, signals
   running up the beam, and the foot of the box lighting as each arrives ---- */
.ovio-cta-aura { position: absolute; z-index: 0; left: -16%; right: -16%; bottom: calc(-1 * var(--leg)); height: 88%; pointer-events: none; opacity: .72; transition: opacity .6s ease; }
.ovio-cta-aura::before, .ovio-cta-aura::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(50% 64% at 50% 100%, rgba(var(--c), .56), rgba(var(--c), .2) 46%, rgba(var(--c), 0) 74%); }
/* (as each signal arrives, the glow swells a little) */
.ovio-cta-aura::after { opacity: 0; background: radial-gradient(34% 52% at 50% 100%, rgba(var(--c), .4), rgba(var(--c), .1) 50%, rgba(var(--c), 0) 76%); }
.ovio-cta-js.is-in .ovio-cta-aura::after { animation: octa-aura 4.8s ease-in-out calc(2.6s + var(--u)) infinite both; }
.ovio-cta-leg { position: absolute; z-index: 2; left: 50%; top: 100%; width: 0; height: var(--leg); pointer-events: none; }
.ovio-cta-leg::before { content: ''; position: absolute; left: -.75px; top: 0; bottom: 0; width: 1.5px; border-radius: 2px; transition: opacity .5s ease;
  background: linear-gradient(to top, rgba(var(--c), .95), rgba(var(--c), .4) 70%, rgba(var(--c), .2)); box-shadow: 0 0 6px rgba(var(--c), .45); }
.ovio-cta-node { position: absolute; left: -4.5px; bottom: -4.5px; width: 9px; height: 9px; border-radius: 50%; transition: box-shadow .5s ease;
  background: radial-gradient(circle, #fff 0 34%, rgb(var(--c)) 56%, rgba(var(--c), 0) 76%);
  box-shadow: 0 0 12px 3px rgba(var(--c), .55), 0 0 0 5px rgba(var(--c), .12), 0 0 0 5.6px rgba(var(--c), .35); }
.ovio-cta-node::before { content: ''; position: absolute; left: 50%; top: 50%; width: 76px; height: 1px; margin: -.5px 0 0 -38px;
  background: linear-gradient(90deg, rgba(var(--c), 0), rgba(var(--c), .8) 38%, #fff 50%, rgba(var(--c), .8) 62%, rgba(var(--c), 0)); }
.ovio-cta-node::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(var(--c), .9); opacity: 0; }
/* (as its box comes up, a ripple runs out across the planet's surface from the point of light: the lower half of a flat ring) */
.ovio-cta-wave { position: absolute; left: -36px; bottom: -7px; width: 72px; height: 14px; border-radius: 50%; opacity: 0;
  border: 1.5px solid rgba(var(--c), .9); box-shadow: 0 0 8px rgba(var(--c), .5); -webkit-clip-path: inset(50% -2px -2px -2px); clip-path: inset(50% -2px -2px -2px); }
.ovio-cta-pulse { position: absolute; left: -1.5px; top: 0; width: 3px; height: 16px; border-radius: 3px; opacity: 0;
  background: linear-gradient(to top, rgba(var(--c), 0), rgb(var(--c)) 45%, #fff); box-shadow: 0 0 8px 1px rgba(var(--c), .7); }
.ovio-cta-edge { position: absolute; z-index: 3; left: var(--edge-l, 10%); right: var(--edge-l, 10%); bottom: -1px; height: 2px; opacity: 0; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--c), 0), rgba(var(--c), .95) 28%, #fff 50%, rgba(var(--c), .95) 72%, rgba(var(--c), 0)); }
.ovio-cta-edge::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: 34px; background: radial-gradient(50% 100% at 50% 100%, rgba(var(--c), .36), rgba(var(--c), 0)); }
/* the entrance's beam: from the point of light up past the top of the box (shown only as the box rises) */
.ovio-cta-beam { position: absolute; z-index: 0; left: 50%; bottom: calc(-1 * var(--leg)); width: 2px; height: calc(100% + var(--leg) + 4vh); margin-left: -1px;
  transform-origin: 50% 100%; opacity: 0; pointer-events: none;
  background: linear-gradient(to top, #fff, rgb(var(--c)) 6%, rgba(var(--c), .55) 55%, rgba(var(--c), 0)); }
.ovio-cta-beam::before { content: ''; position: absolute; left: -10px; right: -10px; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(var(--c), 0), rgba(var(--c), .28), rgba(var(--c), 0)); -webkit-mask: linear-gradient(to top, #000, transparent); mask: linear-gradient(to top, #000, transparent); }
/* the line of light the box rises through */
.ovio-cta-slit { position: absolute; z-index: 3; left: var(--slit-l, -4%); right: var(--slit-l, -4%); bottom: -1.5px; height: 3px; opacity: 0; pointer-events: none; border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--c), 0), rgba(var(--c), .95) 18%, #fff 42%, #fff 58%, rgba(var(--c), .95) 82%, rgba(var(--c), 0));
  box-shadow: 0 0 10px 1px rgba(var(--c), .6); }
.ovio-cta-slit::after { content: ''; position: absolute; left: 4%; right: 4%; top: -26px; height: 54px; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--c), .62), rgba(var(--c), .2) 50%, rgba(var(--c), 0)); }

/* ---- the entrance (once, when the row first comes into view; set going by the script) ---- */
/* rise: each box is cut off at its foot and starts below it, so it rises out of the line of light (the cut goes once it is up). The cut
   keeps the glows round its top and sides; overflow: clip keeps the box, while it waits below, from making the page longer */
.ovio-cta-js.ovio-cta-e-rise .ovio-cta-item:not(.is-up) .ovio-cta-slot { -webkit-clip-path: inset(-300px -300px 0 -300px); clip-path: inset(-300px -300px 0 -300px);
  overflow: clip; overflow-clip-margin: 110px; }
.ovio-cta-js.ovio-cta-e-rise .ovio-cta-lift { transform: translateY(104%); }
.ovio-cta-js.ovio-cta-e-rise.is-in .ovio-cta-lift { animation: octa-rise 1.25s cubic-bezier(.16, 1, .3, 1) calc(var(--d) + .42s) both; }
.ovio-cta-js.ovio-cta-e-rise.is-in .ovio-cta-slit { animation: octa-slit 1.7s cubic-bezier(.3, 0, .2, 1) calc(var(--d) + .3s) both; }
.ovio-cta-js.ovio-cta-e-rise.is-in .ovio-cta-beam { animation: octa-beam 2s cubic-bezier(.3, 0, .2, 1) var(--d) both; }
/* as it rises, the box carries the light up with it: lit in its colour from below, its top edge catching the light, both fading as it
   settles (in the glass's own shape) */
.ovio-cta-e-rise .ovio-cta-card::after { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, rgba(var(--c), .46), rgba(var(--c), .16) 36%, rgba(var(--c), 0) 68%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(var(--c), .35); }
.ovio-cta-js.ovio-cta-e-rise.is-in .ovio-cta-card::after { animation: octa-carry 2.1s ease-out calc(var(--d) + .42s) both; }
/* fade: the boxes fade in, rising a little */
.ovio-cta-js.ovio-cta-e-fade .ovio-cta-lift { opacity: 0; }
.ovio-cta-js.ovio-cta-e-fade.is-in .ovio-cta-lift { animation: octa-fade 1s cubic-bezier(.2, .8, .2, 1) var(--d) both; }
/* then the words and the picture, one after another */
.ovio-cta-js:not(.ovio-cta-e-none) :is(.ovio-cta-art, .ovio-cta-body > *, .ovio-cta-btn) { opacity: 0; }
.ovio-cta-js:not(.ovio-cta-e-none).is-in :is(.ovio-cta-art, .ovio-cta-body > *, .ovio-cta-btn) { animation: octa-show .9s cubic-bezier(.2, .8, .2, 1) calc(var(--d) + var(--k, 0s) + var(--k0, 1s)) both; }
.ovio-cta-js.ovio-cta-e-fade { --k0: .35s; }
.ovio-cta-body > :nth-child(1) { --k: .1s; } .ovio-cta-body > :nth-child(2) { --k: .18s; } .ovio-cta-body > :nth-child(3) { --k: .26s; } .ovio-cta-btn { --k: .36s; }
/* the points of light and the beams' glow come on with them; the glow under each box after it */
.ovio-cta-js:not(.ovio-cta-e-none) .ovio-cta-node, .ovio-cta-js:not(.ovio-cta-e-none) .ovio-cta-leg::before { opacity: 0; }
.ovio-cta-js:not(.ovio-cta-e-none).is-in .ovio-cta-node { animation: octa-node-in .7s cubic-bezier(.3, 0, .2, 1) var(--d) both; }
.ovio-cta-js:not(.ovio-cta-e-none).is-in .ovio-cta-node::before { animation: octa-flare 1.6s cubic-bezier(.2, .7, .3, 1) var(--d) both; }
.ovio-cta-js.ovio-cta-e-rise.is-in .ovio-cta-wave { animation: octa-wave 1.7s cubic-bezier(.15, .7, .3, 1) calc(var(--d) + 1.05s) both; }
.ovio-cta-js:not(.ovio-cta-e-none).is-in .ovio-cta-leg::before { animation: octa-in .8s ease calc(var(--d) + 1.2s) both; }
.ovio-cta-js:not(.ovio-cta-e-none) .ovio-cta-aura::before { opacity: 0; }
.ovio-cta-js:not(.ovio-cta-e-none).is-in .ovio-cta-aura::before { animation: octa-in 1.6s ease calc(var(--d) + .6s) both; }

@keyframes octa-rise { from { transform: translateY(104%); } to { transform: none; } }
@keyframes octa-carry { 0% { opacity: 1; } 50% { opacity: .75; } 100% { opacity: 0; } }
@keyframes octa-fade { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes octa-show { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes octa-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes octa-node-in { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes octa-flare { 0% { opacity: 0; transform: scaleX(.2); } 14% { opacity: 1; transform: scaleX(3.4); } 100% { opacity: 1; transform: scaleX(1); } }
@keyframes octa-wave { 0% { opacity: 0; transform: scale(.3); } 8% { opacity: 1; } 100% { opacity: 0; transform: scale(4.2); } }
@keyframes octa-beam { 0% { opacity: 1; transform: scaleY(0); } 34% { opacity: 1; transform: scaleY(1); } 66% { opacity: .85; } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes octa-slit { 0% { opacity: 0; transform: scaleX(.12); } 20% { opacity: 1; transform: scaleX(1); } 66% { opacity: .9; } 100% { opacity: 0; transform: scaleX(1.04); } }

/* ---- the signals: every 4.8s from each point of light in turn, up the beam and into the box, whose foot lights as it arrives ---- */
.ovio-cta-js.is-in .ovio-cta-pulse { animation: octa-pulse 4.8s linear calc(2.6s + var(--u)) infinite both; }
.ovio-cta-js.is-in .ovio-cta-node::after { animation: octa-ring 4.8s cubic-bezier(.2, .6, .3, 1) calc(2.6s + var(--u)) infinite both; }
.ovio-cta-js.is-in .ovio-cta-edge { animation: octa-edge 4.8s cubic-bezier(.2, .6, .3, 1) calc(2.6s + var(--u)) infinite both; }
@keyframes octa-pulse { 0% { opacity: 0; transform: translateY(var(--leg)) scaleY(.5); } 3% { opacity: 1; } 13% { opacity: 1; transform: translateY(-8px) scaleY(1); } 15%, 100% { opacity: 0; transform: translateY(-8px) scaleY(1); } }
@keyframes octa-ring { 0% { opacity: .95; transform: scale(.5); } 26%, 100% { opacity: 0; transform: scale(3.6); } }
@keyframes octa-edge { 0%, 12% { opacity: 0; transform: scaleX(.06); } 14.5% { opacity: 1; transform: scaleX(.34); } 34%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes octa-aura { 0%, 12% { opacity: 0; } 19% { opacity: 1; } 52%, 100% { opacity: 0; } }

/* ============================== the pictures: a round window on space, with a small scene in it ============================== */
/* (each part that turns or grows does so about its own middle: each is one fixed shape, or a group whose parts don't move. Only these: a
   group placed by its transform attribute must keep the attribute's own origin) */
.ovio-cta-svg :is(.cp-dawn, .tk-ping, .tk-sping, .tk-sig, .cl-sun, .cl-slot, .cl-rip, .cl-flare, .cl-p, .cl-q, .lc-burn, .lc-flame, .lc-sparks circle, .ic-moon) { transform-box: fill-box; transform-origin: 50% 50%; }
.ovio-cta-svg .cg0 { stop-color: rgb(var(--cl)); stop-opacity: .62; }
.ovio-cta-svg .cg1 { stop-color: rgb(var(--cl)); stop-opacity: .2; }
.ovio-cta-svg .cg2 { stop-color: rgb(var(--cl)); stop-opacity: 0; }
.ovio-cta-svg .ct0 { stop-color: rgb(var(--cl)); stop-opacity: .24; }
.ovio-cta-svg .ct1 { stop-color: rgb(var(--cl)); stop-opacity: 0; }
/* the window: a ring of the box's colour round it, a glass rim with a highlight */
.ovio-cta-svg .cp-halo { fill: none; stroke: rgb(var(--c)); stroke-width: 1; stroke-opacity: .5; }
.ovio-cta-svg .cp-halo2 { fill: none; stroke: rgb(var(--c)); stroke-width: 4; stroke-opacity: .1; }
.ovio-cta-svg .cp-rim { fill: none; stroke: #fff; stroke-width: 1; stroke-opacity: .5; }
.ovio-cta-svg .cp-shine { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-opacity: .5; }
.ovio-cta-svg .cp-st { fill: #fff; opacity: .7; }
.ovio-cta-svg .cp-limb { fill: none; stroke: #8ec0ff; stroke-width: 1.1; }
.ovio-cta-svg .cp-limbg { fill: none; stroke: #5b9dff; stroke-width: 4.5; stroke-opacity: .32; }
.ovio-cta-js.is-in .ovio-cta-svg .cp-st { animation: octa-tw 3.6s ease-in-out calc(var(--d) + 1s + var(--tw, 0s)) infinite both; }
.ovio-cta-js.is-in .ovio-cta-svg .cp-dawn { animation: octa-dawn 5.2s ease-in-out calc(var(--d) + 1s) infinite both; }
@keyframes octa-tw { 0%, 100% { opacity: .22; } 50% { opacity: .95; } }
@keyframes octa-dawn { 0%, 100% { opacity: .78; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }

/* Signals: a message runs up from the left point of light to the satellite and on down to the right one, and the reply comes back */
.ovio-cta-art-talk .tk-net { fill: none; stroke: #fff; stroke-opacity: .16; stroke-width: .7; stroke-dasharray: 1 2; }
.ovio-cta-art-talk .tk-route { fill: none; stroke: rgb(var(--cl)); stroke-width: .8; stroke-opacity: .26; stroke-dasharray: 1.6 2.6; }
.ovio-cta-art-talk .tk-ring { fill: none; stroke: rgb(var(--cl)); stroke-width: .8; stroke-opacity: .6; }
.ovio-cta-art-talk .tk-core, .ovio-cta-art-talk .tk-sc, .ovio-cta-art-talk .tk-tip { fill: #fff; }
.ovio-cta-art-talk :is(.tk-ping, .tk-sping) { fill: none; stroke: rgb(var(--cl)); stroke-width: .9; opacity: 0; }
.ovio-cta-art-talk .tk-sglow { opacity: .4; }
.ovio-cta-art-talk .tk-panel { fill: #2c4bc8; stroke: #a9bdff; stroke-width: .45; }
.ovio-cta-art-talk .tk-cells { fill: none; stroke: #a9bdff; stroke-width: .35; stroke-opacity: .8; }
.ovio-cta-art-talk .tk-truss { fill: none; stroke: #cdd7ff; stroke-width: .8; stroke-linecap: round; }
.ovio-cta-art-talk .tk-body { fill: #e3e9ff; }
.ovio-cta-art-talk .tk-sig { opacity: 0; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-sat { animation: octa-tk-bob 4.6s ease-in-out calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-r1 { animation: octa-tk-flow 1.4s linear infinite, octa-tk-r1 6.4s linear calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-r2 { animation: octa-tk-flow 1.4s linear infinite, octa-tk-r2 6.4s linear calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-p1 { animation: octa-tk-send 6.4s ease-out calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-p1b { animation: octa-tk-back 6.4s ease-out calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-p2 { animation: octa-tk-get 6.4s ease-out calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-sping { animation: octa-tk-sping 6.4s ease-out calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-sglow { animation: octa-tk-sglow 6.4s ease-in-out calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-sA { animation: octa-tk-a 6.4s linear calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-sB { animation: octa-tk-b 6.4s linear calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-sC { animation: octa-tk-c 6.4s linear calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-talk .tk-sD { animation: octa-tk-d 6.4s linear calc(var(--d) + 1s) infinite both; }
@keyframes octa-tk-bob { 0%, 100% { transform: translateY(1.2px); } 50% { transform: translateY(-1.2px); } }
@keyframes octa-tk-flow { to { stroke-dashoffset: -4.2; } }
@keyframes octa-tk-r1 { 0%, 2% { stroke-opacity: .26; } 6%, 17% { stroke-opacity: .7; } 22%, 69% { stroke-opacity: .26; } 73%, 84% { stroke-opacity: .7; } 89%, 100% { stroke-opacity: .26; } }
@keyframes octa-tk-r2 { 0%, 23% { stroke-opacity: .26; } 27%, 38% { stroke-opacity: .7; } 43%, 49% { stroke-opacity: .26; } 53%, 64% { stroke-opacity: .7; } 69%, 100% { stroke-opacity: .26; } }
@keyframes octa-tk-send { 0% { opacity: .95; transform: scale(.6); } 14%, 100% { opacity: 0; transform: scale(3); } }
@keyframes octa-tk-back { 0%, 85.9% { opacity: 0; transform: scale(.6); } 86% { opacity: .95; transform: scale(.6); } 100% { opacity: 0; transform: scale(3); } }
@keyframes octa-tk-get { 0%, 39.9% { opacity: 0; transform: scale(.6); } 40% { opacity: .95; transform: scale(.6); } 54%, 100% { opacity: 0; transform: scale(3); } }
@keyframes octa-tk-sping { 0%, 18.9% { opacity: 0; transform: scale(.6); } 19% { opacity: .95; transform: scale(.6); } 33% { opacity: 0; transform: scale(2.8); }
  65.9% { opacity: 0; transform: scale(.6); } 66% { opacity: .95; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes octa-tk-sglow { 0%, 17% { opacity: .4; } 21% { opacity: 1; } 34%, 64% { opacity: .4; } 68% { opacity: 1; } 81%, 100% { opacity: .4; } }

/* Orbit: a planet goes round the sun on an orbit marked like a clock; as it reaches the time marked in the box's colour that mark flares,
   ripples out and stays lit (booked) until the planet comes round again */
.ovio-cta-art-call .cl-orbit { fill: none; stroke: #fff; stroke-opacity: .28; stroke-width: .6; }
.ovio-cta-art-call .cl-far { stroke-dasharray: .8 2.2; stroke-opacity: .36; }
.ovio-cta-art-call .cl-ticks circle { fill: #fff; opacity: .55; }
.ovio-cta-art-call .cl-streak { stroke: #ffe7c2; stroke-width: .7; stroke-linecap: round; opacity: .55; }
.ovio-cta-art-call .cl-streak2 { opacity: .3; }
.ovio-cta-art-call .cl-core { fill: #fff8e6; }
.ovio-cta-art-call .cl-sring { fill: none; stroke: rgb(var(--cl)); stroke-width: .9; }
.ovio-cta-art-call .cl-score, .ovio-cta-art-call .cl-pc { fill: #fff; }
.ovio-cta-art-call .cl-qc { fill: #9cc2ff; }
.ovio-cta-art-call .cl-rip { fill: none; stroke: rgb(var(--cl)); stroke-width: .9; opacity: 0; }
.ovio-cta-art-call .cl-flare { stroke: #fff; stroke-width: .7; stroke-linecap: round; opacity: 0; }
.ovio-cta-art-call .cl-p { transform: translate(81px, 73.86px) scale(1.14); }   /* (keeping still: at the time booked) */
.ovio-cta-art-call .cl-q { transform: translate(38.5px, 60px); }
.ovio-cta-js.is-in .ovio-cta-art-call .cl-sun { animation: octa-cl-sun 6.4s ease-in-out calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-call .cl-p { animation: octa-cl-p 6.4s linear calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-call .cl-q { animation: octa-cl-q 3.2s linear calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-call .cl-slot { animation: octa-cl-slot 6.4s ease-out calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-call .cl-rip1 { animation: octa-cl-rip 6.4s cubic-bezier(.2, .6, .3, 1) calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-call .cl-rip2 { animation: octa-cl-rip 6.4s cubic-bezier(.2, .6, .3, 1) calc(var(--d) + 1.22s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-call .cl-flare { animation: octa-cl-flare 6.4s ease-out calc(var(--d) + 1s) infinite both; }
@keyframes octa-cl-sun { 0%, 100% { transform: scale(.95); } 30% { transform: scale(1.03); } 61% { transform: scale(.98); } 66% { transform: scale(1.1); } 80% { transform: scale(1); } }
@keyframes octa-cl-slot { 0%, 60% { opacity: .45; transform: scale(.85); } 61.5% { opacity: 1; transform: scale(1.7); } 68% { opacity: 1; transform: scale(1.15); } 90% { opacity: 1; transform: scale(1.1); } 100% { opacity: .45; transform: scale(.85); } }
@keyframes octa-cl-rip { 0%, 60.9% { opacity: 0; transform: scale(1); } 61% { opacity: .9; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(4.4); } }
@keyframes octa-cl-flare { 0%, 60.9% { opacity: 0; transform: scaleX(.2); } 62% { opacity: .9; transform: scaleX(1.3); } 74%, 100% { opacity: 0; transform: scaleX(.6); } }

/* Launch: a rocket climbing away from the horizon, its flame flickering and sparks streaming back; every few seconds a full burn: the flame
   flares, it surges on and space streaks past */
.ovio-cta-art-proposal .lc-w { fill: none; stroke: #dfe8ff; stroke-width: .8; stroke-linecap: round; opacity: 0; }
.ovio-cta-art-proposal .lc-w1 { --x: 98px; --y: 8px; --wd: 1.5s; --wl: -.2s; }
.ovio-cta-art-proposal .lc-w2 { --x: 112px; --y: 30px; --wd: 1.9s; --wl: -1.1s; }
.ovio-cta-art-proposal .lc-w3 { --x: 76px; --y: 12px; --wd: 1.7s; --wl: -.7s; }
.ovio-cta-art-proposal .lc-w4 { --x: 118px; --y: 56px; --wd: 1.6s; --wl: -1.4s; }
.ovio-cta-art-proposal .lc-w5 { --x: 90px; --y: 26px; --wd: 2.1s; --wl: -.4s; }
.ovio-cta-art-proposal .lc-w6 { --x: 108px; --y: 10px; --wd: 1.8s; --wl: -1.6s; }
.ovio-cta-art-proposal .lc-trailg { fill: none; stroke-width: 6; stroke-linecap: round; opacity: .4; }
.ovio-cta-art-proposal .lc-trail { fill: none; stroke-width: 1.2; stroke-linecap: round; opacity: .9; }
.ovio-cta-art-proposal .lc-hull { fill: rgba(var(--cl), .14); stroke: #fff; stroke-width: .75; stroke-linejoin: round; stroke-linecap: round; }
.ovio-cta-art-proposal .lc-hullg { fill: none; stroke: rgb(var(--cl)); stroke-width: 2.6; stroke-opacity: .36; stroke-linejoin: round; }
.ovio-cta-art-proposal .lc-port { fill: rgba(var(--cl), .38); stroke: #fff; stroke-width: .6; }
.ovio-cta-art-proposal .lc-flame { transform-origin: 50% 0; }
.ovio-cta-art-proposal .lc-burn { opacity: 0; }
.ovio-cta-art-proposal .lc-sparks circle { fill: #ffc27a; opacity: 0; }
.ovio-cta-js.is-in .ovio-cta-art-proposal .lc-w { animation: octa-lc-warp var(--wd) linear calc(var(--d) + 1s + var(--wl)) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-proposal .lc-bob { animation: octa-lc-bob 3s ease-in-out calc(var(--d) + 1s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-proposal .lc-surge { animation: octa-lc-surge 4.8s cubic-bezier(.3, 0, .2, 1) calc(var(--d) + 1.4s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-proposal .lc-flame { animation: octa-lc-flick .28s ease-in-out infinite alternate, octa-lc-boost 4.8s cubic-bezier(.3, 0, .2, 1) calc(var(--d) + 1.4s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-proposal .lc-burn { animation: octa-lc-burn 4.8s ease-out calc(var(--d) + 1.4s) infinite both; }
.ovio-cta-js.is-in .ovio-cta-art-proposal .lc-sparks circle { animation: octa-lc-spark 1.2s linear infinite; }
.ovio-cta-art-proposal .lc-sparks circle:nth-child(2) { animation-delay: -.3s; --sx: -1.8px; }
.ovio-cta-art-proposal .lc-sparks circle:nth-child(3) { animation-delay: -.6s; --sx: 1.6px; }
.ovio-cta-art-proposal .lc-sparks circle:nth-child(4) { animation-delay: -.9s; --sx: -.8px; }
.ovio-cta-js.is-in .ovio-cta-art-proposal .lc-trail, .ovio-cta-js.is-in .ovio-cta-art-proposal .lc-trailg { animation: octa-lc-trail 4.8s ease-in-out calc(var(--d) + 1.4s) infinite both; }
@keyframes octa-lc-warp { 0% { opacity: 0; transform: translate(var(--x), var(--y)); } 20% { opacity: .7; } 70% { opacity: .5; } 100% { opacity: 0; transform: translate(calc(var(--x) - 70px), calc(var(--y) + 70px)); } }
@keyframes octa-lc-bob { 0%, 100% { transform: translate(-.6px, .6px); } 50% { transform: translate(.6px, -.6px); } }
@keyframes octa-lc-surge { 0% { transform: none; } 9% { transform: translate(2.6px, -2.6px); } 40%, 100% { transform: none; } }
@keyframes octa-lc-flick { from { scale: 1 .8; opacity: .85; } to { scale: 1 1.12; opacity: 1; } }
@keyframes octa-lc-boost { 0%, 100% { transform: none; } 6% { transform: scale(1.25, 1.75); } 26% { transform: scale(1.05, 1.15); } 40% { transform: none; } }
@keyframes octa-lc-burn { 0% { opacity: 0; transform: scale(.6); } 6% { opacity: 1; transform: scale(1.2); } 30%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes octa-lc-spark { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx, 0px), 13px) scale(.35); } }
@keyframes octa-lc-trail { 0%, 100% { opacity: .7; } 8% { opacity: 1; } 40% { opacity: .8; } }

/* its own icon in the window, a moon circling it */
.ovio-cta-icw { position: relative; display: block; }
.ovio-cta-icn { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; }
.ovio-cta-icn > svg { width: 34%; height: 34%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(var(--cl), .9)); }
.ovio-cta-icn > i { font-size: calc(var(--aw, 124px) * .32); line-height: 1; text-shadow: 0 0 10px rgba(var(--cl), .9); }
.ovio-cta-art-icon .ic-orbit { fill: none; stroke: rgb(var(--cl)); stroke-opacity: .32; stroke-width: .6; stroke-dasharray: .8 2.4; }
.ovio-cta-art-icon .ic-mc { fill: #fff; }
.ovio-cta-js.is-in .ovio-cta-art-icon .ic-moon { animation: octa-spin 9s linear calc(var(--d) + 1s) infinite both; }
@keyframes octa-spin { to { transform: rotate(1turn); } }

/* ---- generated by tools/cta_motion.py: the messages of Signals, and the planets of Orbit ---- */
@keyframes octa-tk-a { 0%, 2.99% { opacity: 0; transform: translate(36px, 80px) scale(.4); } 3% { opacity: .2; transform: translate(36px, 80px) scale(0.4); } 4.6% { opacity: 1; transform: translate(36.25px, 77.79px) scale(1); } 6.2% { opacity: 1; transform: translate(37.25px, 72.06px) scale(1); } 7.8% { opacity: 1; transform: translate(39.55px, 64.35px) scale(1); } 9.4% { opacity: 1; transform: translate(43.65px, 56.18px) scale(1); } 11% { opacity: 1; transform: translate(49.75px, 48.75px) scale(1); } 12.6% { opacity: 1; transform: translate(57.56px, 42.86px) scale(1); } 14.2% { opacity: 1; transform: translate(66.24px, 38.79px) scale(1); } 15.8% { opacity: 1; transform: translate(74.48px, 36.42px) scale(1); } 17.4% { opacity: 1; transform: translate(80.62px, 35.31px) scale(1); } 19% { opacity: 1; transform: translate(83px, 35px) scale(1.3); } 20.4%, 100% { opacity: 0; transform: translate(83px, 35px) scale(.6); } }
@keyframes octa-tk-b { 0%, 23.99% { opacity: 0; transform: translate(88px, 38px) scale(.4); } 24% { opacity: .2; transform: translate(88px, 38px) scale(0.4); } 25.6% { opacity: 1; transform: translate(88.86px, 39.4px) scale(1); } 27.2% { opacity: 1; transform: translate(90.9px, 43.18px) scale(1); } 28.8% { opacity: 1; transform: translate(93.05px, 48.71px) scale(1); } 30.4% { opacity: 1; transform: translate(94.31px, 55.35px) scale(1); } 32% { opacity: 1; transform: translate(94px, 62.5px) scale(1); } 33.6% { opacity: 1; transform: translate(91.94px, 69.56px) scale(1); } 35.2% { opacity: 1; transform: translate(88.5px, 75.97px) scale(1); } 36.8% { opacity: 1; transform: translate(84.56px, 81.19px) scale(1); } 38.4% { opacity: 1; transform: translate(81.31px, 84.71px) scale(1); } 40% { opacity: 1; transform: translate(80px, 86px) scale(1.3); } 41.4%, 100% { opacity: 0; transform: translate(80px, 86px) scale(.6); } }
@keyframes octa-tk-c { 0%, 49.99% { opacity: 0; transform: translate(80px, 86px) scale(.4); } 50% { opacity: .2; transform: translate(80px, 86px) scale(0.4); } 51.6% { opacity: 1; transform: translate(81.31px, 84.71px) scale(1); } 53.2% { opacity: 1; transform: translate(84.56px, 81.19px) scale(1); } 54.8% { opacity: 1; transform: translate(88.5px, 75.97px) scale(1); } 56.4% { opacity: 1; transform: translate(91.94px, 69.56px) scale(1); } 58% { opacity: 1; transform: translate(94px, 62.5px) scale(1); } 59.6% { opacity: 1; transform: translate(94.31px, 55.35px) scale(1); } 61.2% { opacity: 1; transform: translate(93.05px, 48.71px) scale(1); } 62.8% { opacity: 1; transform: translate(90.9px, 43.18px) scale(1); } 64.4% { opacity: 1; transform: translate(88.86px, 39.4px) scale(1); } 66% { opacity: 1; transform: translate(88px, 38px) scale(1.3); } 67.4%, 100% { opacity: 0; transform: translate(88px, 38px) scale(.6); } }
@keyframes octa-tk-d { 0%, 69.99% { opacity: 0; transform: translate(83px, 35px) scale(.4); } 70% { opacity: .2; transform: translate(83px, 35px) scale(0.4); } 71.6% { opacity: 1; transform: translate(80.62px, 35.31px) scale(1); } 73.2% { opacity: 1; transform: translate(74.48px, 36.42px) scale(1); } 74.8% { opacity: 1; transform: translate(66.24px, 38.79px) scale(1); } 76.4% { opacity: 1; transform: translate(57.56px, 42.86px) scale(1); } 78% { opacity: 1; transform: translate(49.75px, 48.75px) scale(1); } 79.6% { opacity: 1; transform: translate(43.65px, 56.18px) scale(1); } 81.2% { opacity: 1; transform: translate(39.55px, 64.35px) scale(1); } 82.8% { opacity: 1; transform: translate(37.25px, 72.06px) scale(1); } 84.4% { opacity: 1; transform: translate(36.25px, 77.79px) scale(1); } 86% { opacity: 1; transform: translate(36px, 80px) scale(1.3); } 87.4%, 100% { opacity: 0; transform: translate(36px, 80px) scale(.6); } }
@keyframes octa-cl-p { 0% { opacity: 0.81; transform: translate(20.53px, 54.53px) scale(0.95); } 2.78% { opacity: 0.73; transform: translate(23.63px, 52px) scale(0.92); } 5.56% { opacity: 0.65; transform: translate(27.83px, 49.72px) scale(0.9); } 8.33% { opacity: 0.58; transform: translate(33px, 47.74px) scale(0.88); } 11.11% { opacity: 0.52; transform: translate(39px, 46.14px) scale(0.86); } 13.89% { opacity: 0.48; transform: translate(45.64px, 44.96px) scale(0.85); } 16.67% { opacity: 0.46; transform: translate(52.71px, 44.24px) scale(0.84); } 19.44% { opacity: 0.45; transform: translate(60px, 44px) scale(0.84); } 22.22% { opacity: 0.46; transform: translate(67.29px, 44.24px) scale(0.84); } 25% { opacity: 0.48; transform: translate(74.36px, 44.96px) scale(0.85); } 27.78% { opacity: 0.52; transform: translate(81px, 46.14px) scale(0.86); } 30.56% { opacity: 0.58; transform: translate(87px, 47.74px) scale(0.88); } 33.33% { opacity: 0.65; transform: translate(92.17px, 49.72px) scale(0.9); } 36.11% { opacity: 0.72; transform: translate(96.37px, 52px) scale(0.92); } 38.89% { opacity: 0.81; transform: translate(99.47px, 54.53px) scale(0.95); } 41.67% { opacity: 0.9; transform: translate(101.36px, 57.22px) scale(0.97); } 44.44% { opacity: 1; transform: translate(102px, 60px) scale(1); } 47.22% { opacity: 1; transform: translate(101.36px, 62.78px) scale(1.03); } 50% { opacity: 1; transform: translate(99.47px, 65.47px) scale(1.05); } 52.78% { opacity: 1; transform: translate(96.37px, 68px) scale(1.08); } 55.56% { opacity: 1; transform: translate(92.17px, 70.28px) scale(1.1); } 58.33% { opacity: 1; transform: translate(87px, 72.26px) scale(1.12); } 61.11% { opacity: 1; transform: translate(81px, 73.86px) scale(1.14); } 63.89% { opacity: 1; transform: translate(74.36px, 75.04px) scale(1.15); } 66.67% { opacity: 1; transform: translate(67.29px, 75.76px) scale(1.16); } 69.44% { opacity: 1; transform: translate(60px, 76px) scale(1.16); } 72.22% { opacity: 1; transform: translate(52.71px, 75.76px) scale(1.16); } 75% { opacity: 1; transform: translate(45.64px, 75.04px) scale(1.15); } 77.78% { opacity: 1; transform: translate(39px, 73.86px) scale(1.14); } 80.56% { opacity: 1; transform: translate(33px, 72.26px) scale(1.12); } 83.33% { opacity: 1; transform: translate(27.83px, 70.28px) scale(1.1); } 86.11% { opacity: 1; transform: translate(23.63px, 68px) scale(1.08); } 88.89% { opacity: 1; transform: translate(20.53px, 65.47px) scale(1.05); } 91.67% { opacity: 1; transform: translate(18.64px, 62.78px) scale(1.03); } 94.44% { opacity: 1; transform: translate(18px, 60px) scale(1); } 97.22% { opacity: 0.9; transform: translate(18.64px, 57.22px) scale(0.97); } 100% { opacity: 0.81; transform: translate(20.53px, 54.53px) scale(0.95); } }
@keyframes octa-cl-q { 0% { opacity: 1; transform: translate(47.05px, 66.87px) scale(1.16); } 4.17% { opacity: 1; transform: translate(42.89px, 65.34px) scale(1.13); } 8.33% { opacity: 1; transform: translate(39.89px, 63.45px) scale(1.08); } 12.5% { opacity: 1; transform: translate(38.27px, 61.32px) scale(1.03); } 16.67% { opacity: 0.94; transform: translate(38.12px, 59.1px) scale(0.98); } 20.83% { opacity: 0.78; transform: translate(39.47px, 56.95px) scale(0.93); } 25% { opacity: 0.65; transform: translate(42.21px, 55px) scale(0.88); } 29.17% { opacity: 0.53; transform: translate(46.17px, 53.39px) scale(0.84); } 33.33% { opacity: 0.45; transform: translate(51.07px, 52.23px) scale(0.82); } 37.5% { opacity: 0.41; transform: translate(56.58px, 51.6px) scale(0.8); } 41.67% { opacity: 0.4; transform: translate(62.32px, 51.55px) scale(0.8); } 45.83% { opacity: 0.44; transform: translate(67.9px, 52.07px) scale(0.81); } 50% { opacity: 0.51; transform: translate(72.95px, 53.13px) scale(0.84); } 54.17% { opacity: 0.62; transform: translate(77.11px, 54.66px) scale(0.87); } 58.33% { opacity: 0.76; transform: translate(80.11px, 56.55px) scale(0.92); } 62.5% { opacity: 0.91; transform: translate(81.73px, 58.68px) scale(0.97); } 66.67% { opacity: 1; transform: translate(81.88px, 60.9px) scale(1.02); } 70.83% { opacity: 1; transform: translate(80.53px, 63.05px) scale(1.07); } 75% { opacity: 1; transform: translate(77.79px, 65px) scale(1.12); } 79.17% { opacity: 1; transform: translate(73.83px, 66.61px) scale(1.16); } 83.33% { opacity: 1; transform: translate(68.93px, 67.77px) scale(1.18); } 87.5% { opacity: 1; transform: translate(63.42px, 68.4px) scale(1.2); } 91.67% { opacity: 1; transform: translate(57.68px, 68.45px) scale(1.2); } 95.83% { opacity: 1; transform: translate(52.1px, 67.93px) scale(1.19); } 100% { opacity: 1; transform: translate(47.05px, 66.87px) scale(1.16); } }

/* ---- hover: the box's glow and beam brighten and its picture lifts (the Glass UI tilts the box itself) ---- */
@media (hover: hover) {
  .ovio-cta-item:is(:hover, :focus-within) .ovio-cta-aura { opacity: 1; }
  .ovio-cta-item:is(:hover, :focus-within) .ovio-cta-svg { transform: translateY(-4px) scale(1.04); }
  .ovio-cta-item:is(:hover, :focus-within) .ovio-cta-node { box-shadow: 0 0 16px 5px rgba(var(--c), .75), 0 0 0 6px rgba(var(--c), .16), 0 0 0 6.6px rgba(var(--c), .5); }
  .ovio-cta-item:is(:hover, :focus-within) .ovio-cta-leg::before { box-shadow: 0 0 9px 1px rgba(var(--c), .7); }
}

/* ---- narrower boxes: four in a row, and tablets ---- */
.ovio-cta-n4:is(.ovio-cta-s-box, .ovio-cta-s-square) { --aw: 100px; }
.ovio-cta-n4 .ovio-cta-btn :is(a.button-style-dark, a.button-style-light) { --gx-btn-pad: .9em 1.4em; letter-spacing: .03em; }
@media (max-width: 999px) {
  .ovio-cta:is(.ovio-cta-s-box, .ovio-cta-s-square) { --aw: 96px; --tf: 21px; --xf: 14.5px; }
  .ovio-cta:is(.ovio-cta-s-box, .ovio-cta-s-square) .ovio-cta-row .ovio-cta-item .ovio-cta-lift > .ovio-cta-card { --gx-pad: 22px 18px; }
  .ovio-cta-btn :is(a.button-style-dark, a.button-style-light) { --gx-btn-pad: .85em 1.25em; letter-spacing: .02em; }
}

/* ---- small tablets and phones (up to 899px) ---- */
@media (max-width: 899px) {
  /* one above the other (boxes, squares and lying pills): the picture beside the words and the button; the signals climb from the horizon
     up through the gaps. --aw: the picture's width, --pl: the space to its left (the beams run down through the middle of the pictures) */
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square, .ovio-cta-s-pill-horizontal) .ovio-cta-row { flex-direction: column; gap: 14px; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square, .ovio-cta-s-pill-horizontal) .ovio-cta-item { --d: calc(var(--j, 0) * .22s); --u: calc(var(--j, 0) * .42s); flex: none; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square, .ovio-cta-s-pill-horizontal) .ovio-cta-item:not(:last-child) { --leg: 14px; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) .ovio-cta-slot { min-height: 0; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square, .ovio-cta-s-pill-horizontal) .ovio-cta-item:not(:last-child) :is(.ovio-cta-node, .ovio-cta-wave) { display: none; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) { --aw: 96px; --pl: 20px; --ag: 0px; --tf: 22px; --tg: 0px; --xf: 15px; --xw: 60ch; --bg: 0px; --edge-l: auto; }
  .ovio-cta.ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) .ovio-cta-row .ovio-cta-item .ovio-cta-lift > .ovio-cta-card {
    --gx-pad: 20px 24px 20px var(--pl); display: grid; grid-template-columns: var(--aw) minmax(0, 1fr); grid-template-areas: "art body" "art btn";
    column-gap: 20px; row-gap: 12px; align-items: center; justify-items: start; text-align: left; }
  .ovio-cta.ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) .ovio-cta-row .ovio-cta-item .ovio-cta-lift > .ovio-cta-card:not(:has(.ovio-cta-art)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "btn"; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) .ovio-cta-art { grid-area: art; margin: 0; align-self: center; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) .ovio-cta-body { grid-area: body; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) .ovio-cta-btn.ovio-btn-wrap { grid-area: btn; text-align: left; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) .ovio-cta-text { margin: 8px 0 0; line-height: 1.55; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) :is(.ovio-cta-leg, .ovio-cta-beam) { left: calc(var(--pl) + var(--aw) / 2); }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) .ovio-cta-edge { left: 4%; right: auto; width: 46%; }
  /* stacked lying pills, centred: the beams run down through the middle of their rounded ends */
  .ovio-cta-m-stack.ovio-cta-s-pill-horizontal :is(.ovio-cta-leg, .ovio-cta-beam) { left: calc(50% - min(100%, var(--gx-pill-h-max, 560px)) * .3); }
  .ovio-cta-m-stack.ovio-cta-s-pill-horizontal .ovio-cta-edge { left: calc(50% - min(100%, var(--gx-pill-h-max, 560px)) * .38); right: auto; width: calc(min(100%, var(--gx-pill-h-max, 560px)) * .3); }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square, .ovio-cta-s-pill-horizontal) .ovio-cta-aura { left: -8%; right: 30%; height: 130%; opacity: .5; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square, .ovio-cta-s-pill-horizontal) .ovio-cta-aura::before { background: radial-gradient(40% 56% at 22% 100%, rgba(var(--c), .42), rgba(var(--c), .12) 50%, rgba(var(--c), 0) 76%); }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square, .ovio-cta-s-pill-horizontal) .ovio-cta-aura::after { background: radial-gradient(28% 46% at 22% 100%, rgba(var(--c), .4), rgba(var(--c), .1) 50%, rgba(var(--c), 0) 76%); }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square, .ovio-cta-s-pill-horizontal) .ovio-cta-slit { left: -2%; right: -2%; }

  /* in a row to swipe through (also circles and upright pills, which can't be stacked in the space) */
  :is(.ovio-cta-m-swipe, .ovio-cta-s-circle, .ovio-cta-s-pill-vertical) .ovio-cta-row { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px;
    margin: 0 -16px; padding: 40px 16px calc(var(--cta-above) * var(--vh) + 14px); scroll-padding: 0 16px; }
  :is(.ovio-cta-m-swipe, .ovio-cta-s-circle, .ovio-cta-s-pill-vertical) .ovio-cta-row::-webkit-scrollbar { display: none; }
  :is(.ovio-cta-m-swipe, .ovio-cta-s-circle, .ovio-cta-s-pill-vertical) .ovio-cta-item { flex: 0 0 min(62%, 400px); scroll-snap-align: center; }
  .ovio-cta-m-swipe.ovio-cta-s-box .ovio-cta-slot { min-height: calc(min(var(--cta-h), 62) * var(--vh)); }
  :is(.ovio-cta-m-swipe, .ovio-cta-s-circle, .ovio-cta-s-pill-vertical) .ovio-cta-head { padding: 0 4px; }
}
/* ---- phones (up to 767px): stacked boxes made compact (their text left off, unless it is set to show), swiped ones nearly full width ---- */
@media (max-width: 767px) {
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) { --aw: 74px; --pl: 14px; --ef: 10.5px; --eg: 5px; --tf: 19px; --xf: 14px; --bf: 13px; }
  .ovio-cta.ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) .ovio-cta-row .ovio-cta-item .ovio-cta-lift > .ovio-cta-card { --gx-pad: 16px 18px 16px var(--pl); column-gap: 16px; row-gap: 10px; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square):not(.ovio-cta-mtext) .ovio-cta-text { display: none; }
  .ovio-cta-m-stack:is(.ovio-cta-s-box, .ovio-cta-s-square) .ovio-cta-btn :is(a.button-style-dark, a.button-style-light) { --gx-btn-pad: .72em 1.4em; }
  :is(.ovio-cta-m-swipe, .ovio-cta-s-circle, .ovio-cta-s-pill-vertical) .ovio-cta-item { flex-basis: 82%; }
}

/* ---- off screen, everything waits (and picks up where it was) ---- */
.ovio-cta.is-paused *, .ovio-cta.is-paused *::before, .ovio-cta.is-paused *::after { animation-play-state: paused !important; }

/* ---- "reduce motion": the boxes fade in and keep still, their pictures still too ---- */
@media (prefers-reduced-motion: reduce) {
  .ovio-cta *, .ovio-cta *::before, .ovio-cta *::after { animation: none !important; transition: none !important; }
  .ovio-cta-js .ovio-cta-lift { transform: none !important; opacity: 1; }
  .ovio-cta-js.is-in .ovio-cta-lift { animation: octa-in .8s ease both !important; }
  .ovio-cta-js :is(.ovio-cta-art, .ovio-cta-body > *, .ovio-cta-btn, .ovio-cta-node), .ovio-cta-js .ovio-cta-aura::before, .ovio-cta-js .ovio-cta-leg::before { opacity: 1 !important; }
  .ovio-cta :is(.ovio-cta-beam, .ovio-cta-slit, .ovio-cta-pulse, .ovio-cta-edge, .ovio-cta-wave) { display: none !important; }
}