/* openemailfile.com pages: what the boards' inline styles rely on, plus
   phone layouts and dark mode. Dark colour values are appended at build. */
@font-face { font-family: 'Outfit'; font-weight: 500; font-display: swap; src: url(/assets/fonts/outfit-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url(/assets/fonts/outfit-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-display: swap; src: url(/assets/fonts/outfit-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 400; font-display: swap; src: url(/assets/fonts/geist-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 500; font-display: swap; src: url(/assets/fonts/geist-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 600; font-display: swap; src: url(/assets/fonts/geist-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 700; font-display: swap; src: url(/assets/fonts/geist-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url(/assets/fonts/geist-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 500; font-display: swap; src: url(/assets/fonts/geist-mono-latin-500-normal.woff2) format('woff2'); }
/* The Clean design's body type, in the home page's sample PDF. */
@font-face { font-family: 'Source Serif 4'; font-weight: 400; font-display: swap; src: url(/assets/fonts/source-serif-4-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 600; font-display: swap; src: url(/assets/fonts/source-serif-4-latin-600-normal.woff2) format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-FBFBFC, #FBFBFC); }
h1, h2, h3 { font-family: 'Outfit', 'Geist', system-ui, sans-serif; }
a { color: var(--fg-6D3FD1, #6D3FD1); }
a:hover { color: var(--fg-4A2699, #4A2699); }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #C3B0F5; outline-offset: 2px; }
[id] { scroll-margin-top: 16px; }
summary { list-style-position: outside; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

/* The home page: the desktop board, or the phone board under 720px. */
@media (max-width: 720px) { .v-desktop { display: none !important; } }
@media (min-width: 721px) { .v-phone { display: none !important; } }

/* The tool's drop area while a file is dragged over it. */
[data-drop].is-over { border-color: var(--bd-6D3FD1, #6D3FD1) !important; background: var(--bg-F3EEFF, #F3EEFF) !important; }
.oef-hint { margin: 0; font-size: 14px; color: var(--fg-4A5260, #4A5260); }

/* Pages without a phone board of their own: one design that narrows, with
   the phone board's header (logo and menu button). */
.oef-phone-menu { display: none !important; }
@media (max-width: 720px) {
  .oef-flow > header nav[aria-label="Main"], .oef-flow > header > div > div { display: none !important; }
  .oef-flow > header > div { flex-wrap: nowrap !important; }
  .oef-flow .oef-phone-menu { display: flex !important; flex: none; }
  /* Round 11: the home phone board's sizes: titles, the line under them, FAQ questions. */
  .oef-flow h1 { font-size: 32px !important; line-height: 1.08 !important; }
  /* Not the footer's column titles: they stay as on the home page. */
  .oef-flow h2:not(.oef-footer-col h2) { font-size: 23px !important; }
  .oef-flow h1 + p[style*="font-size: 18px"] { font-size: 16.5px !important; }
  .oef-flow summary { font-size: 16.5px !important; }
  .oef-flow > section, .oef-flow > main > section { padding-top: 40px !important; padding-bottom: 48px !important; }
  .oef-flow > header > div { padding: 12px 16px !important; }
  .oef-flow > header > div > a:first-child { font-size: 21px !important; gap: 9px !important; }
  .oef-flow > header > div > a:first-child svg { width: 36px; height: 36px; flex: none; }
  .oef-flow > section > div, .oef-flow > main > div, .oef-flow > main > section > div { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Round 9: the header stays at the top while the page scrolls (the page's
   wrapper clips instead of hiding its overflow, so the header can stick), with
   a soft glass look and a shadow once the page has moved. Jumps to a section
   land below it. */
@supports (overflow: clip) {
  .v-desktop, .oef-flow { overflow: clip !important; }
  .v-phone { overflow-x: clip !important; }
}
html { scroll-padding-top: 92px; }
@media (max-width: 720px) { html { scroll-padding-top: 78px; } }
.v-desktop > header, .v-phone > header, .oef-flow > header { position: sticky !important; top: 0; z-index: 70 !important; transition: box-shadow .3s ease; }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .v-desktop > header, .v-phone > header, .oef-flow > header { background: color-mix(in srgb, var(--bg-FFFFFF, #FFFFFF) 86%, transparent) !important; -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
}
html.is-scrolled .v-desktop > header, html.is-scrolled .v-phone > header, html.is-scrolled .oef-flow > header { box-shadow: 0 12px 32px -20px rgba(28,20,48,.45); }

/* The Tools mega menu: every tool, its icon and what it does. */
.oef-mega-btn { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.oef-mega-chev { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.oef-mega.is-open .oef-mega-chev { transform: rotate(180deg); }
.oef-mega-panel { position: absolute; left: 50%; top: 100%; z-index: 80; width: min(900px, calc(100vw - 32px)); padding-top: 10px; transform: translate(-50%, -6px); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s; }
.oef-mega.is-open .oef-mega-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.oef-mega-in { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 8px; padding: 10px; border-radius: 22px; background: var(--k-card); border: 1px solid var(--k-line); box-shadow: 0 34px 80px -28px rgba(28,20,48,.42), 0 6px 18px rgba(28,20,48,.06); }
.oef-mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 4px; list-style: none; }
.oef-mega-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 14px; text-decoration: none !important; color: var(--k-ink) !important; transition: background-color .2s ease; }
.oef-mega-item:hover, .oef-mega-item:focus-visible { background: var(--k-soft); outline: none; }
.oef-mega-item b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.oef-mega-item small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--k-muted); }
.oef-mega-ico { flex: none; width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 11px; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.oef-mega-item:hover .oef-mega-ico, .oef-menu-tools a:active .oef-mega-ico { transform: translateY(-2px) rotate(-6deg); }
:root[data-theme="dark"] .oef-mega-ico { color: color-mix(in srgb, var(--c) 55%, #FFFFFF); background: color-mix(in srgb, var(--c) 24%, transparent); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.oef-mega-side { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border-radius: 16px; background: linear-gradient(155deg, #F3EEFF, #FFFFFF 70%); border: 1px solid var(--k-line); }
.oef-mega-side::after { content: ""; position: absolute; right: -60px; bottom: -70px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(138,92,240,.22), transparent 70%); pointer-events: none; }
:root[data-theme="dark"] .oef-mega-side { background: linear-gradient(155deg, #221A3A, #151922 70%); }
.oef-mega-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k-accent); }
.oef-mega-side p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--k-text); }
.oef-mega-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: #6D3FD1; color: #FFFFFF !important; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: gap .2s ease, transform .2s ease; }
.oef-mega-cta:hover { gap: 12px; transform: translateY(-1px); }
.oef-mega-all { font-size: 13.5px; font-weight: 600; color: var(--k-accent) !important; }

/* The phone menu: the tools first, each with its icon, then the other links. */
.oef-menu { position: absolute; z-index: 75; top: 100%; left: 10px; right: 10px; margin-top: 8px; padding: 14px 12px 12px; border-radius: 22px; background: var(--k-card); border: 1px solid var(--k-line); box-shadow: 0 32px 64px -22px rgba(28,20,48,.45); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }
.oef-menu[hidden] { display: none; }
.oef-menu-kicker { margin: 2px 8px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k-muted); }
.oef-menu-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0 0 8px; padding: 0; list-style: none; }
.oef-menu-tools a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--k-ink) !important; text-decoration: none; }
.oef-menu-tools a:active, .oef-menu-links a:active { background: var(--k-soft); }
.oef-menu-tools .oef-mega-ico { width: 34px; height: 34px; border-radius: 10px; }
.oef-menu-links { margin: 0; padding: 6px 0 0; border-top: 1px solid var(--k-line); list-style: none; }
.oef-menu-links a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 10px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--k-ink) !important; text-decoration: none; }
.oef-menu-links svg { color: var(--k-muted); }
.oef-menu-cta { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 999px; background: #6D3FD1; color: #FFFFFF !important; font-size: 16px; font-weight: 600; text-decoration: none; }

/* Motion (tier 1 refresh, approved 31 Oct 2026). With scripts off nothing is
   hidden: boot.js adds .js before the first paint. */
.js .oef-reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.js .oef-reveal.is-in { opacity: 1; transform: none; }
/* Round 3: headings rise in word by word; icons draw themselves; the steps
   connect; the hero settles after load; the stats count up (boot.js). */
.oef-w { display: inline-block; }
.js .oef-reveal .oef-w { opacity: 0; transform: translateY(.45em); }
.js .oef-reveal.is-in .oef-w { animation: oef-rise .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(40ms * var(--i, 0)); }
@keyframes oef-rise { to { opacity: 1; transform: none; } }
.js .oef-hero-in { opacity: 0; animation: oef-rise .6s ease forwards; animation-delay: calc(.15s + .12s * var(--i, 0)); }
.oef-sweep { background: linear-gradient(90deg, currentColor 0 42%, #8A5CF0 50%, currentColor 58% 100%); background-size: 320% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: oef-sweep 1.5s ease forwards; }
@keyframes oef-sweep { to { background-position: 0 0; } }
.oef-ico { transition: transform .2s ease; }
.oef-btn:hover .oef-ico, .oef-card:hover .oef-ico, [data-tab]:hover .oef-ico { transform: scale(1.08); }
.js .oef-reveal .oef-ico :is(path, circle, rect, line, polyline) { stroke-dasharray: 80; stroke-dashoffset: 80; }
.js .oef-reveal.is-in .oef-ico :is(path, circle, rect, line, polyline) { animation: oef-draw .9s ease .1s forwards; }
@keyframes oef-draw { to { stroke-dashoffset: 0; } }
.js .oef-reveal .oef-steps-fill { transform: scaleX(0) scaleY(0); }
.js .oef-reveal.is-in .oef-steps-fill { transition: transform 1.2s ease .2s; transform: none; }
.js .oef-reveal .oef-step > span:first-child { opacity: 0; transform: scale(.8); }
.js .oef-reveal.is-in .oef-step > span:first-child { transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.15s * var(--i, 0)); opacity: 1; transform: none; }
.js .oef-reveal .oef-step > span:first-child > span { transform: scale(0); }
.js .oef-reveal.is-in .oef-step > span:first-child > span { transition: transform .3s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.35s + .15s * var(--i, 0)); transform: none; }
.oef-lock-closed { position: absolute; }
.js .oef-reveal .oef-ico-lock-open { opacity: 0; }
.js .oef-reveal.is-in .oef-ico-lock-open { opacity: 1; transition: opacity .3s ease 1.3s; }
.js .oef-reveal.is-in .oef-lock-closed { opacity: 0; transition: opacity .3s ease 1.3s; }
.oef-bob { animation: oef-bob 2.4s ease-in-out infinite; }
@keyframes oef-bob { 50% { transform: translateY(-4px); } }
.oef-qr, .oef-pulse { animation: oef-pulse 2.6s ease-in-out infinite; }
@keyframes oef-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(109,63,209,.28); } 60% { box-shadow: 0 0 0 10px rgba(109,63,209,0); } }
.oef-card { transition: transform .2s ease, box-shadow .2s ease; }
.oef-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(28,20,48,.12); }
.oef-float { animation: oef-float 6s ease-in-out infinite; }
@keyframes oef-float { 50% { transform: translateY(-6px); } }
@keyframes oef-fade { from { opacity: 0; } }
.oef-chip-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #C3B0F5; }
.oef-chip-bar.is-running { animation: oef-bar 7s linear infinite; }
@keyframes oef-bar { from { width: 0; } to { width: 100%; } }
/* "What it does": boot.js drifts the facts left and brings in the next ones.
   The pause button shows only when the strip can move: with the script, and
   without reduced motion. */
.oef-ticker { display: flex; gap: 10px; width: max-content; }
[data-ticker-pause] { transition: border-color .2s, transform .2s; }
[data-ticker-pause]:hover { border-color: #C3B0F5 !important; transform: scale(1.06); }
[data-ticker-pause]:focus-visible { outline: 2px solid #6D3FD1; outline-offset: 2px; }
[data-ticker-pause][aria-pressed="true"] [data-icon="pause"] { display: none; }
[data-ticker-pause][aria-pressed="true"] [data-icon="play"] { display: block !important; }
html:not(.js) [data-ticker-pause] { display: none !important; }
@media (prefers-reduced-motion: reduce) { [data-ticker-pause] { display: none !important; } }
/* Round 6: the headline's two words, a gradient that drifts and an underline that draws itself. */
.oef-key { position: relative; display: inline-block; white-space: nowrap; padding-bottom: .04em; background: linear-gradient(100deg, #6D3FD1 0%, #B04FD8 45%, #6D3FD1 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: oef-drift 5s ease-in-out 1.6s both; }
.oef-key[data-design="original"] { background-image: linear-gradient(100deg, #2B3F9E 0%, #6D3FD1 50%, #2B3F9E 100%); }
@keyframes oef-drift { 50% { background-position: 100% 0; } }
.oef-swash { position: absolute; left: -2%; bottom: -.06em; width: 104%; height: .2em; overflow: visible; pointer-events: none; }
.oef-swash path { fill: none; stroke: #C3B0F5; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .oef-swash path { stroke-dashoffset: 1; animation: oef-swash 1.2s cubic-bezier(.65,0,.35,1) .45s forwards; }
.js .oef-key[data-design="original"] .oef-swash path { animation-delay: .8s; }
@keyframes oef-swash { to { stroke-dashoffset: 0; } }
:root[data-theme="dark"] .oef-key { background-image: linear-gradient(100deg, #C3B0F5, #F0A8E8 45%, #C3B0F5 90%); }

/* Round 6: the product demo (tools/pages/demo.mjs, site/pages/demo.js). The
   screen stays light in both themes, like the app in a real window. */
.oef-demo { margin: 26px 0 64px; width: 100%; max-width: 1060px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: left; perspective: 1800px; }
.oef-demo-stage { width: 100%; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; }
.js .oef-demo-stage { opacity: 0; transform: rotateX(16deg) translateY(36px) scale(.95); transition: opacity 1s ease, transform 1.3s cubic-bezier(.2,.8,.2,1); }
.js .oef-demo.is-in .oef-demo-stage { opacity: 1; transform: none; }
.js .oef-demo.oef-reveal { opacity: 1; transform: none; transition: none; }
.oef-device { position: relative; width: 100%; border-radius: 16px; box-shadow: 0 0 0 1px rgba(28,20,48,.08), 0 44px 90px -30px rgba(28,20,48,.4), 0 18px 36px -18px rgba(28,20,48,.22); }
.oef-screen { content-visibility: auto; position: relative; overflow: hidden; isolation: isolate; border-radius: 16px; background: #F4F6F9; aspect-ratio: 16 / 10; min-height: 520px; display: flex; flex-direction: column; color: #1C1430; font-family: 'Geist', system-ui, sans-serif; }
.oef-glare { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(560px circle at var(--gx, 20%) var(--gy, 0%), rgba(255,255,255,.28), transparent 46%), linear-gradient(118deg, rgba(255,255,255,.16) 0 16%, transparent 30%); mix-blend-mode: soft-light; }
.oef-winbar { flex: none; display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: #FAFBFD; border-bottom: 1px solid #E6E8EE; }
.oef-winbar i { width: 11px; height: 11px; border-radius: 50%; background: #FF6159; }
.oef-winbar i:nth-child(2) { background: #FFBD2E; }
.oef-winbar i:nth-child(3) { background: #28C941; }
.oef-winbar span { margin: 0 auto; transform: translateX(-24px); display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42%; font-size: 12px; color: #5A6270; background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 8px; padding: 4px 14px; }
.oef-app { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; font-size: 13px; background: radial-gradient(120% 60% at 50% 0%, #FFFFFF, #F4F6F9 70%); }
.oef-tabs, .oef-seg { position: relative; display: flex; gap: 2px; padding: 4px; background: #ECEEF3; border-radius: 12px; }
.oef-tabs { align-self: center; }
.oef-tabs button, .oef-seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 500; color: #4A5260; background: none; border: 0; border-radius: 9px; padding: 7px 12px; white-space: nowrap; cursor: pointer; transition: color .25s ease; }
.oef-tabs button:hover, .oef-seg button:hover { color: #1C1430; }
.oef-tabs [aria-selected="true"], .oef-seg [aria-pressed="true"] { color: #1C1430; font-weight: 600; }
.oef-tabs-thumb, .oef-seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); background: #FFFFFF; border-radius: 9px; box-shadow: 0 1px 2px rgba(28,20,48,.08), 0 6px 14px rgba(28,20,48,.1); transition: transform .6s cubic-bezier(.34,1.56,.64,1), width .6s cubic-bezier(.34,1.56,.64,1); }
.oef-seg { padding: 3px; border-radius: 10px; background: #F1F3F6; }
.oef-seg button { font-size: 12px; padding: 5px 10px; border-radius: 7px; }
.oef-seg-thumb { top: 3px; bottom: 3px; border-radius: 7px; }
.oef-filechip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 7px; background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 10px; font-size: 12.5px; }
.oef-filechip small { color: #6B7385; }
.oef-free { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #0F5C3A; background: #E7F5EE; border-radius: 999px; padding: 3px 8px 3px 6px; }
.oef-pane { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(28,20,48,.04); }
.oef-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #EEF0F4; }
.oef-pagecount { font-weight: 600; font-size: 13px; }
.oef-pagecount b { font-variant-numeric: tabular-nums; }
.oef-segs { display: flex; gap: 6px; }
.oef-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 254px; }
.oef-doc { position: relative; overflow-y: auto; background: linear-gradient(#ECEEF3, #E2E5EC); padding: 18px 22px 22px; scrollbar-width: thin; scrollbar-color: #C3C7D2 transparent; outline: none; }
.oef-doc:focus-visible { box-shadow: inset 0 0 0 3px #C3B0F5; }
.oef-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.oef-page { position: relative; margin: 0; width: 100%; max-width: 560px; background: #FFFFFF; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 2px rgba(14,17,22,.08), 0 12px 32px rgba(28,20,48,.14); }
.oef-page img { display: block; width: 100%; height: 100%; }
.oef-page span { position: absolute; right: 8px; bottom: 8px; font-size: 10.5px; font-weight: 600; color: #FFFFFF; background: rgba(28,20,48,.6); border-radius: 999px; padding: 2px 8px; opacity: 0; transition: opacity .2s; }
.oef-page:hover span { opacity: 1; }
.oef-hint { position: sticky; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; width: fit-content; margin: 14px auto 0; padding: 7px 13px; font-size: 12px; font-weight: 600; color: #FFFFFF; background: rgba(28,20,48,.8); border-radius: 999px; box-shadow: 0 8px 20px rgba(28,20,48,.25); animation: oef-bob 2.4s ease-in-out infinite; transition: opacity .4s; }
.oef-demo.is-scrolled .oef-hint { opacity: 0; animation: none; pointer-events: none; }
.oef-demo.is-saying .oef-hint { opacity: 0; transition: opacity .2s ease; }
.oef-side { display: flex; flex-direction: column; gap: 11px; padding: 14px; border-left: 1px solid #EEF0F4; overflow-y: auto; }
.oef-side-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.oef-side-head b { font-family: 'Outfit', 'Geist', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.oef-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; line-height: 1.4; color: #3A4250; }
.oef-facts li { display: flex; gap: 7px; align-items: flex-start; }
.oef-facts svg { flex: none; margin-top: 2px; color: #0F7A4D; }
.oef-demo .oef-dl { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 12px; background: #6D3FD1; color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 13.5px; box-shadow: 0 8px 20px rgba(109,63,209,.35); transition: transform .15s ease, box-shadow .15s ease; }
.oef-demo .oef-dl:hover { color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(109,63,209,.42); }
.oef-dl-fill { position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #4A2699, #9B6BF5 50%, #4A2699); background-size: 200% 100%; }
.oef-dl.is-busy .oef-dl-fill { animation: oef-drift 1.2s linear infinite; }
.oef-phone-btn, .oef-zip { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; font: inherit; font-size: 13px; font-weight: 600; color: #1C1430; background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 12px; cursor: pointer; transition: background .2s, transform .15s; }
.oef-phone-btn:hover { background: #F7F3FF; }
.oef-zip { width: 100%; color: #FFFFFF; background: #1C1430; border: 0; }
.oef-qrbox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: #F7F3FF; border-radius: 12px; text-align: center; }
.oef-qrcode { width: 118px; }
.oef-qrcode svg { display: block; width: 100%; height: auto; }
.oef-qrbox small { font-size: 11px; line-height: 1.35; color: #4A5260; }
.oef-mail, .oef-files { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.oef-label { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; color: #6B7385; }
.oef-mail h4, .oef-files h4 { margin: 0 0 12px; font-family: 'Outfit', 'Geist', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.oef-from { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 12px; color: #6B7385; }
.oef-from b { font-size: 13.5px; color: #1C1430; }
.oef-from small { display: block; margin-top: 2px; font-size: 11.5px; }
.oef-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #FFFFFF; background: #8E2C6E; }
.oef-mail-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #EEF0F4; }
.oef-att { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; padding: 4px 9px 4px 5px; font-size: 12px; border: 1px solid #E4E7EC; border-radius: 9px; }
.oef-mini { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; color: #1C1430; background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 9px; padding: 5px 10px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.oef-mini:hover { background: #F7F3FF; }
.oef-mini:active, .oef-zip:active, .oef-phone-btn:active { transform: scale(.96); }
.oef-mini.is-done, .oef-zip.is-done { color: #0F5C3A; background: #E7F5EE; border-color: #CDEBDC; }
.oef-mail-body { font-family: Verdana, 'Segoe UI', sans-serif; font-size: 12.5px; line-height: 1.55; color: #1F3A63; }
.oef-mail-table { border-collapse: collapse; margin: 2px 0 12px; font-size: 11.5px; }
.oef-mail-table th { background: #1F4E8C; color: #FFFFFF; text-align: left; padding: 4px 10px; border: 1px solid #1F4E8C; }
.oef-mail-table td { padding: 4px 10px; border: 1px solid #C9D6E8; }
.oef-mail-table .ok { background: #E3F4EA; color: #0F6E3A; font-weight: 700; }
.oef-mail-body p { margin: 0 0 10px; }
.oef-sig { font-size: 12px; color: #4A5260; }
.oef-sig b { font-size: 13.5px; color: #1F4E8C; }
.oef-mail-body img { display: block; margin: 2px 0 14px; }
.oef-quoted { padding: 7px 10px; font-size: 12px; color: #6B7385; background: #FAF8FF; border-left: 3px solid #E2D8FA; border-radius: 0 8px 8px 0; }
.oef-files ul { margin: 0 0 12px; padding: 0; list-style: none; }
.oef-files li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F0F1F5; }
.oef-row-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.oef-row-name b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oef-row-name small { font-size: 11.5px; color: #6B7385; }
.oef-check { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 12.5px; cursor: pointer; }
.oef-check input { accent-color: #6D3FD1; }
.oef-toast { position: absolute; left: 50%; bottom: 18px; z-index: 6; width: max-content; max-width: calc(100% - 32px); transform: translate(-50%, 24px); opacity: 0; pointer-events: none; padding: 9px 14px; font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: center; color: #FFFFFF; background: rgba(28,20,48,.92); border-radius: 12px; box-shadow: 0 12px 30px rgba(28,20,48,.3); transition: opacity .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.oef-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.oef-dl-phone { flex: none; }
/* A switch of toggles: the new pages spread out from where you clicked. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(oef-doc) { animation: oef-vt-out .5s ease both; }
::view-transition-new(oef-doc) { animation: oef-vt-in .85s cubic-bezier(.2,.8,.2,1) both; }
@keyframes oef-vt-in { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 0)); filter: blur(8px) saturate(1.5); } to { clip-path: circle(150% at var(--vx, 50%) var(--vy, 0)); filter: none; } }
@keyframes oef-vt-out { to { opacity: .5; filter: blur(3px); } }
@media (max-width: 1040px) { .oef-body { grid-template-columns: minmax(0, 1fr) 214px; } .oef-facts { display: none; } .oef-bar { justify-content: center; } }
/* The phone version: a phone, the side panel's button at the bottom. */
.oef-demo.is-phone { max-width: 330px; margin: 8px auto 0; }
.oef-demo.is-phone .oef-device { padding: 9px; border-radius: 50px; background: linear-gradient(160deg, #332C44, #0E0B16 55%); }
.oef-demo.is-phone .oef-screen { aspect-ratio: auto; height: 660px; min-height: 0; border-radius: 41px; }
.oef-island { flex: none; width: 96px; height: 27px; margin: 9px auto 2px; border-radius: 999px; background: #0E0B16; }
.oef-demo.is-phone .oef-app { padding: 6px 10px 12px; gap: 8px; }
/* Round 9: nothing in the phone demo scrolls sideways. The tabs are a four-part
   switch, icon above name; the PDF switches are three labelled rows. */
.oef-demo.is-phone .oef-tabs { align-self: stretch; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oef-demo.is-phone .oef-tabs button { flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px; font-size: 10.5px; line-height: 1.1; text-align: center; }
.oef-demo.is-phone .oef-filechip b { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oef-demo.is-phone .oef-bar { padding: 8px; flex-direction: column; align-items: stretch; gap: 7px; }
.oef-demo.is-phone .oef-pagecount { font-size: 12px; }
.oef-demo.is-phone .oef-segs { display: grid; gap: 5px; }
.oef-demo.is-phone .oef-seg { display: grid; grid-template-columns: 54px 1fr 1fr; align-items: center; }
.oef-seg-name { padding-left: 7px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #6B7385; }
.oef-demo.is-phone .oef-seg button { justify-content: center; padding: 6px 4px; font-size: 11.5px; }
.oef-demo.is-phone .oef-body { grid-template-columns: 1fr; }
.oef-demo.is-phone .oef-side { display: none; }
.oef-demo.is-phone .oef-doc { padding: 12px 12px 16px; }
.oef-demo.is-phone .oef-mail, .oef-demo.is-phone .oef-files { padding: 12px 14px; }
.oef-demo.is-phone .oef-mail-tools .oef-att { margin-right: 0; flex-basis: 100%; }

/* Round 6: who it's for, a row of cards that scrolls sideways (boot.js). */
/* Edge to edge: the page's root clips anything wider than the window. */
.oef-uses-track { display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 12px max(24px, calc(50vw - 200px)) 64px; margin: -12px calc(50% - 50vw) -56px; cursor: grab; outline: none; }
.oef-uses-track::-webkit-scrollbar { display: none; }
.oef-uses-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.oef-uses-track:focus-visible { box-shadow: inset 0 0 0 3px #C3B0F5; border-radius: 26px; }
/* Off-screen cards aren't laid out; their stand-in height is a real card's, so nothing moves when they are. */
.oef-uses-track > [data-use-card] { content-visibility: auto; contain-intrinsic-size: auto 580px; flex: 0 0 min(400px, calc(100% - 64px)); scroll-snap-align: center; transform: scale(calc(1 - var(--a, 0) * .06)); opacity: calc(1 - var(--a, 0) * .5); }
.oef-uses-track [data-use-card] .oef-float { translate: calc(var(--d, 0) * -70px) 0; }
.oef-uses-nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 16px; }
.oef-uses-arrow { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--fg-1C1430, #1C1430); background: var(--bg-FFFFFF, #FFFFFF); border: 1px solid var(--bd-E7E3F2, #E7E3F2); border-radius: 50%; box-shadow: 0 6px 16px rgba(28,20,48,.08); cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.oef-uses-arrow:hover { transform: scale(1.08); box-shadow: 0 10px 22px rgba(28,20,48,.14); }
.oef-uses-arrow:active { transform: scale(.94); }
.oef-uses-dots { display: flex; gap: 6px; }
.oef-uses-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--bd-E7E3F2, #D9D3EA); transition: width .45s cubic-bezier(.34,1.56,.64,1), background .3s; }
.oef-uses-dots i.is-on { width: 24px; background: #6D3FD1; }
@media (max-width: 720px) {
  .oef-uses-track { gap: 12px; padding: 8px 20px 28px; margin: -8px -20px -24px; }
  .oef-uses-track > [data-use-card] { flex-basis: calc(100% - 26px); contain-intrinsic-size: auto 541px; }
}
/* Round 7: the shared kit (tools/pages/kit.mjs) and the home page's new
   parts. The kit has its own colours for light and dark, so it doesn't
   depend on a board's palette; a theme chosen with the switch wins. */
:root { --k-ink: #1C1430; --k-text: #3A4250; --k-muted: #5A6270; --k-line: #E7E3F2; --k-card: #FFFFFF; --k-soft: #F6F2FD; --k-accent: #6D3FD1; --k-tint: #F3EEFF; --k-glass: rgba(255,255,255,.74); --k-shadow: 0 1px 2px rgba(28,20,48,.05), 0 16px 36px -14px rgba(28,20,48,.16); }
:root[data-theme="dark"] { --k-ink: #F1EEFA; --k-text: #CBC6DA; --k-muted: #A39DB6; --k-line: #2A2B3A; --k-card: #151922; --k-soft: #171427; --k-accent: #B49BF7; --k-tint: #221A3A; --k-glass: rgba(21,25,34,.74); --k-shadow: 0 1px 2px rgba(0,0,0,.35), 0 16px 36px -14px rgba(0,0,0,.6); color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* The light/dark switch: a moon in light mode, a sun in dark. */
.oef-theme { position: relative; width: 42px; height: 42px; flex: none; display: inline-grid; place-items: center; padding: 0; border-radius: 12px; border: 1px solid var(--k-line); background: var(--k-card); color: var(--k-ink); cursor: pointer; transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .2s; }
.oef-theme:hover { transform: rotate(-14deg) scale(1.06); border-color: var(--k-accent); }
.oef-theme svg { grid-area: 1 / 1; transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; }
.oef-theme .oef-i-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
:root[data-theme="dark"] .oef-theme .oef-i-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .oef-theme .oef-i-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
header > .oef-theme, header .oef-theme-phone { margin-left: auto; margin-right: 8px; }
.oef-theme-phone { display: none !important; }
@media (max-width: 720px) { .oef-flow .oef-theme-phone { display: inline-grid !important; } }
html.oef-theme-vt::view-transition-old(root) { animation: none; }
html.oef-theme-vt::view-transition-new(root) { animation: oef-theme-in .7s cubic-bezier(.2,.8,.2,1); }
@keyframes oef-theme-in { from { clip-path: circle(0 at var(--tx, 50%) var(--ty, 0)); } to { clip-path: circle(150vmax at var(--tx, 50%) var(--ty, 0)); } }

/* The footer: the same deep violet in both themes. */
.oef-footer { position: relative; overflow: hidden; isolation: isolate; margin-top: 72px; background: #0E0B16; color: #C9C4D8; font-size: 14.5px; line-height: 1.5; border: 0 !important; padding: 0 !important; }
.oef-footer-glow { position: absolute; left: -10%; right: -10%; top: -260px; height: 520px; z-index: -1; pointer-events: none; background: radial-gradient(45% 55% at 25% 50%, rgba(138,92,240,.32), transparent 70%), radial-gradient(35% 45% at 80% 60%, rgba(52,195,143,.14), transparent 70%); }
.oef-footer-in { max-width: 1200px; margin: 0 auto; padding: 64px 24px 28px; }
.oef-footer-top { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 36px; }
.oef-footer-logo { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF !important; text-decoration: none; font-family: 'Outfit', 'Geist', sans-serif; font-size: 23px; font-weight: 600; letter-spacing: -.03em; }
.oef-footer-logo svg { width: 38px; height: 38px; }
.oef-footer-logo b { color: #A98BF5; font-weight: 600; }
.oef-footer-brand p { margin: 14px 0 16px; max-width: 360px; color: #A39DB5; }
.oef-footer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.oef-footer-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; font-size: 12.5px; color: #DCD6EE; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; }
.oef-footer-chips svg { color: #A98BF5; }
.oef-footer-cta { margin-top: 20px; display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 20px; border-radius: 999px; background: #FFFFFF; color: #2B1A5C !important; font-weight: 700; text-decoration: none; transition: transform .2s, gap .2s; }
.oef-footer-cta:hover { transform: translateY(-2px); gap: 13px; }
/* Round 9: how to reach us. */
.oef-footer-contact { display: flex; align-items: flex-start; gap: 12px; max-width: 380px; margin-top: 22px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.oef-footer-contact-ico { flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 11px; background: rgba(169,139,245,.16); color: #C3B0F5; }
.oef-footer-contact b { display: block; color: #FFFFFF; font-weight: 600; }
.oef-footer-brand .oef-footer-contact p { margin: 2px 0 6px; font-size: 13.5px; color: #A39DB5; }
.oef-footer-contact a { color: #C3B0F5 !important; font-weight: 600; text-decoration: none; }
.oef-footer-contact a:hover { color: #FFFFFF !important; text-decoration: underline; }
.oef-footer-col h2 { margin: 6px 0 14px; font-family: 'Geist', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #FFFFFF; }
.oef-footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.oef-footer-col a, .oef-footer-bottom a { color: #A39DB5 !important; text-decoration: none; transition: color .2s; }
.oef-footer-col a:hover, .oef-footer-bottom a:hover { color: #FFFFFF !important; }
.oef-footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; font-size: 13px; color: #8E88A3; }
.oef-footer-bottom nav { display: flex; gap: 20px; }
.oef-footer-theme { display: inline-flex; align-items: center; gap: 10px; }
.oef-footer .oef-theme { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #FFFFFF; }
@media (max-width: 960px) { .oef-footer-top { grid-template-columns: 1fr 1fr; } .oef-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .oef-footer-in { padding: 48px 20px 24px; } .oef-footer-top { gap: 28px 18px; } }
/* The footer and the closing band come after every link target on a page, so
   they are laid out only as they come near the screen; the space kept for them
   is their real height, so nothing moves when they are. */
.oef-footer { content-visibility: auto; contain-intrinsic-size: auto 699px; }
.oef-cta { content-visibility: auto; contain-intrinsic-size: auto 314px; }
@media (max-width: 960px) { .oef-footer { contain-intrinsic-size: auto 1090px; } .oef-cta { contain-intrinsic-size: auto 340px; } }
@media (max-width: 720px) { .oef-footer { contain-intrinsic-size: auto 1147px; } .oef-cta { contain-intrinsic-size: auto 395px; } }

/* Inner pages: a kicker, a soft glow behind the top, the tool in a glowing card. */
.oef-inner { overflow: clip !important; }
.oef-kicker { margin: 0 0 4px !important; width: fit-content; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--k-tint); border: 1px solid color-mix(in srgb, var(--k-accent) 22%, transparent); color: var(--k-accent); font-size: 13px; font-weight: 600; }
.oef-aurora { position: absolute; left: 0; right: 0; top: 0; height: 780px; overflow: hidden; z-index: -1; pointer-events: none; }
/* Soft light from radial gradients: a blur filter on shapes this big costs a phone hundreds of milliseconds to paint. */
.oef-aurora i { position: absolute; width: 760px; height: 760px; border-radius: 50%; opacity: .6; will-change: transform; animation: oef-aurora 24s ease-in-out infinite alternate; }
.oef-aurora i:nth-child(1) { left: -280px; top: -340px; background: radial-gradient(closest-side, #D9C9FF, rgba(217,201,255,0)); }
.oef-aurora i:nth-child(2) { right: -300px; top: -260px; background: radial-gradient(closest-side, #F6D2F0, rgba(246,210,240,0)); animation-duration: 28s; animation-direction: alternate-reverse; }
.oef-aurora i:nth-child(3) { left: 36%; top: 60px; width: 580px; height: 580px; background: radial-gradient(closest-side, #CFE9FF, rgba(207,233,255,0)); opacity: .45; animation-duration: 32s; }
@keyframes oef-aurora { 50% { transform: translate(60px, 40px) scale(1.08); } 100% { transform: translate(-40px, 70px) scale(.94); } }
:root[data-theme="dark"] .oef-aurora i { opacity: .16; }
@media (max-width: 720px) { .oef-aurora i { width: 440px; height: 440px; } .oef-aurora i:nth-child(3) { width: 360px; height: 360px; } }
.oef-toolcard { position: relative; box-shadow: 0 0 0 1px var(--k-line), 0 30px 70px -30px rgba(109,63,209,.45), 0 12px 28px -18px rgba(28,20,48,.25) !important; }
.oef-toolcard::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(138,92,240,.65), rgba(240,168,232,.4) 40%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.oef-tile { width: 42px; height: 42px; flex: none; display: inline-grid; place-items: center; border-radius: 13px; color: #FFFFFF; background: linear-gradient(135deg, #8A5CF0, #6D3FD1); box-shadow: 0 8px 18px -6px rgba(109,63,209,.55); }
.oef-trust { gap: 14px !important; }
.oef-trust > * { position: relative; padding: 16px 16px 16px 70px !important; border: 1px solid var(--k-line); border-radius: 18px; background: var(--k-glass); box-shadow: var(--k-shadow); transition: transform .25s ease, box-shadow .25s ease; }
.oef-trust > *:hover { transform: translateY(-3px); }
.oef-trust .oef-tile { position: absolute; left: 14px; top: 16px; }
/* On phones the three points stack: one card each, the icon beside the words. */
@media (max-width: 720px) {
  .oef-trust { grid-template-columns: 1fr !important; gap: 10px !important; padding-top: 18px !important; }
  .oef-trust > * { padding: 14px 16px 14px 68px !important; min-height: 74px; justify-content: center; }
  .oef-trust .oef-tile { top: 50%; left: 14px; margin-top: -21px; }
}

/* Help articles: headings with an icon (policies: a number), step cards, check lists, tiles, link pills. */
.oef-h2 { position: relative; padding-left: 52px !important; }
.oef-h2-ico { position: absolute; left: 0; top: .05em; width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 12px; background: var(--k-tint); color: var(--k-accent); border: 1px solid color-mix(in srgb, var(--k-accent) 18%, transparent); }
.oef-h2-n { font: 600 14px/1 'Outfit', sans-serif; letter-spacing: -.01em; }
.oef-steplist { list-style: none !important; padding: 0 !important; margin: 6px 0 0 !important; counter-reset: oef-step; display: flex !important; flex-direction: column; gap: 12px !important; }
.oef-steplist > li { position: relative; counter-increment: oef-step; padding: 15px 18px 15px 66px; border: 1px solid var(--k-line); border-radius: 16px; background: var(--k-card); box-shadow: var(--k-shadow); }
.oef-steplist > li::before { content: counter(oef-step); position: absolute; left: 16px; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 15px/1 'Outfit', sans-serif; color: #FFFFFF; background: linear-gradient(135deg, #8A5CF0, #6D3FD1); box-shadow: 0 6px 14px -4px rgba(109,63,209,.6); }
.oef-steplist > li:not(:last-child)::after { content: ""; position: absolute; left: 32px; top: 48px; bottom: -14px; width: 2px; background: linear-gradient(#C3B0F5, transparent); }
.oef-checklist { list-style: none !important; padding: 0 !important; }
.oef-checklist > li { display: flex; gap: 12px; align-items: flex-start; }
.oef-check { width: 22px; height: 22px; flex: none; margin-top: 3px; display: inline-grid; place-items: center; border-radius: 50%; color: #FFFFFF; background: #0F7A4D; }
.oef-ktiles { gap: 14px !important; }
.oef-ktile { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; border: 1px solid var(--k-line) !important; border-radius: 16px; background: var(--k-card); padding: 18px !important; }
.oef-ktile:hover { transform: translateY(-4px); box-shadow: var(--k-shadow); }
.oef-ktile > .oef-tile { margin-bottom: 12px; }
.oef-pill-link { display: inline-flex !important; align-items: center; gap: 8px; width: fit-content; padding: 10px 16px; border-radius: 999px; background: var(--k-tint); color: var(--k-accent) !important; text-decoration: none !important; font-weight: 600; transition: gap .2s ease, transform .2s ease; }
.oef-pill-link:hover { gap: 12px; transform: translateY(-1px); }

/* Questions: cards that open with a turn of the chevron (boot.js animates the height). */
.oef-faq-item { margin: 10px 0 0 !important; padding: 0 !important; border: 1px solid var(--k-line) !important; border-radius: 16px; background: var(--k-card); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; }
.oef-faq-item:hover { border-color: color-mix(in srgb, var(--k-accent) 35%, var(--k-line)) !important; }
.oef-faq-item[open] { box-shadow: var(--k-shadow); border-color: color-mix(in srgb, var(--k-accent) 45%, var(--k-line)) !important; }
.oef-faq-item > summary { list-style: none; display: flex !important; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px !important; cursor: pointer; }
.oef-faq-item > summary::-webkit-details-marker { display: none; }
.oef-faq-chev { flex: none; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--k-tint); color: var(--k-accent); transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease; }
.oef-faq-item[open] .oef-faq-chev { transform: rotate(180deg); background: var(--k-accent); color: #FFFFFF; }
.oef-faq-item > :not(summary) { margin: 0 !important; padding: 0 18px 16px !important; }

/* On this page: the current section lights up; a rail fills as you read. */
.oef-toc { position: sticky !important; top: 100px; align-self: flex-start; padding-left: 16px !important; }
.oef-toc-rail { position: absolute; left: 0; top: 30px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--k-line); overflow: hidden; }
.oef-toc-rail i { display: block; width: 100%; height: 100%; transform-origin: top; transform: scaleY(var(--p, 0)); background: linear-gradient(#8A5CF0, #6D3FD1); }
.oef-toc a { position: relative; padding: 5px 10px !important; margin-left: -10px; border-radius: 9px; transition: color .2s ease, background .2s ease; }
.oef-toc a.is-on { color: var(--k-accent) !important; background: var(--k-tint); font-weight: 600; }
@media (max-width: 900px) { .oef-toc { position: relative !important; top: auto; } }
.oef-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 90; pointer-events: none; }
.oef-progress i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #6D3FD1, #F0A8E8); }

/* Cards that link somewhere: an icon tile and an arrow that turns on hover. */
.oef-linkcard { position: relative; padding-right: 52px !important; }
.oef-linkcard > .oef-tile { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 4px; }
.oef-linkcard-go { position: absolute; right: 16px; top: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--k-tint); color: var(--k-accent); transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease; }
.oef-linkcard:hover .oef-linkcard-go { transform: rotate(45deg) scale(1.08); background: var(--k-accent); color: #FFFFFF; }
.oef-linkcard-row { display: flex !important; align-items: center; gap: 12px; text-align: left; }
.oef-linkcard-row > .oef-tile { flex: none; margin: 0; }
.oef-linkcard-row .oef-linkcard-go { top: calc(50% - 15px); }

/* The closing call to action, above the footer: a violet band with a slow sheen. */
.oef-cta { padding: 56px 24px 0; }
.oef-cta-in { position: relative; overflow: hidden; isolation: isolate; max-width: 1152px; margin: 0 auto; border-radius: 28px; padding: 44px 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text art" "actions art"; align-items: center; gap: 22px 40px; color: #FFFFFF; background: radial-gradient(120% 140% at 0% 0%, #8A5CF0 0%, #6D3FD1 38%, #2B1A5C 100%); box-shadow: 0 30px 70px -30px rgba(76,40,170,.6); }
.oef-cta-in::before { content: ""; position: absolute; inset: -60%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 68%, rgba(255,255,255,.16) 78%, transparent 88%); animation: oef-spin 12s linear infinite; pointer-events: none; }
@keyframes oef-spin { to { transform: rotate(360deg); } }
.oef-cta-text { grid-area: text; }
.oef-cta h2 { margin: 0 0 8px; font-size: 28px; line-height: 1.1; letter-spacing: -.03em; font-weight: 600; color: #FFFFFF; }
.oef-cta p { margin: 0; max-width: 560px; color: rgba(255,255,255,.84); font-size: 16px; }
.oef-cta-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 10px; }
.oef-cta-go { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 22px; border-radius: 999px; background: #FFFFFF; color: #4A2699 !important; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(0,0,0,.45); transition: transform .2s ease; }
.oef-cta-go:hover { transform: translateY(-2px); }
.oef-cta-more { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 999px; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.38); text-decoration: none; font-weight: 600; transition: background .2s ease, gap .2s ease; }
.oef-cta-more:hover { background: rgba(255,255,255,.1); gap: 12px; }
.oef-cta-art { grid-area: art; display: flex; align-items: flex-end; gap: 10px; }
.oef-cta-art svg { filter: drop-shadow(0 12px 18px rgba(0,0,0,.3)); animation: oef-float 6s ease-in-out infinite; }
.oef-cta-art svg:nth-child(2) { animation-delay: -2s; }
.oef-cta-art svg:nth-child(3) { animation-delay: -4s; }
@media (max-width: 720px) { .oef-cta { padding: 40px 16px 0; } .oef-cta-in { grid-template-columns: 1fr; grid-template-areas: "text" "actions"; padding: 30px 22px; border-radius: 24px; } .oef-cta-art { display: none; } .oef-cta h2 { font-size: 23px; } }
.oef-404-art { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin-bottom: 6px; }
.oef-404-art svg { filter: drop-shadow(0 12px 20px rgba(28,20,48,.16)); animation: oef-float 5s ease-in-out infinite; }
.oef-404-art svg:nth-child(2) { animation-delay: -1.7s; }
.oef-404-art svg:nth-child(3) { animation-delay: -3.4s; }

/* Home: the stats as three cards with icons. */
.oef-stats { gap: 14px !important; max-width: 880px !important; }
.oef-stat { flex: 1 1 0 !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; padding: 14px 18px !important; border: 1px solid var(--k-line) !important; border-radius: 18px; background: var(--k-glass); box-shadow: var(--k-shadow); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.oef-stat:hover { transform: translateY(-4px); }
.oef-stat-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; color: #FFFFFF; background: linear-gradient(135deg, #8A5CF0, #6D3FD1); box-shadow: 0 10px 20px -8px rgba(109,63,209,.6); }
.oef-stat-ico-0 { background: linear-gradient(135deg, #34C38F, #0F7A4D); box-shadow: 0 10px 20px -8px rgba(15,122,77,.55); }
.oef-stat-ico-2 { background: linear-gradient(135deg, #5B8DEF, #2D5BD6); box-shadow: 0 10px 20px -8px rgba(45,91,214,.55); }
.oef-stat-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.oef-stat-txt > span:last-child { text-align: left !important; }
@media (max-width: 720px) {
  .oef-stats { gap: 8px !important; }
  .oef-stat { flex-direction: column !important; padding: 12px 6px !important; gap: 8px !important; text-align: center; }
  .oef-stat-txt { align-items: center; }
  .oef-stat-txt > span:last-child { text-align: center !important; font-size: 12.5px !important; line-height: 1.3; }
  .oef-stat-ico { width: 38px; height: 38px; border-radius: 12px; }
}

/* Home: the before/after section, one example at a time. */
.oef-cmp-tabs { position: relative; display: flex; gap: 6px; width: fit-content; max-width: 100%; margin: 4px auto 22px; padding: 6px; border-radius: 22px; background: var(--k-soft); border: 1px solid var(--k-line); }
.oef-cmp-tabs button { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border: 0; background: none; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: var(--k-muted); transition: color .3s ease; }
.oef-cmp-n { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; font: 600 14px/1 'Outfit', sans-serif; background: var(--k-card); color: var(--k-accent); border: 1px solid var(--k-line); transition: background .3s ease, color .3s ease, border-color .3s ease; }
.oef-cmp-tabs [aria-selected="true"] .oef-cmp-n { background: linear-gradient(135deg, #8A5CF0, #6D3FD1); color: #FFFFFF; border-color: transparent; }
.oef-cmp-t b { display: block; font-family: 'Outfit', 'Geist', sans-serif; font-size: 16.5px; font-weight: 600; color: var(--k-ink); }
.oef-cmp-t small { display: block; font-size: 13px; color: var(--k-muted); }
.oef-cmp-thumb { position: absolute; top: 6px; bottom: 6px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 16px; background: var(--k-card); box-shadow: var(--k-shadow); transition: transform .6s cubic-bezier(.34,1.56,.64,1), width .6s cubic-bezier(.34,1.56,.64,1); }
.oef-cmp-panel > header { display: none !important; }
.oef-cmp-stage { max-height: 680px; overflow: hidden !important; -webkit-mask-image: linear-gradient(#000 calc(100% - 180px), transparent); mask-image: linear-gradient(#000 calc(100% - 180px), transparent); transition: max-height .8s cubic-bezier(.2,.8,.2,1); }
.oef-cmp-stage.is-open { max-height: 2600px; -webkit-mask-image: none; mask-image: none; }
.oef-cmp-more { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin: -70px auto 26px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--k-line); background: var(--k-card); color: var(--k-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--k-shadow); transition: transform .2s ease; }
.oef-cmp-more:hover { transform: translateY(-2px); }
.oef-cmp-more svg { transition: transform .4s ease; }
.oef-cmp-stage.is-open + .oef-cmp-more { margin-top: 18px; }
.oef-cmp-stage.is-open + .oef-cmp-more svg { transform: rotate(180deg); }
@media (max-width: 720px) {
  .oef-cmp-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 6px 0 16px; }
  .oef-cmp-tabs button { padding: 8px 10px 8px 8px; gap: 9px; }
  .oef-cmp-t b { font-size: 14.5px; }
  .oef-cmp-n { width: 30px; height: 30px; border-radius: 10px; font-size: 12.5px; }
}

/* Round 9: the steps' liquid. Each icon sits in a blob that slowly changes
   shape (faster under the pointer); a wave joins them, drawn in as the
   section arrives, its dashes flowing from step to step. */
.oef-liquid { animation: oef-liquid 10s ease-in-out infinite paused; animation-delay: calc(-3.3s * var(--i, 0)); }
.is-playing .oef-liquid, .is-playing .oef-steps-flow { animation-play-state: running; }
.oef-liquid::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 50% at 30% 22%, rgba(255,255,255,.42), transparent 70%); pointer-events: none; }
.oef-step:hover .oef-liquid { animation-duration: 3s; }
@keyframes oef-liquid {
  0%, 100% { border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%; }
  33% { border-radius: 58% 42% 38% 62% / 52% 61% 39% 48%; }
  66% { border-radius: 47% 53% 40% 60% / 60% 44% 56% 40%; }
}
.oef-steps-flow { animation: oef-flowline 2.4s linear infinite paused; }
@keyframes oef-flowline { to { stroke-dashoffset: -48; } }
.js .oef-reveal .oef-steps-wave { clip-path: inset(0 100% 0 0); }
.js .oef-reveal.is-in .oef-steps-wave { transition: clip-path 1.4s cubic-bezier(.6,.1,.2,1) .2s; clip-path: inset(0); }
@media (max-width: 720px) { .js .oef-reveal .oef-steps-wave { clip-path: inset(0 0 100% 0); } }

/* Round 9: Who it's for. Each card mixes its tints from its audience's colour. */
[data-use-card] .oef-use-tile { background: linear-gradient(135deg, color-mix(in srgb, var(--u) 68%, #FFFFFF), var(--u)) !important; box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--u) 60%, transparent) !important; }
[data-use-card] .oef-use-art { background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--u) 20%, #FFFFFF) 0%, rgba(255,255,255,0) 62%), radial-gradient(80% 100% at 100% 100%, color-mix(in srgb, var(--u) 12%, #FFFFFF) 0%, rgba(255,255,255,0) 60%), color-mix(in srgb, var(--u) 5%, #FFFFFF) !important; }
:root[data-theme="dark"] [data-use-card] .oef-use-art { background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--u) 32%, #151922) 0%, rgba(21,25,34,0) 62%), color-mix(in srgb, var(--u) 10%, #151922) !important; }
[data-use-card] .oef-use-tags span { color: color-mix(in srgb, var(--u) 80%, #000000) !important; background: color-mix(in srgb, var(--u) 10%, #FFFFFF) !important; }
:root[data-theme="dark"] [data-use-card] .oef-use-tags span { color: color-mix(in srgb, var(--u) 45%, #FFFFFF) !important; background: color-mix(in srgb, var(--u) 22%, #151922) !important; }
[data-use-card] .oef-use-link { transition: gap .2s ease, background-color .25s ease, transform .2s ease; }
[data-use-card] .oef-use-link:hover { gap: 14px; transform: translateY(-1px); background: var(--u) !important; }
[data-use-card] .oef-use-tile svg { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
[data-use-card]:hover .oef-use-tile svg { transform: rotate(-8deg) scale(1.08); }

/* Pill buttons lift; the arrow tile nudges along. */
.oef-btn { transition: transform .15s ease, box-shadow .15s ease; }
.oef-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(28,20,48,.14); }
.oef-arrow { transition: transform .15s ease; }
.oef-btn:hover .oef-arrow { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce), print {
  .js .oef-reveal, .js .oef-reveal .oef-w, .js .oef-hero-in, .js .oef-reveal .oef-step > span:first-child, .js .oef-reveal .oef-step > span:first-child > span, .js .oef-reveal .oef-steps-fill, .js .oef-reveal .oef-ico-lock-open { opacity: 1; transform: none; filter: none; transition: none; animation: none; }
  .js .oef-reveal .oef-ico :is(path, circle, rect, line, polyline) { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .js .oef-reveal .oef-lock-closed { opacity: 0; }
  .oef-sweep { animation: none; background: none; -webkit-text-fill-color: inherit; }
  .oef-key, .oef-hint, .oef-dl-fill, .oef-bob, .oef-qr, .oef-pulse, .oef-float, .oef-chip-bar, [data-use-card], .oef-liquid, .oef-steps-flow { animation: none; }
  .js .oef-reveal .oef-steps-wave { clip-path: none !important; }
  .oef-btn, .oef-arrow, .oef-card, .oef-ico { transition: none; }
  .oef-btn:hover, .oef-card:hover, .oef-ico { transform: none; }
  .js .oef-demo-stage { opacity: 1; transform: none; transition: none; }
  .js .oef-swash path { stroke-dashoffset: 0; animation: none; }
  .oef-tabs-thumb, .oef-seg-thumb, .oef-toast, .oef-uses-arrow, .oef-uses-dots i { transition: none; }
  .oef-uses-track > [data-use-card] { transform: none; opacity: 1; }
  .oef-uses-track [data-use-card] .oef-float { translate: none; }
  .oef-aurora i, .oef-cta-in::before, .oef-cta-art svg, .oef-404-art svg { animation: none; }
  .oef-theme, .oef-theme svg, .oef-stat, .oef-trust > *, .oef-ktile, .oef-faq-chev, .oef-cmp-thumb, .oef-cmp-stage, .oef-linkcard-go { transition: none; }
}

/* Printed pages show everything, without the moving parts. */
@media print { .js .oef-reveal, .js .oef-hero-in, .js .oef-reveal .oef-w { opacity: 1 !important; transform: none !important; animation: none !important; } .oef-progress, .oef-aurora, .oef-theme { display: none !important; } }

:root[data-theme="dark"]{--bd-1C1430:#1C1430;--bd-2F7A5A:#2F7A5A;--bd-3A2E5C:#3A2E5C;--bd-4A5260:#777D88;--bd-5B4F80:#5B4F80;--bd-6D3FD1:#9A78EC;--bd-7A2F42:#7A2F42;--bd-C3CCDD:#3A4252;--bd-CDEBDC:#296647;--bd-D5DAE3:#3A4252;--bd-DDD8E8:#40355A;--bd-E0E4EA:#3A4555;--bd-E2D8FA:#37206F;--bd-E4E7EC:#262B36;--bd-E7E3F2:#3B2D62;--bd-EAE4F7:#39216E;--bd-ECE6F8:#3A206F;--bd-ECE8F4:#3F2E61;--bd-EEEAF6:#3E2B64;--bd-EEF0F4:#1E232D;--bg-0E1116:#0E1116;--bg-0F7A4D:#0F7A4D;--bg-1C1430:#1C1430;--bg-1F4D3A:#1F4D3A;--bg-1F5F4A:#1F5F4A;--bg-221943:#221943;--bg-241A42:#241A42;--bg-2A1F52:#2A1F52;--bg-2C2150:#2C2150;--bg-4A1F2A:#4A1F2A;--bg-6D3FD1:#7B4DE6;--bg-8A5CF0:#8A5CF0;--bg-8F7FC0:#8F7FC0;--bg-9C6BFF:#9C6BFF;--bg-9C96AE:#9C96AE;--bg-C3B0F5:#21163B;--bg-D6CDEA:#221839;--bg-E3F3F6:#16353B;--bg-E7F5EE:#183A29;--bg-E8DFFC:#22163B;--bg-E9DFFF:#22163B;--bg-E9DFFF-0:rgba(34,22,59,0);--bg-EAE0FD:#23163B;--bg-EAE0FD-0:rgba(35,22,59,0);--bg-EAE0FD-055:rgba(35,22,59,0.55);--bg-EAE4F7:#22163B;--bg-EAF0FD:#16223B;--bg-EBE4FD:#21163B;--bg-ECEBFD:#18163B;--bg-EEF0F4:#1E232D;--bg-EFE8FD:#23163B;--bg-EFE8FE:#22163B;--bg-EFE8FE-0:rgba(34,22,59,0);--bg-EFE8FE-055:rgba(34,22,59,0.55);--bg-F1ECFA:#24163B;--bg-F1EEF7:#241A37;--bg-F1F3F6:#1E232D;--bg-F3EEFE:#22163B;--bg-F3EEFF:#21163B;--bg-F3FAF6:#183A26;--bg-F4F2F8:#251D35;--bg-F6F2FD:#1F162F;--bg-F6F3FC:#1F182D;--bg-F6F8FA:#1A1F29;--bg-F7F3FF:#1C1132;--bg-F7F5FB:#201B29;--bg-F8F5FF:#1A1132;--bg-FAE8FC:#37163B;--bg-FAFBFD:#10131A;--bg-FBE4F3:#3B162E;--bg-FBE4F3-0:rgba(59,22,46,0);--bg-FBF9FF:#1B1030;--bg-FBFBFC:#0B0D12;--bg-FBFBFC-0:rgba(11,13,18,0);--bg-FDE9EF:#3B1621;--bg-FDEEE5:#3B2416;--bg-FEF4DA:#3B3116;--bg-FFFFFF:#151922;--bg-FFFFFF-014:rgba(21,25,34,0.14);--bg-FFFFFF-018:rgba(21,25,34,0.18);--bg-FFFFFF-092:rgba(21,25,34,0.92);--btn-0E1116:#262B36;--btn-1C1430:#262B36;--fg-0E1116:#F2F4F8;--fg-0F5C3A:#8DECC2;--fg-0F7A4D:#89F0C5;--fg-155E75:#8FD5EB;--fg-1C1430:#FFFFFF;--fg-1D46B8:#8CA6ED;--fg-1F2430:#AEB7CB;--fg-2A303A:#D0D3D8;--fg-3730A3:#9D99E1;--fg-3A4250:#C2C6CC;--fg-4A2699:#DCD0FA;--fg-4A4560:#BAB7C4;--fg-4A5260:#B7BAC1;--fg-5A6270:#ACAFB6;--fg-6D3FD1:#C3B0F5;--fg-854D0E:#F2C087;--fg-86198F:#E48EEB;--fg-9A3412:#F1A288;--fg-9F1239:#F288A5;--fg-C3B0F5:#C3B0F5;--fg-C9CFD9:#5B6270;--fg-CFC7E6:#CFC7E6;--fg-E4DAFF:#E4DAFF;--fg-FFFFFF:#FFFFFF;--logo-4A2699:#3A1D7E;--logo-6D3FD1:#7B4DE6;--logo-9A78EC:#A688F0;--logo-C3B0F5:#C3B0F5;--logo-FFFFFF:#FFFFFF}