/*
 * OOXFLOW theme — page animations, Contact page, card kinds, legal pages (owner 2026-10-18).
 * Hand-edited HERE; `node scripts/build-ooxflow-site-theme.mjs` copies it to
 * public/platform-themes/ooxflow/assets/css/ooxflow-visuals.css (loaded last).
 */

/* ── 1. Hero animation: no box, like Home; three sizes ──────────────────────
 * lg = Home (its own hero, untouched) · md = the store-sync animation without
 * its card · sm = the page's own small animation (pack/visuals.mjs). */
.oox-inner-hero .oox-sync-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.oox-hero-md .oox-sync-experience { max-width: 660px; margin-left: auto; }
/* Particles blend into the page (owner 2026-10-18: "black on a different black").
   The particle canvas draws on black and uses `mix-blend-mode: screen`, so its black only
   disappears when it blends with the hero itself. On Home it does. On inner pages the
   pack's `.oox-lite-panel { isolation: isolate }`, the stage's own `isolation: isolate` and
   the workbench stage's `z-index: -1` each closed it into its own layer — the canvas'
   black then showed as a darker oval over the hero's navy glow. Open those layers up
   (the hero section stays the layer, like Home). Home is not touched. */
.oox-inner-hero .oox-lite-panel,
.oox-inner-hero .oox-neuron-stage { isolation: auto; }
.oox-inner-hero .oox-lite-panel.oox-has-workbench .oox-neuron-stage { z-index: auto; overflow: visible; }

/* No Play / Pause button (owner 2026-10-18): the animation always runs. The button stays in
   the markup, hidden — ooxflow-workflows.js needs it. It still rests off screen, in a hidden
   tab and for visitors whose device asks for reduced motion. */
.oox-sync-controls [data-sync-toggle] { display: none !important; }
.oox-sync-controls { justify-content: center; }

@media (min-width: 1024px) {
  .oox-hero-sm .oox-hero-layout { grid-template-columns: 1.04fr .96fr; }
}
@media (max-width: 1023px) {
  .oox-hero-md .oox-sync-experience { margin: 8px auto 0; }
  .oox-hero-sm .oox-pv { margin-top: 18px; }
}

/* ── 2. Page animations (.oox-pv) ─────────────────────────────────────────── */
/* Host = the export's own hero animation: its WebGL particle field keeps moving behind
   (same background as Home on every page); its cards, labels and controls are hidden. */
.oox-pv-host { position: relative; max-width: 540px; margin: 0 auto; }
.oox-pv-host > :not(.oox-neuron-stage):not(.oox-pv) { display: none !important; }
.oox-pv-host > .oox-neuron-stage {
  position: absolute;
  inset: 0;
  z-index: auto; /* no own layer — see "Particles blend into the page" below */
  width: 100%;
  height: 100%;
  margin: 0 !important;
  aspect-ratio: auto !important;
  pointer-events: none;
}
.oox-pv-host > .oox-neuron-stage > :not(.oox-neuron-canvas):not(.oox-neuron-fallback) { visibility: hidden !important; }
.oox-pv-host > .oox-pv { z-index: 1; }
/* The real particles are behind — keep only the soft glow of our own field. */
.oox-pv-host .oox-pv-field::before,
.oox-pv-host .oox-pv-field::after { display: none; }
.oox-pv-host .oox-pv-field { opacity: .55; }

.oox-pv {
  --pv-cyan: #25b8ff;
  --pv-violet: #b04dff;
  --pv-teal: #62e6cf;
  --pv-ink: #eef1ff;
  --pv-muted: #8f9ab6;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1.08;
  font-family: 'Onest', ui-sans-serif, system-ui, sans-serif;
  color: var(--pv-ink);
}

/* The "particle" field: two slowly turning dot layers + a breathing core, masked round. */
.oox-pv-field {
  position: absolute;
  inset: -10% -8%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 52%, #72d5ff38, transparent 16%),
    radial-gradient(ellipse at 52% 50%, #8c31cf33, transparent 58%),
    radial-gradient(ellipse at 28% 26%, #0b609138, transparent 52%);
  /* Fade out well inside the box so no edge ever shows (no border, like Home). */
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  animation: oox-pv-breathe 6s ease-in-out infinite alternate;
}
.oox-pv-field::before,
.oox-pv-field::after {
  content: "";
  position: absolute;
  inset: -12%;
  background-image: radial-gradient(circle, #9fdcff 0.9px, transparent 1.4px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0, #0009 32%, transparent 64%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0, #0009 32%, transparent 64%);
  opacity: .5;
  animation: oox-pv-spin 70s linear infinite;
}
.oox-pv-field::after {
  background-image: radial-gradient(circle, #d6a8ff 1.1px, transparent 1.7px);
  background-size: 22px 22px;
  opacity: .4;
  animation-duration: 95s;
  animation-direction: reverse;
}

.oox-pv-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.oox-pv-base { fill: none; stroke: #73caff33; stroke-width: .25; }
.oox-pv-flow {
  fill: none;
  stroke: #90dfff;
  stroke-width: .7;
  stroke-linecap: round;
  stroke-dasharray: 10 300;
  stroke-dashoffset: 10;
  opacity: 0;
  filter: drop-shadow(0 0 3px #44caff);
  animation: oox-pv-packet 3.4s linear var(--d, 0s) infinite;
}
.oox-pv-flow.is-rev { stroke: #c48aff; filter: drop-shadow(0 0 3px #b04dff); animation-name: oox-pv-packet-rev; }

/* Nodes, chips and the hub */
.oox-pv-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 48%;
  padding: 8px 12px 8px 8px;
  border-radius: 14px;
  white-space: nowrap;
  background: linear-gradient(145deg, #131b30f0, #0a0f1cf0);
  box-shadow: 0 0 0 1px #9ab9ff29, 0 14px 30px -12px #000d;
  transform: translate(-50%, -50%);
  transition: box-shadow .5s ease;
  animation: oox-pv-in .75s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * .12s + .15s) both;
}
.oox-pv-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #1983cb, #8045db);
  transition: background .5s ease;
}
.oox-pv-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.oox-pv-text strong { font-size: 12.5px; font-weight: 600; color: var(--pv-ink); overflow: hidden; text-overflow: ellipsis; }
.oox-pv-text small { font-size: 10.5px; color: var(--pv-muted); }
.oox-pv-text small b { color: var(--pv-ink); font-weight: 600; }
.oox-pv-tag {
  position: absolute;
  top: -8px;
  right: -6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, #1983cb, #a34ae5);
  box-shadow: 0 0 14px -2px #25b8ff99;
}
.oox-pv-chip { padding: 6px 12px 6px 6px; border-radius: 999px; }
.oox-pv-chip .oox-pv-icon { width: 22px; height: 22px; border-radius: 50%; font-size: 10px; }
.oox-pv-chip .oox-pv-text strong { font-size: 11.5px; }
.oox-pv-node.is-lit { box-shadow: 0 0 0 1px #62e6cf99, 0 0 26px -4px #62e6cf99, 0 14px 30px -12px #000d; }
.oox-pv-node.is-lit .oox-pv-icon { background: linear-gradient(135deg, #14b8a6, #25b8ff); }
.oox-pv-node--old strong { color: #aeb8cf; text-decoration: line-through; text-decoration-color: #ffffff59; }
.oox-pv-node--old .oox-pv-icon { background: #ffffff14; color: #aeb8cf; }

.oox-pv-hub {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 150px;
  padding: 16px 20px 14px;
  border-radius: 20px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0, #25b8ff26, transparent 70%), linear-gradient(160deg, #151d35f5, #0b0f1df5);
  box-shadow: 0 0 0 1px #8fd8ff47, 0 0 42px -8px #25b8ff66, 0 22px 50px -18px #000;
  transform: translate(-50%, -50%);
  animation: oox-pv-in .85s cubic-bezier(.2, .7, .2, 1) .05s both, oox-pv-glow 3.6s ease-in-out 1s infinite alternate;
}
.oox-pv-hub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, #1983cb, #8045db 70%, #a34ae5);
  box-shadow: 0 0 22px -2px #25b8ff88;
}
.oox-pv-hub-logo { height: 32px; width: auto; max-width: 170px; margin: 2px 0 6px; }
.oox-pv-hub strong { font-size: 13px; font-weight: 600; color: var(--pv-ink); }
.oox-pv-hub small { font-size: 10.5px; color: var(--pv-muted); }
.oox-pv-hub-value {
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.03em;
  background: linear-gradient(105deg, #52ceff, #85a4ff 50%, #c579ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.oox-pv-hub-value.is-pop { animation: oox-pv-pop .6s ease; }

.oox-pv-typing { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 3px; }
.oox-pv-typing i { width: 4px; height: 4px; border-radius: 50%; background: #6dcfff; animation: oox-pv-dot 1.2s ease-in-out infinite; }
.oox-pv-typing i:nth-child(2) { animation-delay: .15s; }
.oox-pv-typing i:nth-child(3) { animation-delay: .3s; }

/* Contact: one address only (no second support email) → that address in the middle. */
.oox-pv--support .oox-pv-single { display: none; }
.oox-pv--support:not(:has(.oox-pv-node--alt)) .oox-pv-node--main { --x: 50% !important; }
.oox-pv--support:not(:has(.oox-pv-node--alt)) .oox-pv-pair { display: none; }
.oox-pv--support:not(:has(.oox-pv-node--alt)) .oox-pv-single { display: inline; }
.oox-pv--support .oox-pv-node--alt { box-shadow: 0 0 0 1px #25b8ff66, 0 0 24px -6px #25b8ff88, 0 14px 30px -12px #000d; }

/* Pricing: the example month */
.oox-pv--total { aspect-ratio: 1.12; }
.oox-pv-receipt {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 3;
  width: min(300px, 62%);
  padding: 18px 18px 14px;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0, #25b8ff1f, transparent 70%), linear-gradient(160deg, #151d35f7, #0b0f1df7);
  box-shadow: 0 0 0 1px #8fd8ff40, 0 0 46px -10px #25b8ff66, 0 24px 50px -18px #000;
  transform: translate(-50%, -50%);
  animation: oox-pv-in .8s cubic-bezier(.2, .7, .2, 1) .1s both;
}
.oox-pv-receipt-head { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 12px; font-weight: 600; color: #c3cbe0; }
.oox-pv-receipt-head i { color: var(--pv-cyan); }
.oox-pv :is(.oox-pv-receipt-head, .oox-pv-chart-head, .oox-pv-card-head) em { margin-left: auto; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #8fb4d6; background: #ffffff0d; }
.oox-pv-receipt ul { margin: 0; padding: 0; list-style: none; }
.oox-pv-receipt li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  color: #c3cbe0;
  border-bottom: 1px solid #ffffff0f;
  animation: oox-pv-line .55s cubic-bezier(.2, .7, .2, 1) calc(.5s + var(--i) * .32s) both;
}
.oox-pv-receipt li b { color: var(--pv-ink); font-weight: 600; }
.oox-pv-receipt-total { display: flex; align-items: baseline; justify-content: space-between; margin: 10px 0 4px; font-size: 12px; color: #9aa6c2; }
.oox-pv-receipt-total b {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.03em;
  background: linear-gradient(105deg, #52ceff, #85a4ff 50%, #c579ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.oox-pv-receipt-note { margin: 0; font-size: 10.5px; color: var(--pv-muted); }

/* Reports: the chart */
.oox-pv--chart { aspect-ratio: 1.05; }
.oox-pv-chart {
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 3;
  width: min(420px, 94%);
  padding: 14px 16px 14px;
  border-radius: 20px;
  background: linear-gradient(160deg, #151d35f2, #0b0f1df2);
  box-shadow: 0 0 0 1px #8fd8ff38, 0 0 46px -12px #25b8ff55, 0 24px 50px -18px #000;
  transform: translate(-50%, -50%);
  animation: oox-pv-in .8s cubic-bezier(.2, .7, .2, 1) .1s both;
}
.oox-pv-chart-head { display: flex; align-items: center; margin: 0 0 10px; font-size: 12px; font-weight: 600; color: #c3cbe0; }
.oox-pv-chart-head span { display: inline-flex; align-items: center; gap: 7px; }
.oox-pv-chart-head i { color: var(--pv-cyan); }
.oox-pv-plot { position: relative; height: 118px; }
.oox-pv-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 8px; }
.oox-pv-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #25b8ffcc, #8045db55);
  transform-origin: bottom;
  animation: oox-pv-bar .7s cubic-bezier(.2, .7, .2, 1) calc(.35s + var(--i) * .08s) both;
}
.oox-pv-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.oox-pv-line path {
  fill: none;
  stroke: #e3b6ff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 3px #b04dff);
  animation: oox-pv-draw 1.6s ease .9s forwards;
}
.oox-pv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.oox-pv-kpis div { padding: 8px 10px; border-radius: 12px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff12; }
.oox-pv-kpis small { display: block; font-size: 10px; color: var(--pv-muted); }
.oox-pv-kpis b { font-size: 15px; font-weight: 700; color: var(--pv-ink); }

/* AI tools: product details → typed draft → chat */
.oox-pv--writer { aspect-ratio: 1.02; }
.oox-pv-card {
  position: absolute;
  z-index: 3;
  padding: 13px 14px;
  border-radius: 16px;
  background: linear-gradient(160deg, #151d35f2, #0b0f1df2);
  box-shadow: 0 0 0 1px #8fd8ff33, 0 20px 44px -18px #000;
  animation: oox-pv-in-plain .8s cubic-bezier(.2, .7, .2, 1) both;
}
.oox-pv-card-head { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; font-size: 11.5px; font-weight: 600; color: #c3cbe0; }
.oox-pv-card-head i { color: var(--pv-cyan); }
.oox-pv-card--input { left: 3%; top: 5%; width: 50%; }
.oox-pv-card--input dl { margin: 0; display: grid; gap: 6px; }
.oox-pv-card--input dl div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #ffffff08; font-size: 11px; }
.oox-pv-card--input dt { color: var(--pv-muted); }
.oox-pv-card--input dd { margin: 0; color: var(--pv-ink); font-weight: 500; }
.oox-pv-card--draft { right: 3%; top: 36%; width: 60%; animation-delay: .25s; box-shadow: 0 0 0 1px #b04dff55, 0 0 40px -12px #b04dff77, 0 20px 44px -18px #000; }
.oox-pv-typed { min-height: 4.6em; margin: 0 0 9px; font-size: 12px; line-height: 1.55; color: var(--pv-ink); }
.oox-pv-typed::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--pv-cyan); animation: oox-pv-caret 1s steps(1) infinite; }
.oox-pv-check { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--pv-teal); }
.oox-pv-chat { position: absolute; z-index: 3; left: 3%; bottom: 4%; width: 58%; display: flex; flex-direction: column; gap: 6px; }
.oox-pv-bubble { margin: 0; max-width: 92%; padding: 8px 11px; border-radius: 14px; font-size: 11.5px; line-height: 1.4; }
.oox-pv-bubble--q { align-self: flex-start; color: #dbe3f6; background: #ffffff12; border-bottom-left-radius: 4px; animation: oox-pv-chat-q 9s ease infinite; }
.oox-pv-bubble--a { position: relative; align-self: flex-end; color: #fff; background: linear-gradient(120deg, #1983cb, #8045db); border-bottom-right-radius: 4px; animation: oox-pv-chat-a 9s ease infinite; }
.oox-pv-bubble--a .oox-pv-typing { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); animation: oox-pv-chat-dots 9s ease infinite; }
.oox-pv-bubble--a .oox-pv-typing i { background: #fff; }
.oox-pv-answer { animation: oox-pv-chat-text 9s ease infinite; }

/* Paused while off screen (pack/extras.js sets .is-on); entrances always run. */
.oox-pv:not(.is-on) .oox-pv-flow,
.oox-pv:not(.is-on) .oox-pv-field,
.oox-pv:not(.is-on) .oox-pv-field::before,
.oox-pv:not(.is-on) .oox-pv-field::after,
.oox-pv:not(.is-on) .oox-pv-typing i,
.oox-pv:not(.is-on) .oox-pv-bubble,
.oox-pv:not(.is-on) .oox-pv-bubble *,
.oox-pv:not(.is-on) .oox-pv-typed::after { animation-play-state: paused; }

@media (max-width: 599px) {
  .oox-pv { aspect-ratio: .98; }
  .oox-pv--total { aspect-ratio: .92; }
  .oox-pv--chart { aspect-ratio: .92; }
  .oox-pv--writer { aspect-ratio: .86; }
  .oox-pv-node { gap: 7px; padding: 6px 9px 6px 6px; border-radius: 12px; }
  .oox-pv-icon { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
  .oox-pv-text strong { font-size: 10.5px; }
  .oox-pv-text small { font-size: 9px; }
  .oox-pv-chip .oox-pv-icon { width: 19px; height: 19px; font-size: 9px; }
  .oox-pv-chip .oox-pv-text strong { font-size: 10px; }
  .oox-pv--support .oox-pv-node--alt .oox-pv-icon,
  .oox-pv--support .oox-pv-node--main .oox-pv-icon { display: none; }
  .oox-pv--support .oox-pv-node--alt,
  .oox-pv--support .oox-pv-node--main { padding-left: 10px; }
  .oox-pv-hub { min-width: 124px; padding: 12px 14px 10px; border-radius: 16px; }
  .oox-pv-hub-icon { width: 36px; height: 36px; font-size: 15px; }
  .oox-pv-hub-logo { height: 24px; }
  .oox-pv-hub strong { font-size: 11.5px; }
  .oox-pv-hub small { font-size: 9.5px; }
  .oox-pv-hub-value { font-size: 24px; }
  .oox-pv-receipt { width: 72%; padding: 14px 14px 12px; }
  .oox-pv-receipt li { font-size: 12px; padding: 6px 0; }
  .oox-pv-receipt-total b { font-size: 23px; }
  .oox-pv-plot { height: 92px; }
  .oox-pv-bars { gap: 5px; }
  .oox-pv-kpis b { font-size: 12.5px; }
  .oox-pv-kpis div { padding: 6px 7px; }
  .oox-pv-card { padding: 10px 11px; }
  .oox-pv-card--input { width: 58%; }
  .oox-pv-card--input dl div { font-size: 10px; padding: 5px 7px; }
  .oox-pv-card--draft { width: 66%; top: 38%; }
  .oox-pv-typed { font-size: 11px; }
  .oox-pv-chat { width: 70%; }
  .oox-pv-bubble { font-size: 10.5px; }
}

@keyframes oox-pv-in { from { opacity: 0; transform: translate(-50%, -38%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes oox-pv-in-plain { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes oox-pv-line { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes oox-pv-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes oox-pv-draw { to { stroke-dashoffset: 0; } }
@keyframes oox-pv-spin { to { transform: rotate(360deg); } }
@keyframes oox-pv-breathe { from { opacity: .8; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@keyframes oox-pv-glow { from { box-shadow: 0 0 0 1px #8fd8ff47, 0 0 34px -10px #25b8ff55, 0 22px 50px -18px #000; } to { box-shadow: 0 0 0 1px #c48aff66, 0 0 54px -6px #8045db88, 0 22px 50px -18px #000; } }
@keyframes oox-pv-pop { 40% { transform: scale(1.14); } }
@keyframes oox-pv-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes oox-pv-caret { 50% { opacity: 0; } }
@keyframes oox-pv-packet { 0% { stroke-dashoffset: 10; opacity: 0; } 6% { opacity: 1; } 52% { stroke-dashoffset: -100; opacity: 1; } 56%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes oox-pv-packet-rev { 0% { stroke-dashoffset: -100; opacity: 0; } 6% { opacity: 1; } 52% { stroke-dashoffset: 10; opacity: 1; } 56%, 100% { stroke-dashoffset: 10; opacity: 0; } }
@keyframes oox-pv-chat-q { 0%, 4% { opacity: 0; transform: translateY(8px); } 9%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oox-pv-chat-a { 0%, 14% { opacity: 0; transform: translateY(8px); } 19%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oox-pv-chat-dots { 0%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes oox-pv-chat-text { 0%, 31% { opacity: 0; } 36%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .oox-pv *, .oox-pv *::before, .oox-pv *::after { animation: none !important; }
  .oox-pv-flow { opacity: 0; }
  .oox-pv-line path { stroke-dashoffset: 0; }
  .oox-pv-bubble--a .oox-pv-typing { display: none; }
}

/* ── 3. Contact page ──────────────────────────────────────────────────────── */
.oox-contact-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 6px; }
.oox-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 14px;
  font-family: 'Onest', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, background-color .35s ease;
}
.oox-contact-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px #25b8ff88; color: #fff; }
.oox-contact-btn:active { transform: translateY(0) scale(.98); }
.oox-contact-btn--ghost { background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff2b; color: #dbe3f6; }
.oox-contact-btn--ghost:hover { background: #25b8ff1a; box-shadow: inset 0 0 0 1px #25b8ff66; }

.oox-contact { padding: 88px 0; font-family: 'Onest', ui-sans-serif, system-ui, sans-serif; }
.oox-contact + .oox-contact { padding-top: 8px; }
.oox-contact-intro { margin: 0 auto 38px; text-align: center; }
.oox-contact-eyebrow { display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6dcfff; }
.oox-contact h2 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1.15; letter-spacing: -.04em; color: #f8f9ff; }
.oox-contact-lead { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: #b8c6dc; }

.oox-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1060px; margin: 0 auto; }

/* Action card */
.oox-card-action {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
  border-radius: 24px;
  background: linear-gradient(160deg, #121a2e, #0a0e1a);
  box-shadow: inset 0 0 0 1px #9ab9ff1f, 0 30px 60px -40px #000;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}
.oox-card-action::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, #25b8ff, #b04dff 55%, transparent 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s ease;
}
/* Doubled class: must beat the scroll reveal's resting state (.oox-reveal.oox-reveal.is-visible). */
.oox-card-action.oox-card-action.is-visible {
  transition: opacity .8s ease, filter .8s ease, transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}
.oox-card-action.oox-card-action:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #9ab9ff1f, 0 30px 60px -30px #25b8ff55; }
.oox-card-action.oox-spotlight-card:hover {
  background-image: radial-gradient(420px circle at var(--oox-mx) var(--oox-my), #25b8ff1c, transparent 50%), linear-gradient(160deg, #121a2e, #0a0e1a);
}
.oox-card-action:hover::before { opacity: 1; }
.oox-card-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, #1983cb, #8045db 70%, #a34ae5);
  box-shadow: 0 12px 30px -10px #25b8ff99;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.oox-card-action:hover .oox-card-action-icon { transform: scale(1.07) rotate(-4deg); }
.oox-card-action h3 { margin: 4px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: #f8f9ff; }
.oox-card-action > p { margin: 0; font-size: 15px; line-height: 1.6; color: #b8c6dc; }

.oox-contact-addresses { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.oox-contact-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border-radius: 14px;
  background: #070a14;
  box-shadow: inset 0 0 0 1px #ffffff14;
}
.oox-contact-mail { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 600; color: #eef1ff; text-decoration: none; }
.oox-contact-mail i { color: #25b8ff; }
.oox-contact-mail span { overflow-wrap: anywhere; }
.oox-contact-mail:hover { color: #6dcfff; }
.oox-contact-mail em { padding: 2px 7px; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(120deg, #1983cb, #a34ae5); }
.oox-copy {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #c3cbe0;
  background: #ffffff0d;
  box-shadow: inset 0 0 0 1px #ffffff1a;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.oox-copy:hover { color: #fff; background: #25b8ff26; }
.oox-copy.is-copied { color: #62e6cf; background: #62e6cf1a; box-shadow: inset 0 0 0 1px #62e6cf55; }
.oox-copy.is-copied i::before { content: "\f00c"; }
.oox-contact-note { margin: 0; font-size: 13px; line-height: 1.6; color: #9aa6c2; }
.oox-contact-note i { color: #6dcfff; margin-right: 4px; }
.oox-contact-note a { color: #6dcfff; }
.oox-contact-write,
.oox-card-action > button.oox-contact-btn { align-self: flex-start; margin-top: auto; }
.oox-contact-points { display: grid; gap: 9px; margin: 2px 0 6px; padding: 0; list-style: none; }
.oox-contact-points li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #c3cbe0; }
.oox-contact-points i { color: #62e6cf; }

/* Topics */
.oox-contact-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.oox-topic {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px 46px;
  border-radius: 20px;
  text-decoration: none;
  background: #0d1322;
  box-shadow: inset 0 0 0 1px #ffffff12;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, background-color .4s ease;
}
.oox-topic i { font-size: 22px; color: #25b8ff; margin-bottom: 6px; }
.oox-topic strong { font-size: 16.5px; font-weight: 600; color: #f8f9ff; }
.oox-topic span { font-size: 13.5px; line-height: 1.55; color: #9aa6c2; }
.oox-topic b { position: absolute; left: 22px; bottom: 16px; font-size: 18px; color: #6dcfff; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.oox-topic:hover { transform: translateY(-3px); background: #111a2e; box-shadow: inset 0 0 0 1px #25b8ff55, 0 20px 40px -24px #25b8ff66; }
.oox-topic:hover b { transform: translateX(6px); }

/* Before you email + FAQ */
.oox-contact-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.oox-contact-checklist { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.oox-contact-checklist li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: #0d1322; box-shadow: inset 0 0 0 1px #ffffff12; }
.oox-contact-checklist li > span {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #1983cb, #8045db);
}
.oox-contact-checklist strong { display: block; font-size: 15.5px; font-weight: 600; color: #f8f9ff; }
.oox-contact-checklist small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.55; color: #9aa6c2; }
.oox-faq { border-bottom: 1px solid #ffffff14; }
.oox-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 16px; font-weight: 500; color: #eef1ff; }
.oox-faq summary:hover { color: #6dcfff; }
.oox-faq .faq-plus {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 12px;
  color: #6dcfff;
  box-shadow: inset 0 0 0 1px #6dcfff55;
  transition: transform .3s ease, background-color .3s ease;
}
.oox-faq[open] .faq-plus { background: #25b8ff22; }
.oox-faq.is-closing .faq-plus { transform: none; }
.oox-faq-body p { margin: 0; padding: 0 0 18px; font-size: 14.5px; line-height: 1.7; color: #b8c6dc; }
.oox-faq-body a { color: #6dcfff; text-decoration: underline; }

@media (max-width: 1199px) {
  .oox-contact-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .oox-contact-split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .oox-contact-hero-actions { justify-content: center; }
}
@media (max-width: 767px) {
  .oox-contact { padding: 60px 0; }
  .oox-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .oox-card-action { padding: 22px; }
  .oox-contact-topics { grid-template-columns: minmax(0, 1fr); }
  .oox-contact-mail { font-size: 14px; }
}

/* ── 4. Card kinds ────────────────────────────────────────────────────────── */
/* Info cards: the pack's own glow follows the pointer (no lift — the reveal keeps them still). */

/* Price cards: no movement under a price; a soft glow instead. */
.oox-card-price.oox-spotlight-card:hover {
  transform: none;
  box-shadow: 0 0 0 1px #25b8ff55, 0 24px 60px -30px #25b8ff77 !important;
}

/* Step cards ("Step 1" …): appear one after another, a line draws along the top. */
.oox-step-card { position: relative; }
.oox-steps .oox-step-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease calc(var(--i) * .18s), transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .18s);
}
.oox-steps.is-visible .oox-step-card { opacity: 1; transform: none; }
.oox-step-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #25b8ff, #b04dff);
  box-shadow: 0 0 12px #25b8ff99;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .18s + .35s);
}
.oox-steps.is-visible .oox-step-card::after { transform: scaleX(1); }
.oox-step-card > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.oox-step-card > span:first-child::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25b8ff;
  box-shadow: 0 0 10px #25b8ff;
}

/* ── 5. Motion tidy-up ────────────────────────────────────────────────────── */
/* No blur on phones (costly on long pages); free the GPU once a block has arrived. */
@media (max-width: 767px) {
  .oox-reveal.oox-reveal,
  .oox-product-visual { filter: none !important; }
  .oox-reveal.oox-reveal { transform: translate3d(0, 18px, 0); }
}
.oox-reveal.oox-reveal.is-visible,
.oox-product-visual.is-visible { will-change: auto; }
/* The header slides in on the first page of a visit only — OoxflowShell's inline script
   turns it off for the rest of the visit. */

/* ── 6. Privacy, Terms, Delete account: the site's dark look ─────────────── */
.oox-legal { color: #c3cbe0; background: #080a12; }
.oox-legal > section {
  background:
    radial-gradient(ellipse 70% 320px at 50% 0, #51157624, transparent 70%),
    radial-gradient(ellipse 50% 260px at 15% 0, #0b609126, transparent 70%);
}
.oox-legal .prose {
  --tw-prose-body: #c3cbe0;
  --tw-prose-headings: #f8f9ff;
  --tw-prose-links: #6dcfff;
  --tw-prose-bold: #eef1ff;
  --tw-prose-counters: #8f9ab6;
  --tw-prose-bullets: #6b7591;
  --tw-prose-hr: #ffffff1a;
  --tw-prose-quotes: #eef1ff;
  --tw-prose-code: #eef1ff;
  --tw-prose-th-borders: #ffffff26;
  --tw-prose-td-borders: #ffffff14;
}
.oox-legal h1 {
  color: #f8f9ff !important;
  font-family: 'Onest', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600 !important;
  letter-spacing: -.04em;
}
.oox-legal h2, .oox-legal h3, .oox-legal strong, .oox-legal dt { color: #eef1ff !important; }
.oox-legal :is(.text-slate-900, .text-gray-900, .text-slate-800, .text-gray-800) { color: #eef1ff !important; }
.oox-legal :is(.text-slate-700, .text-gray-700, .text-slate-600, .text-gray-600) { color: #c3cbe0 !important; }
.oox-legal :is(.text-slate-500, .text-gray-500, .text-slate-400, .text-gray-400) { color: #8f9ab6 !important; }
.oox-legal :is(.bg-white, .bg-slate-50, .bg-gray-50) { background-color: #0d1322 !important; }
.oox-legal :is(.ring-slate-200, .ring-gray-200) { --tw-ring-color: #ffffff17 !important; }
.oox-legal :is(.border-slate-200, .border-gray-200, .border-gray-100) { border-color: #ffffff17 !important; }
.oox-legal .bg-rose-50 { background-color: #f43f5e17 !important; }
.oox-legal .ring-rose-200 { --tw-ring-color: #f43f5e55 !important; }
.oox-legal :is(.text-rose-800, .text-rose-700, .text-rose-600) { color: #fda4af !important; }
.oox-legal :is(.bg-indigo-50, .bg-blue-50) { background-color: #25b8ff14 !important; }
.oox-legal :is(.text-indigo-600, .text-indigo-700, .text-blue-600) { color: #6dcfff !important; }
.oox-legal a:not([class*="bg-gradient"]) { color: #6dcfff; }
.oox-legal a[class*="bg-gradient"] { background-image: linear-gradient(120deg, #1983cb, #8045db 70%, #a34ae5) !important; color: #fff !important; }
.oox-legal table { color: #c3cbe0; }
.oox-legal th, .oox-legal td { border-color: #ffffff17 !important; }