@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-variable.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
:root {
  --c27-primary: #5d67d8;
  --c27-hover: #4953be;
  --c27-indigo: #eef0ff;
  --c27-navy: #101426;
  --c27-cyan: #5bd6e8;
  --c27-yellow: #ffd166;
  --c27-soft-indigo: #a5aff5;
  --c27-dark-surface: #1b2138;
  --c27-background: #f7f8fc;
  --c27-surface: #fff;
  --c27-secondary: color-mix(in srgb, var(--c27-dark-surface) 68%, white);
  --c27-border: color-mix(in srgb, var(--c27-soft-indigo) 28%, white);
  --c27-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --c27-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --c27-logo-bar-height: 52px;
  --c27-ease-out: cubic-bezier(.23, 1, .32, 1);
  --c27-button-height: 52px;
  --c27-button-font-size: 1rem;
  --c27-button-padding: 22px;
  --c27-hero-title-size: 2.875rem;
  --c27-hero-description-size: 1.125rem;
}

.c27-home { margin: 0; background: var(--c27-surface); color: var(--c27-navy); font: 400 1rem/1.6 var(--c27-font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
.c27-home *, .c27-home *::before, .c27-home *::after { box-sizing: border-box; }
.c27-home .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.c27-home [hidden] { display: none !important; }
.c27-home :is(h1, h2, h3, p, figure, blockquote) { margin: 0; }
.c27-home :is(h1, h2, h3) { color: var(--c27-navy); font-weight: 500; }
.c27-home h2 { font-size: clamp(2.125rem, 3.4vw, 2.875rem); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.c27-home h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.025em; }
.c27-home a { color: inherit; text-decoration: none; }
.c27-home button { font: inherit; cursor: pointer; }
.c27-home :is(button, .c27-button, .c27-hero-tour) { min-height: var(--c27-button-height); font: 500 var(--c27-button-font-size)/1.375 var(--c27-font); }
.c27-ui-icon { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; vertical-align: middle; stroke-width: 1.8; }
.c27-button .c27-ui-icon { width: 20px; height: 20px; }
.c27-play .c27-ui-icon { width: 20px; height: 20px; fill: currentColor; }
.c27-video-play .c27-ui-icon { width: 28px; height: 28px; fill: currentColor; }
.c27-menu-toggle [data-icon="x"] { display: none; }
.c27-menu-toggle[aria-expanded="true"] [data-icon="menu"] { display: none; }
.c27-menu-toggle[aria-expanded="true"] [data-icon="x"] { display: inline-block; }
.c27-home img { display: block; max-width: 100%; height: auto; }
.c27-home ::selection { background: var(--c27-indigo); color: var(--c27-navy); }
.c27-home :is(a, button, summary):focus-visible { outline: 3px solid var(--c27-primary); outline-offset: 5px; }
.c27-home :is(a, button, summary) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.c27-home :is(main, section) { scroll-margin-top: 7rem; }
.c27-container { width: min(1248px, calc(100% - 80px)); margin-inline: auto; }
.c27-skip { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px 20px; background: var(--c27-navy); color: #fff !important; transform: translateY(-150%); }
.c27-skip:focus { transform: translateY(0); }
.c27-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--c27-border); background: var(--c27-surface); }
html:has(.c27-home) { scroll-padding-bottom: calc(var(--c27-logo-bar-height) + env(safe-area-inset-bottom)); }
.c27-sticky-trust { position: fixed; bottom: 0; inset-inline: 0; z-index: 40; height: calc(var(--c27-logo-bar-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--c27-border); background: var(--c27-surface); box-shadow: 0 -8px 24px -20px #10142630; opacity: 1; transition: opacity 180ms var(--c27-ease-out); }
.c27-sticky-trust.is-away { opacity: 0; pointer-events: none; }
.c27-sticky-trust > .c27-logo-strip { height: 100%; gap: 24px; }
.c27-sticky-trust .c27-logo-strip > p { font-size: .75rem; }
.c27-sticky-trust .c27-logo-window { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.c27-sticky-trust .c27-logo-group img { height: 32px; }
body.admin-bar .c27-header { top: var(--wp-admin--admin-bar--height, 32px); }
@supports (backdrop-filter: blur(20px)) {
  .c27-header { background: #ffffffe6; backdrop-filter: blur(20px) saturate(180%); border-bottom-color: transparent; box-shadow: 0 1px 0 #1014260a, 0 8px 20px -16px #10142630; }
}
.c27-nav { min-height: 82px; display: flex; align-items: center; gap: 40px; padding-block: 12px; }
.c27-brand { display: inline-flex; align-items: center; flex: 0 0 151px; min-height: 44px; }
.c27-brand img { width: 151px; }
.c27-nav-menu, .c27-nav-links, .c27-nav-actions { display: flex; align-items: center; }
.c27-nav-menu { flex: 1; min-width: 0; justify-content: space-between; gap: 22px; }
.c27-nav-links { flex-wrap: wrap; gap: 0 24px; }
.c27-nav-links a, .c27-nav-actions > a:first-child { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 500; white-space: nowrap; }
.c27-nav-links a:hover, .c27-nav-actions > a:first-child:hover { color: var(--c27-primary); }
.c27-nav-actions { flex-shrink: 0; gap: 24px; }
.c27-nav-actions > a:first-child span { margin-left: 5px; }
.c27-menu-toggle { border: 1px solid var(--c27-border); border-radius: 8px; background: var(--c27-surface); color: var(--c27-navy); padding: 14px var(--c27-button-padding); transition: transform 160ms var(--c27-ease-out), background-color 150ms ease; }
.c27-menu-toggle span { margin-left: 9px; }
.c27-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px var(--c27-button-padding); border: 1px solid transparent; border-radius: 8px; background: var(--c27-primary); color: #fff !important; box-shadow: inset 0 1px 0 #ffffff20, 0 1px 2px #1014260a; transition: transform 160ms var(--c27-ease-out), background-color 150ms ease, border-color 150ms ease; }
.c27-button span:last-child { font-size: 20px; line-height: 1; }
.c27-button.c27-button-secondary { background: transparent; border-color: var(--c27-border); color: var(--c27-navy) !important; box-shadow: none; }
:is(.c27-connection-section, .c27-final, .c27-video-end) .c27-button.c27-button-secondary { border-color: #a5aff580; color: var(--c27-indigo) !important; }
@media (hover: hover) and (pointer: fine) {
  .c27-button:hover { background: var(--c27-hover); }
  .c27-button.c27-button-secondary:hover { background: var(--c27-background); border-color: var(--c27-primary); }
  :is(.c27-connection-section, .c27-final, .c27-video-end) .c27-button.c27-button-secondary:hover { background: #ffffff0d; border-color: var(--c27-soft-indigo); }
  .c27-home .c27-hero-tour:hover { background: var(--c27-indigo); color: var(--c27-navy); }
  .c27-hero-tour:hover .c27-play { background: var(--c27-primary); color: #fff; }
}
.c27-home :is(.c27-button, .c27-hero-tour, .c27-menu-toggle):active:not(:focus-visible) { transform: scale(.97); transition-duration: 100ms; }
.c27-home .c27-hero-tour { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 4px 18px 4px 4px; border-radius: 999px; color: var(--c27-secondary); transition: transform 160ms var(--c27-ease-out), background-color 150ms ease, color 150ms ease; }
.c27-play { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--c27-background); background: color-mix(in srgb, var(--c27-navy) 6%, white); color: var(--c27-secondary); transition: background-color 150ms ease, color 150ms ease; }
.c27-hero-tour:is(:focus-visible, :active) { background: var(--c27-indigo); color: var(--c27-navy); }
.c27-hero-tour:is(:focus-visible, :active) .c27-play { background: var(--c27-primary); color: #fff; }
.c27-hero-tour:focus-visible, .c27-hero-tour:focus-visible .c27-play { transition: none; }
.c27-hero-section { position: relative; isolation: isolate; overflow: hidden; }
.c27-hero { position: relative; padding-top: 84px; padding-bottom: 64px; }
.c27-hero .c27-eyebrow { font-size: .75rem; }

.c27-hero .c27-actions { display: grid; grid-template-columns: minmax(0, 580px) max-content; justify-content: space-between; align-items: center; column-gap: 48px; row-gap: 10px; margin-top: 36px; }
.c27-home .c27-signup { display: flex; align-items: center; gap: 8px; width: min(100%, 580px); min-width: 0; padding: 8px; border: 1px solid transparent; border-radius: 18px; background: var(--c27-background); background: color-mix(in srgb, var(--c27-navy) 6%, white); }
.c27-signup:focus-within { outline: 3px solid var(--c27-primary); outline-offset: 3px; }
.c27-signup input { flex: 1; min-width: 0; min-height: var(--c27-button-height); padding: 12px 16px; border: 0; border-radius: 10px; outline: none; background: transparent; color: var(--c27-navy); font: 400 1rem/1.5 var(--c27-font); }
.c27-signup input::placeholder { color: var(--c27-secondary); opacity: 1; }
.c27-hero .c27-signup .c27-button { flex-shrink: 0; }
.c27-pixels { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; background: linear-gradient(90deg, #fff 2px, transparent 2px), linear-gradient(#fff 2px, #5d67d826 2px); background-size: 6px 6px; mask-image: radial-gradient(ellipse 38% 88% at 93% 28%, #000 15%, transparent 100%), radial-gradient(ellipse 18% 70% at 0% 0%, #000 5%, transparent 100%); }
.c27-pixels.is-ready { background: none; }
.c27-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 19px !important; color: var(--c27-secondary); font: 400 10px/1.5 var(--c27-mono); letter-spacing: .045em; text-transform: uppercase; }
.c27-status-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--c27-cyan); }
.c27-hero h1 { font-size: var(--c27-hero-title-size); line-height: 1.05; letter-spacing: -.05em; overflow-wrap: anywhere; }
.c27-hero h1 > span { display: inline-block; max-width: 100%; color: var(--c27-primary); font-weight: 600; }
.c27-feature-pixel-title { color: var(--c27-primary); font-weight: 600; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .c27-hero h1 > span, .c27-feature-pixel-title { background: linear-gradient(90deg, transparent 2px, #ffffffd9 2px) 0 0 / 2.5px 2.5px, linear-gradient(transparent 2px, #ffffffd9 2px) 0 0 / 2.5px 2.5px, var(--c27-primary); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
@media print, (forced-colors: active) {
  .c27-hero h1 > span, .c27-feature-pixel-title { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}
.c27-lede { max-width: 58ch; margin-top: 1.75rem !important; color: var(--c27-secondary); font-size: var(--c27-hero-description-size); line-height: 1.6; letter-spacing: 0; }
.c27-hero-note { margin-top: 16px !important; color: var(--c27-secondary); font-size: 14px; line-height: 1.6; }
html:has(.c27-home) { scrollbar-gutter: stable; }
html:has(.c27-tour-dialog[open]) { overflow: hidden; }
.c27-tour-dialog { width: min(1100px, calc(100vw - 160px), calc((100dvh - 128px) * 16 / 9)); max-width: none; max-height: calc(100dvh - 128px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #ffffff26; border-radius: 20px; background: var(--c27-navy); color: #fff; box-shadow: 0 24px 90px #05071380; }
.c27-tour-dialog::backdrop { background: #080b18b3; backdrop-filter: blur(8px); }
.c27-tour-shell { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--c27-navy); }
.c27-home .c27-tour-button { display: grid; flex: 0 0 52px; place-items: center; width: 52px; min-height: 52px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #fff; transition: background-color 150ms ease; }
.c27-tour-button > span { display: grid; place-items: center; }
.c27-tour-button .c27-ui-icon { width: 22px; height: 22px; }
.c27-home .c27-tour-close { position: absolute; z-index: 3; top: 16px; right: 16px; border-radius: 50%; border-color: #ffffff26; background: #1014268c; backdrop-filter: blur(8px); }
.c27-tour-play [data-tour-play] .c27-ui-icon { fill: currentColor; width: 20px; margin-left: 2px; }
.c27-tour-stage { position: relative; display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; background: #080b14; }
.c27-tour-stage video { display: block; width: 100%; height: auto; max-height: calc(100dvh - 128px); aspect-ratio: 16 / 9; object-fit: contain; cursor: pointer; }
.c27-tour-shell.is-ended video { filter: blur(8px); }
.c27-tour-end { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; overflow: auto; padding: 32px; background: #101426b3; color: #fff; text-align: center; }
.c27-tour-end > div { max-width: 560px; }
.c27-home .c27-tour-end h3 { color: #fff; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; letter-spacing: -.035em; }
.c27-tour-end p { margin-top: 12px !important; color: #e0e4f5; font-size: 16px; line-height: 1.5; }
.c27-tour-end-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
.c27-home .c27-tour-end-actions > button { border-color: #ffffff40; }
.c27-tour-message { position: absolute; left: 50%; top: 50%; width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; transform: translate(-50%, -50%); border: 1px solid #a5aff533; border-radius: 8px; background: #101426ee; color: #eef0ff; text-align: center; font-size: 14px; }
.c27-tour-message a { display: block; margin-top: 8px; color: var(--c27-cyan); text-decoration: underline; text-underline-offset: 4px; }
.c27-tour-controls { position: absolute; z-index: 2; inset: auto 0 0; padding: 52px 16px 12px; background: linear-gradient(transparent, #080b14b3); }
.c27-tour-toolbar { display: flex; align-items: center; gap: 12px; }
.c27-tour-seek, .c27-tour-volume { display: block; width: 100%; height: 36px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; accent-color: var(--c27-primary); cursor: pointer; touch-action: pan-y; }
.c27-tour-seek { flex: 1; min-width: 0; }
.c27-tour-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--c27-soft-indigo) var(--c27-progress, 0%), #ffffff66 var(--c27-progress, 0%)); }
.c27-tour-seek::-moz-range-track { height: 4px; border-radius: 4px; background: #ffffff66; }
.c27-tour-seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--c27-soft-indigo); }
.c27-tour-seek::-webkit-slider-thumb, .c27-tour-volume::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; appearance: none; -webkit-appearance: none; background: #fff; box-shadow: 0 0 0 4px #ffffff1a; }
.c27-tour-seek::-moz-range-thumb, .c27-tour-volume::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.c27-tour-time { min-width: 4ch; white-space: nowrap; font: 14px/1.4 var(--c27-mono); font-variant-numeric: tabular-nums; color: #fff; }
.c27-tour-sound { position: relative; display: flex; align-items: center; }
.c27-tour-volume { position: absolute; left: 50%; bottom: 100%; width: 100px; height: 44px; padding-inline: 12px; transform: translateX(-50%); border-radius: 8px; background: #101426e6; opacity: 0; pointer-events: none; transition: opacity 150ms ease; }
.c27-tour-volume::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: #ffffff66; }
.c27-tour-volume::-moz-range-track { height: 4px; border-radius: 4px; background: #ffffff66; }
.c27-tour-sound:focus-within .c27-tour-volume { opacity: 1; pointer-events: auto; }
.c27-tour-dialog :is(button, input, a):focus-visible { outline: 2px solid var(--c27-cyan); outline-offset: 2px; }
.c27-tour-button:active { background: #ffffff26; }
.c27-home .c27-tour-close:active { background: #101426a6; }
.c27-tour-shell:fullscreen { width: 100%; height: 100%; }
.c27-tour-shell:fullscreen video { height: 100%; max-height: 100dvh; }
@media (hover: hover) and (pointer: fine) {
  .c27-tour-controls { opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
  .c27-tour-shell:hover .c27-tour-controls, .c27-tour-controls:has(:focus-visible) { opacity: 1; pointer-events: auto; }
  .c27-tour-controls:has(:focus-visible) { transition: none; }
  .c27-tour-button:hover { background: #ffffff26; }
  .c27-home .c27-tour-close:hover { background: #101426a6; }
  .c27-tour-sound:hover .c27-tour-volume { opacity: 1; pointer-events: auto; }
}
@media (max-width: 600px) {
  .c27-tour-dialog { width: min(calc(100vw - 16px), calc((100dvh - 16px) * 16 / 9)); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .c27-home .c27-tour-close { top: 8px; right: 8px; }
  .c27-tour-controls { padding: 24px 10px 6px; }
  .c27-tour-toolbar { display: grid; grid-template-columns: 52px 52px 1fr max-content 52px; gap: 0 4px; }
  .c27-tour-seek { grid-column: 1 / -1; grid-row: 1; height: 28px; }
  .c27-tour-time { font-size: 12px; }
  .c27-tour-sound { grid-column: 2; }
  .c27-tour-volume { display: none; }
  .c27-tour-stage video { max-height: calc(100dvh - 16px); }
}
@media (max-width: 600px), (max-height: 500px) {
  .c27-tour-end { padding: 10px 12px; }
  .c27-home .c27-tour-end h3 { max-width: min(280px, calc(100% - 104px)); margin-inline: auto; font-size: 20px; }
  .c27-tour-end p { margin-top: 6px !important; font-size: 12px; line-height: 1.35; }
  .c27-tour-end-actions { gap: 8px; margin-top: 10px; }
}
@media (pointer: coarse) {
  .c27-tour-volume { display: none; }
  .c27-tour-seek { height: 44px; }
  .c27-tour-seek::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; }
  .c27-tour-seek::-moz-range-thumb { width: 20px; height: 20px; }
}
.c27-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.c27-app { position: relative; display: grid; grid-template-columns: 184px minmax(0, 1fr); overflow: hidden; background: var(--c27-surface); border: 1px solid var(--c27-border); border-radius: 12px; box-shadow: 0 1px 3px #1014260a, 0 16px 48px -12px #1014261a; }
.c27-app-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 24px 12px 15px; border-right: 1px solid var(--c27-border); background: var(--c27-background); font-size: .75rem; }
.c27-app-brand { width: 150px; height: 36px !important; object-fit: contain; margin: 0 auto 22px; }
.c27-sidebar-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px; border-radius: 6px; color: var(--c27-secondary); }
.c27-app-sidebar > a:hover { color: var(--c27-hover); background: var(--c27-indigo); }
.c27-sidebar-item > img { width: 17px; height: 17px; object-fit: contain; }
.c27-app-sidebar > .c27-app-create { justify-content: center; gap: 7px; margin-bottom: 14px; background: var(--c27-primary); color: #fff; font-weight: 500; }
.c27-app-create > span { font-size: 20px; line-height: 1; }
.c27-app-sidebar > .c27-sidebar-current { background: var(--c27-indigo); color: var(--c27-hover); font-weight: 600; }
.c27-app-sidebar > .c27-sidebar-divider { margin-top: 14px; border-top: 1px solid var(--c27-border); border-radius: 0; padding-top: 18px; }
.c27-sidebar-bottom { margin-top: auto; padding: 36px 10px 0; font-size: .625rem; color: var(--c27-secondary); }
.c27-app-main { min-width: 0; }
.c27-app-topbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding: 14px 24px; border-bottom: 1px solid var(--c27-border); font-size: .6875rem; color: var(--c27-secondary); }
.c27-app-topbar > span:first-child span { margin: 0 11px; color: var(--c27-border); }
.c27-app-content { padding: 26px 28px 16px; }
.c27-app-heading { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 24px; }
.c27-home .c27-app-heading h2 { font-size: 1.625rem; line-height: 1.2; letter-spacing: -.025em; }
.c27-app-description { color: var(--c27-secondary); font-size: .8125rem; margin-top: 7px !important; }
.c27-avatar { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--c27-indigo); color: var(--c27-hover); font-size: 11px; }
.c27-app-footnote { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 5px 28px; border-top: 1px solid var(--c27-border); color: var(--c27-secondary); font-size: .6875rem; }
.c27-app-footnote > a { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; color: var(--c27-hover); }
.c27-sync-instance .c27-ui-icon { width: 14px; height: 14px; }
.c27-sync-instance { cursor: default; }
.c27-instance-breadcrumb > span, .c27-instance-navigation > span, .c27-whats-new, .c27-display-link, .c27-log-end { display: inline-flex; align-items: center; gap: 5px; }
.c27-instance-navigation > span { color: var(--c27-secondary); opacity: .65; }
.c27-status-processing, .c27-status-complete { display: inline-flex; align-items: center; }
.c27-status-complete, .is-complete .c27-status-processing { display: none; }
.is-complete .c27-status-complete { display: inline-flex; }
.c27-run-status > i { display: inline-flex; }
.c27-log-category { align-items: center; gap: 4px; }
.c27-log-category > .c27-ui-icon { width: 11px; height: 11px; }
.c27-report-open > .c27-ui-icon { width: 12px; height: 12px; }
.c27-log-filter { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.c27-log-search { color: var(--c27-secondary) !important; }
.c27-display-link { color: var(--c27-hover); }
.c27-sync-instance .c27-app-sidebar { background: #fff; }
.c27-instance-account { min-height: 62px; }
.c27-instance-account > div { display: flex; align-items: center; gap: 26px; }
.c27-whats-new { color: #4978df; font-size: 11px; font-weight: 600; }
.c27-account-name { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; }
.c27-account-name > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; background: var(--c27-indigo); color: var(--c27-primary); font-size: 16px; font-weight: 500; }
.c27-demo-label { color: var(--c27-secondary); font-size: 10px; }
.c27-instance-viewport { height: 840px; overflow: auto; overscroll-behavior-y: auto; background: var(--c27-background); scrollbar-color: var(--c27-soft-indigo) var(--c27-background); }
.c27-instance-viewport:focus-visible { outline: 2px solid var(--c27-primary); outline-offset: -3px; }
.c27-instance-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 16px; }
.c27-instance-breadcrumb > span, .c27-home .c27-instance-breadcrumb h2 { padding: 7px 10px; border: 1px solid var(--c27-border); border-radius: 6px; background: #fff; color: var(--c27-secondary); font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.c27-home .c27-instance-breadcrumb h2 { background: var(--c27-indigo); border-color: var(--c27-primary); color: var(--c27-hover); font-weight: 500; }
.c27-instance-navigation { display: flex; gap: 8px; margin-bottom: 20px; }
.c27-instance-navigation > span, .c27-run-stop, .c27-log-end { min-height: 36px; padding: 7px 11px; border: 1px solid var(--c27-border); border-radius: 6px; background: #fff; color: var(--c27-navy); font-size: 11px !important; }
.c27-instance-card { border: 1px solid var(--c27-border); border-radius: 7px; background: #fff; }
.c27-instance-overview { padding: 24px; }
.c27-run-overview { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 30px; padding-block: 8px 30px; }
.c27-run-identity { display: flex; align-items: center; gap: 14px; }
.c27-run-apps { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.c27-run-apps > img { width: 42px; height: 42px; padding: 7px; border: 1px solid var(--c27-border); border-radius: 7px; object-fit: contain; }
.c27-run-apps > span { color: var(--c27-secondary); font-size: 11px; }
.c27-run-identity small, .c27-run-overview dt { color: var(--c27-secondary); font-size: 11px; }
.c27-home .c27-run-identity h3 { margin-top: 6px; font-size: 15px; line-height: 1.5; }
.c27-run-overview dl { display: grid; grid-template-columns: 1.6fr 1.3fr 1fr; align-self: start; gap: 18px; margin: 0; }
.c27-run-overview dd { margin: 8px 0 0; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.c27-run-overview dt small { display: block; margin-top: 4px; font-size: 9px; }
.c27-run-status-label { margin-top: 17px; }
.c27-run-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 5px; background: var(--c27-indigo); color: var(--c27-primary); font-size: 10px; font-weight: 500; white-space: nowrap; }
.is-complete .c27-run-status { background: #5bd6e826; color: #247d77; }
.c27-run-processing { display: grid; grid-template-columns: minmax(0, 1fr) 125px; align-items: center; gap: 18px; margin-block: 5px 12px; }
.c27-run-progress { height: 32px; overflow: hidden; border-radius: 4px; background: #e9ebf2; }
.c27-run-progress > span { display: grid; place-items: center; height: 100%; min-width: 90px; background-color: var(--c27-primary); background-image: repeating-linear-gradient(45deg, #ffffff26 0 6px, transparent 6px 12px); background-size: 34px 34px; animation: c27-run-stripes 1.2s linear infinite; transition: width 240ms var(--c27-ease-out); }
@keyframes c27-run-stripes { to { background-position: 34px 0; } }
.is-preview-paused .c27-run-progress > span { animation-play-state: paused; }
.c27-run-stop { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.c27-run-percentage { font-size: 9px; font-weight: 600; color: #fff; white-space: nowrap; }
.c27-run-notice { margin-block: 24px 12px !important; padding: 13px 16px; border: 1px solid var(--c27-border); border-radius: 6px; background: #fff; color: var(--c27-secondary); font-size: 12px; }
.c27-instance-summary { margin-inline: -24px; padding: 22px 24px; border-top: 1px solid var(--c27-border); }
.c27-home .c27-instance-summary h3, .c27-home .c27-instance-report h3, .c27-home .c27-log-heading h3 { margin-bottom: 17px; font-size: 13px; letter-spacing: 0; }
.c27-summary-grid, .c27-report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.c27-summary-metric, .c27-report-metric { position: relative; min-width: 0; padding: 13px; border: 1px solid var(--c27-border); border-radius: 7px; background: #fff; color: var(--c27-navy); text-align: left; }
.c27-summary-metric > span:first-child { display: block; min-height: 27px; font-size: 10px; font-weight: 500; overflow-wrap: anywhere; }
.c27-summary-metric > span:first-child img { display: inline-block; margin-right: 4px; vertical-align: middle; }
.c27-summary-metric small, .c27-summary-actions small { display: block; margin-top: 6px; color: var(--c27-secondary); font-size: 9px; }
.c27-summary-metric > strong { display: block; margin-top: 12px; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.c27-report-open { display: inline-flex; align-items: center; width: fit-content; gap: 4px; margin-top: 11px; padding: 4px 6px; border: 1px solid var(--c27-border); border-radius: 4px; background: var(--c27-indigo); color: var(--c27-primary); font-size: 9px; font-weight: 500; white-space: nowrap; }
.c27-summary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.c27-summary-actions > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 13px; border: 1px solid var(--c27-border); border-radius: 7px; background: #fff; color: var(--c27-navy); text-align: left; }
.c27-summary-actions strong { font-size: 10px; font-weight: 500; }
.c27-summary-actions .c27-report-open { margin-top: 0; }
.c27-instance-report { margin: 0 -24px -24px; padding: 22px 24px; border-top: 1px solid var(--c27-border); }
.c27-report-direction { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; padding: 7px 10px; border: 1px solid var(--c27-border); border-radius: 5px; background: var(--c27-indigo); color: var(--c27-primary); font-size: 10px; }
.c27-report-metric { display: flex; flex-direction: column; align-items: flex-start; min-height: 122px; }
.c27-report-metric > span:first-child { display: block; min-height: 36px; font-size: 10px; font-weight: 500; line-height: 1.5; }
.c27-report-metric > strong { display: block; margin-top: 14px; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.c27-instance-logs { margin-top: 16px; overflow: hidden; }
.c27-log-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--c27-border); }
.c27-home .c27-log-heading h3 { margin-bottom: 0; }
.c27-log-tools { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 18px 20px 0; }
.c27-log-field { display: grid; flex: 1; gap: 6px; min-width: 150px; color: var(--c27-secondary); font-size: 10px; }
.c27-log-filter, .c27-log-search { width: 100%; min-width: 0; min-height: 36px; padding: 8px 10px; border: 1px solid var(--c27-border); border-radius: 6px; background: #fff; color: var(--c27-navy); font: 400 11px var(--c27-font); }
.c27-log-window { height: 390px; margin: 16px 20px 20px; overflow: auto; overscroll-behavior-y: auto; border: 1px solid var(--c27-border); border-radius: 7px; scrollbar-color: var(--c27-soft-indigo) var(--c27-background); }
.c27-log-window:focus-visible { outline: 3px solid var(--c27-primary); outline-offset: 3px; }
.c27-log-table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; }
.c27-log-table th { position: sticky; z-index: 1; top: 0; padding: 10px 12px; border-bottom: 1px solid var(--c27-border); background: var(--c27-background); color: var(--c27-secondary); font-size: 9px; text-transform: uppercase; font-weight: 500; }
.c27-log-table th:first-child { width: 150px; }
.c27-log-table th:nth-child(2) { width: 90px; }
.c27-log-table td { padding: 13px 12px; border-bottom: 1px solid var(--c27-border); vertical-align: top; color: var(--c27-secondary); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.c27-log-table time { font-size: 10px; font-weight: 500; }
.c27-log-category { display: inline-flex; justify-content: center; min-width: 50px; padding: 2px 7px; border: 1px solid var(--c27-border); border-radius: 4px; background: var(--c27-indigo); color: var(--c27-primary); font-size: 9px; }
.c27-log-category.is-debug { background: var(--c27-background); color: var(--c27-secondary); }
.c27-log-category.is-error { border-color: #ffd16680; background: #ffd16630; color: #785a11; }
.c27-log-message { white-space: pre-line; }
.c27-sync-instance .c27-app-footnote { justify-content: space-between; background: #fff; }
@media (max-width: 1100px) {
  .c27-run-overview { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  .c27-instance-account > div { gap: 12px; }
  .c27-whats-new { display: none; }
  .c27-instance-viewport { height: 800px; }
  .c27-instance-overview { padding: 16px; }
  .c27-run-overview dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .c27-run-processing { grid-template-columns: 1fr; gap: 10px; }
  .c27-run-stop { justify-self: end; }
  .c27-summary-grid, .c27-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c27-instance-summary { margin-inline: -16px; padding: 20px 16px; }
  .c27-instance-report { margin: 0 -16px -16px; padding: 20px 16px; }
  .c27-summary-metric, .c27-report-metric { padding: 10px; }
  .c27-summary-metric > strong, .c27-report-metric > strong { font-size: 20px; }
  .c27-summary-actions { grid-template-columns: 1fr; }
  .c27-log-tools { padding-inline: 14px; }
  .c27-log-filter, .c27-log-search { min-height: 44px; font-size: 16px; }
  .c27-log-end { min-height: 44px; }
  .c27-log-window { height: 380px; margin-inline: 14px; }
  .c27-log-table, .c27-log-table tbody { display: block; }
  .c27-log-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .c27-log-table tbody > tr { display: grid; grid-template-columns: 1fr 1fr; padding: 13px; border-bottom: 1px solid var(--c27-border); }
  .c27-log-table td { min-width: 0; padding: 0; border: 0; font-size: 12px; }
  .c27-log-table td:nth-child(2) { text-align: right; }
  .c27-log-table td:last-child { grid-column: 1 / -1; padding-top: 8px; }
}
.c27-logo-strip { display: flex; align-items: center; gap: 32px; }
.c27-trust { margin-top: 36px; padding: 28px 0; border-top: 1px solid var(--c27-border); }
.c27-logo-strip > p { flex-shrink: 0; font-size: .875rem; color: var(--c27-secondary); white-space: nowrap; }
.c27-logo-strip strong { font-weight: 500; }
.c27-logo-window { flex: 1; min-width: 0; overflow-x: auto; }
.c27-logo-window:focus-visible { outline: 2px solid var(--c27-primary); outline-offset: 4px; }
.c27-logo-track { display: flex; width: max-content; }
.c27-logo-group { display: flex; flex-shrink: 0; align-items: center; gap: 48px; padding-right: 48px; }
.c27-logo-group[aria-hidden="true"] { display: none; }
.c27-logo-group img { flex: 0 0 120px; width: 120px; height: 36px; object-fit: contain; filter: grayscale(1); opacity: .65; }
.c27-logo-strip.is-enhanced .c27-logo-window { overflow-x: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.c27-logo-strip.is-enhanced .c27-logo-group[aria-hidden="true"] { display: flex; }
.c27-logo-strip.is-enhanced .c27-logo-track { animation: c27-logos-left 108s linear infinite; }
.c27-sticky-trust.is-away .c27-logo-track, .c27-logo-strip.is-offscreen .c27-logo-track, .c27-logo-strip.is-tab-hidden .c27-logo-track, .c27-logo-window:focus-within .c27-logo-track { animation-play-state: paused; }
@keyframes c27-logos-left { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) {
  .c27-logo-window:hover .c27-logo-track { animation-play-state: paused; }
}
.c27-section { padding-top: 98px; padding-bottom: 98px; }
.c27-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 43px; }
.c27-section-heading > p { font-size: .9375rem; line-height: 1.7; color: var(--c27-secondary); padding-bottom: 3px; }
.c27-section-heading > .c27-text-link { margin-bottom: 4px; }
.c27-text-link { display: inline-flex; align-items: center; gap: 17px; min-height: 44px; width: fit-content; font-size: .875rem; font-weight: 500; }
.c27-text-link span { font-size: 17px; line-height: 1; }
.c27-text-link:hover { color: var(--c27-primary); }
.c27-feature-section { position: relative; }
.c27-feature-section::before { content: ""; position: absolute; top: 34px; right: 4%; width: 112px; height: 88px; pointer-events: none; opacity: .23; background-image: radial-gradient(circle, var(--c27-soft-indigo) 1.3px, transparent 1.6px); background-size: 8px 8px; mask-image: linear-gradient(120deg, transparent, #000); }
.c27-feature-section h2 { max-width: 760px; white-space: normal; }
.c27-feature-section .c27-section-heading > p { max-width: 320px; }
.c27-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 25px; }
.c27-feature { display: flex; flex-direction: column; min-width: 0; }
.c27-feature-surface { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 24px; padding: 24px 24px 0; border-radius: 18px; background: #f8f8f8; }
.c27-feature-surface::after { content: ""; position: absolute; z-index: 1; inset: auto 0 0; height: 72px; background: linear-gradient(180deg, #ffffff00, #fff); pointer-events: none; }
.c27-feature-window { overflow: hidden; border: 1px solid #e5e5e5; border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.04); }
.c27-feature-window-heading { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 16px; border-bottom: 1px solid #e5e5e5; color: var(--c27-navy); font-size: 13px; font-weight: 500; }
.c27-feature-window-heading > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.c27-feature-window-icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--c27-indigo); color: var(--c27-primary); }
.c27-feature-window-icon svg { width: 18px; height: 18px; }
.c27-feature-visual { position: relative; display: flex; justify-content: center; align-items: center; height: 190px; overflow: hidden; background: #fff; }
.c27-feature h3 { font-size: 20px; }
.c27-feature > p { flex: 1; max-width: 350px; margin: 10px 0 13px !important; color: var(--c27-secondary); font-size: .9375rem; line-height: 1.6; }
.c27-feature .c27-text-link { font-size: .875rem; }
.c27-demo-sync { gap: 12px; padding: 20px; }
.c27-demo-sync-app { display: grid; place-items: center; flex: 0 0 66px; gap: 5px; padding: 9px 4px 7px; border: 1px solid #e5e5e5; border-radius: 9px; background: #fff; }
.c27-demo-sync-app img { width: 36px; height: 36px; object-fit: contain; }
.c27-demo-sync-app span { color: var(--c27-secondary); font: 500 9px var(--c27-mono); }
.c27-demo-sync-path { position: relative; flex: 1; max-width: 160px; height: 38px; background: linear-gradient(var(--c27-border), var(--c27-border)) center/100% 1px no-repeat; }
.c27-demo-packet { position: absolute; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 3px; background: var(--c27-primary); box-shadow: 0 0 0 1px var(--c27-primary); }
.c27-demo-packet-out { top: 7px; left: 0; }
.c27-demo-packet-back { right: 0; bottom: 7px; background: var(--c27-cyan); box-shadow: 0 0 0 1px var(--c27-cyan); }
.c27-demo-mapping { flex-direction: column; gap: 7px; padding: 25px; }
.c27-demo-field { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: center; gap: 10px; width: min(100%, 285px); font-size: 11px; }
.c27-demo-field span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 8px 10px; border: 1px solid var(--c27-border); border-radius: 5px; background: #fff; }
.c27-demo-field b { color: var(--c27-primary); font-size: 15px; font-weight: 400; text-align: center; }
.c27-demo-filter { flex-direction: column; gap: 7px; padding: 16px 25px; font-size: 11px; }
.c27-demo-filter-rule { display: flex; align-items: center; gap: 4px; width: min(100%, 274px); margin-bottom: 2px; color: var(--c27-secondary); }
.c27-demo-filter-rule strong { padding: 3px 7px; border-radius: 4px; background: var(--c27-indigo); color: var(--c27-primary); font-weight: 500; }
.c27-demo-filter-rule > span { margin-left: auto; }
.c27-demo-filter-row { display: flex; align-items: center; gap: 8px; width: min(100%, 274px); padding: 7px 9px; border: 1px solid var(--c27-border); border-radius: 5px; background: #fff; }
.c27-demo-filter-row small { margin-left: auto; color: var(--c27-secondary); font-size: 10px; }
.c27-demo-filter-row b { width: 14px; color: #248078; font-size: 13px; text-align: center; }
.c27-demo-filter-row:nth-last-child(2) b { color: #acb3c7; }
.c27-demo-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--c27-primary); }
.c27-demo-segments { gap: 8px; padding: 18px 14px; }
.c27-demo-segment-source { display: flex; flex-direction: column; gap: 6px; min-width: 74px; }
.c27-demo-segment-source > small { color: var(--c27-secondary); font: 500 8px var(--c27-mono); white-space: nowrap; }
.c27-demo-segment-chip { display: block; padding: 5px 7px; border: 1px solid #cbd0fd; border-radius: 4px; background: #fff; color: var(--c27-primary); font: 500 9px var(--c27-mono); white-space: nowrap; }
.c27-demo-segment-chip:nth-child(3) { border-color: #a2e8f1; color: #237e91; }
.c27-demo-segment-arrow { color: var(--c27-primary); }
.c27-demo-segment-groups { display: grid; gap: 7px; flex: 1; min-width: 0; max-width: 160px; font-size: 10px; }
.c27-demo-segment-groups > span { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 4px; padding: 8px 6px; border: 1px solid var(--c27-border); border-radius: 6px; background: #fff; white-space: nowrap; }
.c27-demo-segment-groups b { color: var(--c27-primary); font: 500 8px var(--c27-mono); }
.c27-demo-schedule { gap: 18px; padding: 24px; }
.c27-demo-clock { position: relative; flex: 0 0 66px; width: 66px; height: 66px; border: 5px solid var(--c27-yellow); border-radius: 50%; background: #fff; }
.c27-demo-clock-hand { position: absolute; top: 10px; left: calc(50% - 1px); width: 2px; height: 22px; background: var(--c27-navy); transform-origin: center bottom; }
.c27-demo-clock i { position: absolute; top: calc(50% - 3px); left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--c27-navy); }
.c27-demo-schedule-copy { display: grid; gap: 6px; font-size: 11px; }
.c27-demo-schedule-copy small { color: var(--c27-primary); font: 500 10px var(--c27-mono); }
.c27-demo-schedule-copy strong { white-space: nowrap; font-size: 13px; font-weight: 500; }
.c27-demo-schedule-copy > span { color: var(--c27-secondary); white-space: nowrap; }
.c27-demo-schedule-check { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 3px; border-radius: 50%; background: var(--c27-cyan); color: var(--c27-navy); font-size: 10px; }
.c27-demo-response { gap: 8px; padding: 20px 16px; }
.c27-demo-response-panel { display: grid; gap: 7px; flex: 1 1 0; min-width: 0; max-width: 150px; padding: 12px 10px; border: 1px solid var(--c27-border); border-radius: 7px; background: #fff; }
.c27-demo-response-panel > span { color: var(--c27-secondary); font: 500 8px var(--c27-mono); white-space: nowrap; }
.c27-demo-response-panel > strong { font-size: 11px; font-weight: 600; white-space: nowrap; }
.c27-demo-response-panel > small { display: block; padding: 4px 6px; border-radius: 4px; background: var(--c27-background); color: var(--c27-navy); font-size: 9px; white-space: nowrap; }
.c27-demo-response-event { color: var(--c27-primary) !important; }
.c27-demo-response-result { color: #247d77 !important; }
.c27-demo-response-arrow { flex: 0 0 14px; color: var(--c27-primary); font-size: 17px; }
.c27-connection-section { position: relative; isolation: isolate; overflow: clip; padding: 78px 0; background: var(--c27-navy); color: #fff; }
.c27-connection-pixels, .c27-final-pixels { z-index: 0; background: linear-gradient(90deg, var(--c27-navy) 2px, transparent 2px), linear-gradient(var(--c27-navy) 2px, transparent 2px), linear-gradient(125deg, #5d67d826, #5bd6e826, #ffd16626, #a5aff526); background-size: 6px 6px, 6px 6px, 100% 100%; mask-image: radial-gradient(ellipse 40% 85% at 95% 30%, #000 15%, transparent 100%), radial-gradient(ellipse 24% 70% at 0% 0%, #000 5%, transparent 100%); }
.c27-connection-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.c27-connection-inner h2 { color: #fff; font-size: clamp(34px, 3.5vw, 48px); }
.c27-connection-inner .c27-eyebrow { color: var(--c27-soft-indigo); }
.c27-connection-inner > div:first-child > p:not(.c27-eyebrow) { max-width: 430px; margin-top: 22px !important; color: var(--c27-indigo); font-size: 1.125rem; line-height: 1.65; }
.c27-connection-inner .c27-button { margin-top: 25px; }
.c27-orbit { position: relative; isolation: isolate; width: 100%; height: 580px; perspective: 1100px; }
.c27-orbit-scene { position: absolute; inset: 0; transform-origin: center; }
.c27-orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.c27-atom-rings ellipse { fill: none; stroke: #a5aff51a; stroke-width: .14; }
.c27-atom-rings ellipse:first-child { stroke: #5bd6e81f; }
.c27-atom-rings .c27-atom-flow { stroke: var(--c27-cyan); stroke-width: .5; stroke-dasharray: 1.8 98.2; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 3px #5bd6e84d); }
.c27-atom-rings .c27-atom-flow:last-child { stroke: var(--c27-yellow); filter: drop-shadow(0 0 3px #ffd1664d); }
.c27-orbit-lines path { fill: none; stroke-width: .22; }
.c27-orbit-track-back { stroke: #a5aff53d; }
.c27-orbit-track-front { stroke: #5bd6e866; }
.c27-orbit-lines line { stroke: #a5aff533; stroke-width: .16; }
.c27-orbit-app { position: absolute; z-index: var(--orbit-layer, 2); left: var(--orbit-x); top: var(--orbit-y); width: 76px; height: 76px; opacity: var(--orbit-opacity, 1); transform: translate(-50%, -50%) scale(var(--orbit-scale, 1)); }
.c27-orbit-lift { display: block; width: 100%; height: 100%; }
.c27-orbit-tile { display: grid; place-items: center; width: 100%; height: 100%; padding: 8px; border: 1px solid #f2f4ff; border-radius: 13px; background: linear-gradient(145deg, #fff, #e8ecf7); box-shadow: 0 1px 0 #d9dfef, 0 2px 0 #cdd5e7, 0 3px 0 #c0cadd, 0 4px 0 #b4c0d6, 0 5px 0 #a7b5cd, 0 6px 0 #9baac5, 0 7px 0 #8e9fbc, 0 8px 0 #8193b3, 8px 20px 23px #04071580; transform: perspective(700px) rotateX(48deg) rotateZ(-28deg); }
.c27-orbit-app img { width: 100%; height: 100%; object-fit: contain; }
.c27-orbit-core { position: absolute; z-index: 10; left: 50%; top: 50%; width: 148px; height: 148px; transform: translate(-50%, -50%); }
.c27-orbit-core-surface { position: relative; width: 100%; height: 100%; border: 1px solid #dce2ff; border-radius: 50%; background: linear-gradient(145deg, #e0e5ff, #a5aff5); box-shadow: 0 2px 0 #9da9f0, 0 4px 0 #7d8bdf, 0 6px 0 #6b7ad5, 0 8px 0 #596ac4, 0 10px 0 #4f60b8, 0 12px 0 #4656aa, 0 14px 0 #3f4e9f, 0 16px 0 #38468f, 0 18px 0 #303d80, 0 20px 0 #2c3979, 0 22px 0 #27336d, 0 24px 0 #222e65, 12px 36px 35px #03061199; transform: perspective(700px) rotateX(48deg) rotateZ(-28deg); }
.c27-orbit-core-surface::after { content: ""; position: absolute; inset: 7px; border: 1px solid #a5aff57a; border-radius: 50%; pointer-events: none; }
.c27-switch-cap-hover { position: absolute; z-index: 2; left: 12%; top: 6%; width: 76%; height: 76%; }
.c27-switch-cap-pump { width: 100%; height: 100%; transform: translateY(-14px); }
.c27-switch-cap { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #fff, #eef0ff); box-shadow: 0 1px 0 #d7dcff, 0 3px 0 #bdc6ff, 0 5px 0 #a5aff5, 0 7px 0 #8997e1, 0 9px 0 #7080d0, 0 11px 0 #596bc0, 0 13px 0 #4b5eb0, 3px 19px 14px #17234d55; }
.c27-switch-cap::after { content: ""; position: absolute; inset: 5px; border: 1px solid #c7ceff; border-radius: 50%; pointer-events: none; }
.c27-orbit-core img { width: 68%; height: auto; max-height: 52%; object-fit: contain; }
.c27-orbit-halo { position: absolute; z-index: -1; inset: -9px; border: 2px solid var(--c27-cyan); border-radius: 50%; opacity: 0; }
.c27-orbit-pulse { position: absolute; z-index: 9; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; color: var(--c27-cyan); background: currentColor; box-shadow: 0 0 10px #5bd6e880; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.c27-orbit-pulse::after { content: ""; position: absolute; inset: -3px; border: 1px solid currentColor; border-radius: 50%; opacity: .4; }
.c27-orbit-pulse:nth-of-type(4n) { color: var(--c27-yellow); box-shadow: 0 0 10px #ffd16680; }
@media (min-width: 1200px) {
  .c27-connection-inner { width: min(1480px, calc(100% - 80px)); grid-template-columns: 460px minmax(0, 1fr); gap: 40px; min-height: 680px; }
  .c27-orbit { position: absolute; left: 480px; right: -40px; top: 50%; width: auto; height: 680px; transform: translateY(-50%); }
  .c27-orbit-app { width: 84px; height: 84px; }
  .c27-orbit-core { width: 164px; height: 164px; }
}
.c27-stories-section { position: relative; isolation: isolate; padding: 90px 0 65px; background: var(--c27-surface); border-block: 1px solid var(--c27-border); }
.c27-stories-section > .c27-container { position: relative; z-index: 1; }
.c27-stories-pixels { z-index: 0; inset: 0 0 auto; height: 340px; mask-image: radial-gradient(ellipse 28% 85% at 0% 20%, #000 5%, transparent 100%), radial-gradient(ellipse 28% 85% at 100% 35%, #000 5%, transparent 100%); }
.c27-stories-heading { gap: 30px; margin-bottom: 44px; }
.c27-stories-copy { min-width: 0; max-width: 760px; }
.c27-home .c27-stories-heading h2 { font-size: clamp(28px, 2.55vw, 38px); line-height: 1.25; letter-spacing: -.035em; text-wrap: pretty; }
.c27-stories-copy > p:not(.c27-eyebrow) { max-width: 680px; margin-top: 18px !important; color: var(--c27-secondary); font-size: 18px; line-height: 1.65; }
.c27-stories-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 12px; padding-bottom: 3px; }
.c27-stories-actions .c27-button { white-space: nowrap; }
.c27-featured-video { width: min(100%, 1000px); margin: 0 auto 48px !important; }
.c27-video-player { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; overflow: hidden; border: 1px solid var(--c27-border); border-radius: 14px; background: var(--c27-navy); }
.c27-video-player::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: .13; mix-blend-mode: soft-light; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.c27-video-player.is-watching::after { opacity: 0; }
.c27-video-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) sepia(.18) contrast(.95); transition: filter 200ms ease; }
.c27-video-trigger { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; }
.c27-video-trigger::before { content: ""; position: absolute; inset: 0; background: #10142640; opacity: 0; transition: opacity 200ms ease; }
.c27-video-play { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid #ffffffb3; border-radius: 50%; background: #fffffff0; color: var(--c27-primary); box-shadow: 0 4px 24px #10142626; transition: opacity 200ms ease, transform 200ms var(--c27-ease-out); }
.c27-video-play svg { margin-left: 3px; }
.c27-video-trigger:focus-visible { outline-offset: -7px; }
.c27-video-player:has(.c27-video-trigger:focus-visible) .c27-video-preview, .c27-video-player.is-ended .c27-video-preview { filter: blur(5px) saturate(.7) sepia(.18) contrast(.95); }
.c27-video-trigger:focus-visible::before { opacity: 1; }
.c27-video-full, .c27-video-full iframe, .c27-video-end { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; border: 0; }
.c27-video-end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 20px; background: #101426b3; color: #fff; text-align: center; }
.c27-video-end > p { font-size: clamp(20px, 2.5vw, 28px); letter-spacing: -.025em; }
.c27-video-player > [hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .c27-video-play { opacity: 0; transform: scale(.96); }
  .c27-video-player:has(.c27-video-trigger:hover) .c27-video-preview { filter: blur(5px) saturate(.7) sepia(.18) contrast(.95); }
  .c27-video-trigger:hover::before { opacity: 1; }
  .c27-video-trigger:is(:hover, :focus-visible) .c27-video-play { opacity: 1; transform: none; }
}
.c27-reviews { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--c27-border); }
.c27-review-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; align-items: stretch; overflow-x: auto; overscroll-behavior-y: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--c27-soft-indigo) transparent; }
.c27-review-track:focus-visible { outline: 3px solid var(--c27-primary); outline-offset: 5px; border-radius: 8px; }
.c27-reviews.is-enhanced .c27-review-track { grid-auto-flow: row; grid-auto-columns: auto; overflow: clip; scroll-snap-type: none; }
.c27-quote { display: grid; grid-template-rows: 20px 1fr auto; justify-items: center; gap: 24px; min-width: 0; padding: 12px 16px; text-align: center; scroll-snap-align: start; scroll-snap-stop: always; }
.c27-reviews.is-enhanced .c27-quote { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 500ms var(--c27-ease-out); }
.c27-reviews.is-enhanced .c27-quote.is-active { opacity: 1; pointer-events: auto; }
.c27-reviews.is-enhanced .c27-review-track:focus-within .c27-quote { transition: none; }
.c27-review-stars { display: flex; justify-content: center; gap: 5px; color: var(--c27-yellow); }
.c27-review-stars .c27-ui-icon { width: 20px; height: 20px; fill: currentColor; }
.c27-quote blockquote { align-self: center; max-width: 900px; font-size: clamp(26px, 3vw, 38px); line-height: 1.35; letter-spacing: -.035em; }
.c27-quote figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; text-align: left; }
.c27-quote figcaption img { flex: 0 0 48px; width: 48px; height: 48px; object-fit: cover; object-position: center 30%; border-radius: 50%; }
.c27-quote figcaption > span > * { display: block; }
.c27-quote figcaption strong { font-size: 16px; font-weight: 500; }
.c27-quote figcaption > span > span { color: var(--c27-secondary); font-size: 14px; }
.c27-workflow-section { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: 48px 64px; }
.c27-workflow-intro { grid-column: 1 / -1; width: min(100%, 780px); margin-inline: auto; text-align: center; }
.c27-workflow-label { display: block; margin-bottom: 20px !important; color: var(--c27-primary); }
.c27-home .c27-workflow-intro h2 { font-size: clamp(34px, 3.5vw, 46px); line-height: 1.12; }
.c27-workflow-intro > p:not(.c27-eyebrow) { max-width: 740px; margin: 18px auto 0 !important; color: var(--c27-secondary); font-size: 18px; line-height: 1.65; text-wrap: pretty; }
.c27-workflow-copy { min-width: 0; }
.c27-workflow-footer { grid-column: 1 / -1; justify-self: center; }
.c27-workflow-tabs { display: grid; gap: 12px; }
.c27-workflow-tab { position: relative; display: flex; align-items: flex-start; gap: 18px; min-width: 0; padding: 20px; overflow: hidden; border: 0; border-radius: 12px; background: #fff; color: var(--c27-secondary) !important; }
.c27-workflow-number { flex-shrink: 0; margin-top: 3px; font: 500 11px/1.8 var(--c27-mono); color: var(--c27-secondary); }
.c27-workflow-tab > span:nth-child(2) { min-width: 0; }
.c27-workflow-tab strong { display: block; color: var(--c27-navy); font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.c27-workflow-description { display: block; margin-top: 6px; font-size: 14px; line-height: 1.6; }
.c27-workflow-tab.is-active { background: var(--c27-background); color: var(--c27-navy) !important; }
.c27-workflow-tab.is-active .c27-workflow-number { color: var(--c27-hover); }
.c27-workflow-progress { position: absolute; inset: auto 20px 0; height: 2px; visibility: hidden; }
.is-enhanced .is-active .c27-workflow-progress { visibility: visible; }
.c27-workflow-progress > i { display: block; height: 100%; background: var(--c27-primary); transform: scaleX(0); transform-origin: left; }
.c27-workflow-panels { display: grid; gap: 20px; min-width: 0; margin-bottom: 0; }
.c27-workflow-panel { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 28px; min-height: 560px; padding: 64px 36px; scroll-margin-top: 100px; }
.c27-workflow-section.is-enhanced .c27-workflow-panel { grid-area: 1 / 1; }
.c27-workflow-panel:focus-visible { outline: 3px solid var(--c27-primary); outline-offset: 4px; }
.c27-workflow-caption { position: absolute; bottom: 26px; inset-inline: 20px; text-align: center; color: var(--c27-secondary); font-size: .75rem; }
.c27-workflow-apps { display: flex; align-items: center; justify-content: center; padding-inline: 34px; }
.c27-workflow-apps > span { display: grid; place-items: center; flex: 0 0 70px; height: 70px; border: 1px solid var(--c27-border); border-radius: 16px; background: #fff; }
.c27-workflow-wire { position: relative; flex: 1; height: 1px; background: var(--c27-border); }
.c27-workflow-wire > b { position: absolute; right: 8px; top: 0; transform: translateY(-50%); color: var(--c27-primary); font-size: 17px; font-weight: 400; }
.c27-workflow-wire > i { position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 2px; background: var(--c27-primary); opacity: 0; }
.c27-workflow-routine { display: grid; gap: 9px; padding: 20px; border: 1px dashed color-mix(in srgb, var(--c27-primary) 30%, white); border-radius: 16px; }
.c27-home .c27-workflow-routine h3 { margin-bottom: 8px; text-align: center; color: var(--c27-secondary); font-size: .8125rem; font-weight: 400; letter-spacing: 0; }
.c27-workflow-task { display: flex; align-items: center; gap: 13px; min-height: 62px; padding: 10px 14px; border: 1px solid var(--c27-border); border-radius: 10px; background: #fff; box-shadow: 0 2px 3px #10142603; }
.c27-workflow-task > b { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--c27-indigo); color: var(--c27-primary); font-size: 14px; font-weight: 500; }
.c27-workflow-task > span { min-width: 0; color: var(--c27-secondary); font-size: .6875rem; }
.c27-workflow-task strong { display: block; overflow-wrap: anywhere; color: var(--c27-navy); font-size: .875rem; font-weight: 500; }
.c27-workflow-task .c27-workflow-account-status { margin-left: auto; padding: 4px 7px; border: 1px solid #5bd6e84d; border-radius: 999px; color: #247d77; font-size: 11px; white-space: nowrap; }
.c27-home .c27-workflow-map-heading h3 { font-size: 22px; }
.c27-workflow-map-heading p { margin-top: 10px !important; color: var(--c27-secondary); font-size: 14px; }
.c27-workflow-map-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; color: var(--c27-secondary); font: 10px var(--c27-mono); text-transform: uppercase; }
.c27-workflow-map { display: grid; gap: 12px; }
.c27-workflow-map-row { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 12px; }
.c27-workflow-map-row > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 64px; padding: 12px; border: 1px solid var(--c27-border); border-radius: 8px; background: #fff; font-size: 14px; }
.c27-workflow-map-row > span:last-child { background: var(--c27-indigo); }
.c27-workflow-map-row > b { color: var(--c27-primary); text-align: center; }
.c27-workflow-map-check { display: inline-flex; flex-shrink: 0; color: var(--c27-hover); }
.c27-workflow-rule { padding: 24px; border: 1px solid var(--c27-border); border-radius: 14px; background: #fff; }
.c27-workflow-rule > span, .c27-workflow-schedule-head > span { color: var(--c27-secondary); font: 10px var(--c27-mono); letter-spacing: .04em; }
.c27-home .c27-workflow-rule h3 { margin-block: 12px; font-size: 20px; font-weight: 400; }
.c27-workflow-rule h3 b { padding: 4px 8px; border-radius: 5px; background: var(--c27-indigo); color: var(--c27-primary); font-weight: 500; }
.c27-workflow-filter-records { display: grid; gap: 6px; margin-top: 16px; }
.c27-workflow-filter-records > div { display: grid; grid-template-columns: 1fr auto 16px; align-items: center; gap: 10px; min-height: 34px; padding: 7px 10px; border: 1px solid var(--c27-border); border-radius: 6px; background: var(--c27-background); font-size: 12px; }
.c27-workflow-filter-records small { color: var(--c27-secondary); font-size: 10px; }
.c27-workflow-filter-records b { display: flex; color: #247d77; }
.c27-workflow-filter-records .is-excluded, .c27-workflow-filter-records .is-excluded b { color: var(--c27-secondary); }
.c27-workflow-segments { display: grid; gap: 10px; }
.c27-workflow-segments > div { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1.25fr); align-items: center; gap: 12px; }
.c27-workflow-chip { padding: 10px 12px; border: 1px solid var(--c27-border); border-radius: 8px; background: #fff; font-size: 13px; }
.c27-workflow-segments > div > span:nth-child(2) { text-align: center; color: var(--c27-primary); }
.c27-workflow-destination { position: relative; padding: 9px 26px 9px 10px; border: 1px solid var(--c27-border); border-radius: 8px; background: #fff; }
.c27-workflow-destination > small { display: block; color: var(--c27-secondary); font: 9px var(--c27-mono); text-transform: uppercase; }
.c27-workflow-destination > strong { font-size: .875rem; font-weight: 500; }
.c27-workflow-destination > b { position: absolute; right: 8px; top: 19px; color: var(--c27-primary); font-weight: 400; }
.c27-workflow-schedule-head { display: flex; align-items: center; gap: 25px; }
.c27-workflow-clock { flex: 0 0 96px; width: 96px; height: 96px; stroke: var(--c27-primary); stroke-width: 2; }
.c27-workflow-clock > circle:first-child { fill: #fff; stroke: var(--c27-border); }
.c27-workflow-clock-hand { transform-origin: 50px 50px; }
.c27-home .c27-workflow-schedule-head h3 { margin-top: 12px; font: 500 28px var(--c27-font); letter-spacing: -.03em; }
.c27-workflow-schedule-head p { margin-top: 5px !important; font: 12px/1.6 var(--c27-font); letter-spacing: 0; }
.c27-workflow-hours { position: relative; display: flex; justify-content: space-between; padding-top: 25px; }
.c27-workflow-hours::before { content: ""; position: absolute; top: 29px; left: 16px; right: 16px; height: 1px; background: var(--c27-border); }
.c27-workflow-hours > span { position: relative; display: grid; justify-items: center; gap: 13px; color: var(--c27-secondary); font: 11px var(--c27-mono); }
.c27-workflow-hours i { display: block; width: 10px; height: 10px; border: 2px solid var(--c27-primary); border-radius: 50%; background: #fff; }
.c27-workflow-complete { display: flex; align-items: center; gap: 13px; padding: 22px; border: 1px solid var(--c27-border); border-radius: 12px; background: #fff; }
.c27-workflow-complete > b { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--c27-indigo); color: var(--c27-primary); font-weight: 400; }
.c27-workflow-complete strong { display: block; font-size: .9375rem; font-weight: 500; }
.c27-workflow-complete small { display: block; margin-top: 4px; color: var(--c27-secondary); font-size: .6875rem; }
.c27-workflow-complete > span:last-child { margin-left: auto; text-align: right; color: var(--c27-secondary); font-size: .625rem; }
.c27-workflow-complete > span:last-child strong { margin-top: 4px; color: var(--c27-navy); font-size: .8125rem; }
.c27-faq-heading { max-width: 850px; margin: 0 auto 36px; text-align: center; }
.c27-home .c27-faq-heading h2 { font-size: clamp(2rem, 3.5vw, 2.875rem); font-weight: 700; }
.c27-faq-heading > p { max-width: 760px; margin: 24px auto 0 !important; color: var(--c27-secondary); font-size: 18px; line-height: 1.65; text-wrap: pretty; }
.c27-faq-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.c27-faq-filters button { padding: 14px var(--c27-button-padding); border: 1px solid var(--c27-border); border-radius: 8px; background: #fff; color: var(--c27-navy); transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.c27-faq-filters button[aria-pressed="true"] { border-color: var(--c27-soft-indigo); background: var(--c27-indigo); color: var(--c27-hover); }
@media (hover: hover) and (pointer: fine) {
  .c27-faq-filters button:hover { border-color: var(--c27-soft-indigo); background: var(--c27-background); color: var(--c27-hover); }
  .c27-faq-list summary:hover { color: var(--c27-hover); background: var(--c27-background); }
}
.c27-faq-list { border-top: 1px solid var(--c27-border); }
.c27-faq-list details { border-bottom: 1px solid var(--c27-border); }
.c27-faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 80px; padding: 24px 8px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 650; line-height: 1.45; }
.c27-faq-list summary::-webkit-details-marker { display: none; }
.c27-faq-list summary > span { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; color: var(--c27-primary); }
.c27-faq-list summary .c27-ui-icon { width: 21px; height: 21px; }
.c27-faq-list details[open] summary > span { transform: rotate(45deg); }
.c27-faq-answer { max-width: 900px; padding: 0 42px 25px 8px; color: var(--c27-secondary); font-size: 15px; line-height: 1.7; }
.c27-faq-answer a { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--c27-hover); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.c27-final-section { padding-bottom: 85px; }
.c27-final { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 480px; overflow: hidden; padding: 48px 64px; border-radius: 16px; background: var(--c27-navy); color: #fff; }
.c27-final-copy { position: relative; z-index: 2; width: min(900px, 100%); }
.c27-home .c27-final h2 { max-width: 900px; color: #fff; font-size: clamp(2.5rem, 4.8vw, 4.25rem); line-height: 1.08; letter-spacing: -.045em; text-wrap: initial; }
.c27-final-copy > p { max-width: 480px; margin-top: 28px !important; color: var(--c27-indigo); font-size: 20px; line-height: 1.65; }
.c27-final .c27-actions { gap: 28px; margin-top: 32px; }
.c27-final .c27-final-pixels { opacity: .8; mask-image: radial-gradient(ellipse 65% 100% at 95% 60%, #000 10%, transparent 95%), radial-gradient(ellipse 30% 50% at 0% 0%, #000, transparent); }
.c27-final-art { position: absolute; z-index: 1; right: -220px; top: 50%; width: 980px; height: 980px; transform: translateY(-50%); mask-image: linear-gradient(90deg, transparent, #000 32%); pointer-events: none; }
.c27-final-atom { display: block; width: 100%; height: 100%; }
.c27-final-orbit { color: var(--c27-soft-indigo); }
.c27-final-orbit:nth-child(2) { color: var(--c27-cyan); }
.c27-final-orbit:nth-child(3) { color: var(--c27-yellow); }
.c27-final-track { stroke: currentColor; stroke-width: 1.5; opacity: .3; vector-effect: non-scaling-stroke; }
.c27-final-particle { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: currentColor; color: var(--c27-soft-indigo); box-shadow: 0 0 9px currentColor; opacity: 0; will-change: transform; }
.c27-final-particle[data-orbit="1"] { color: var(--c27-cyan); }
.c27-final-particle[data-orbit="2"] { color: var(--c27-yellow); }
.c27-final-art.is-ready .c27-final-particle { opacity: 1; }
.c27-footer { overflow: hidden; padding-top: 0; background: var(--c27-surface); }
.c27-footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, .85fr) 1.6fr; align-items: start; gap: 28px 32px; padding: 44px 0 28px; border-top: 1px solid var(--c27-border); }
.c27-footer-brand { min-width: 0; }
.c27-footer-brand img { width: 190px; }
.c27-footer-brand p { color: var(--c27-secondary); font-size: 16px; line-height: 1.55; margin-top: 18px !important; margin-bottom: 14px !important; }
.c27-footer-brand .c27-text-link { min-height: 36px; color: var(--c27-secondary); font-size: 15px; }
.c27-footer-column { min-width: 0; }
.c27-home .c27-footer-column h2 { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.015em; margin-bottom: 14px; }
.c27-footer-column ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.c27-footer-column li { min-width: 0; margin: 0; }
.c27-footer-column a, .c27-footer-column li > span { display: flex; align-items: center; min-height: 36px; padding-block: 4px; font-size: 14px; line-height: 1.4; color: var(--c27-secondary); }
.c27-footer-compare ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.c27-footer-column a:hover { color: var(--c27-primary); }
.c27-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 0; border-top: 1px solid var(--c27-border); font-size: 13px; line-height: 1.5; color: var(--c27-secondary); }
.c27-footer-bottom > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.c27-footer-bottom a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.c27-footer-bottom a:hover { color: var(--c27-primary); }
.c27-wordmark { position: relative; width: calc(100% - clamp(24px, 4vw, 64px)); margin: 14px auto 0; container-type: inline-size; color: #c3c9f5; font-weight: 650; line-height: 1; text-align: center; user-select: none; }
.c27-wordmark-name { display: block; font-size: 20vw; font-size: 22.5cqw; line-height: .9; letter-spacing: -.065em; mask-image: linear-gradient(#000 45%, transparent 100%); }
.c27-wordmark > sup { position: absolute; top: 12%; right: -8px; font: 12px/1 var(--c27-font); color: var(--c27-soft-indigo); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .c27-wordmark-name { background: linear-gradient(90deg, transparent 2px, #fff 2px) 0 0 / 3px 3px, linear-gradient(transparent 2px, #fff 2px) 0 0 / 3px 3px, #a5aff5; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
@media (max-width: 1000px) {
  .c27-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
  .c27-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .c27-footer-grid { gap: 24px; padding-top: 32px; }
  .c27-footer-cazoomi, .c27-footer-compare { grid-column: 1 / -1; }
  .c27-footer-cazoomi ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .c27-footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
  .c27-wordmark { margin-top: 8px; }
}

.c27-not-found-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 80px; }
.c27-not-found-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px; min-height: 360px; }
.c27-not-found h1 { font-size: var(--c27-hero-title-size); line-height: 1.1; letter-spacing: -.025em; }
.c27-not-found .c27-not-found-lede { max-width: 44ch; margin-top: 24px; color: var(--c27-secondary); font-size: var(--c27-hero-description-size); line-height: 1.7; }
.c27-not-found-code { font-size: clamp(128px, 22vw, 300px); line-height: 1; letter-spacing: -.075em; text-align: center; user-select: none; }
.c27-not-found-help { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-block: 24px; border-top: 1px solid var(--c27-border); }
.c27-not-found-help p { margin-right: auto; color: var(--c27-secondary); font-size: 15px; }
.c27-not-found-help a { color: var(--c27-primary); }
@media (max-width: 760px) {
  .c27-not-found-hero { padding-block: 40px; }
  .c27-not-found-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; }
  .c27-not-found-code { font-size: clamp(128px, 35vw, 220px); }
  .c27-not-found-help { gap: 8px 24px; }
  .c27-not-found-help p { width: 100%; }
}

/* Existing product templates retain their scripts and markup, with the new tokens. */
body.c27-legacy { --sa-navy-950: var(--c27-navy); --sa-navy-900: var(--c27-navy); --sa-purple-700: var(--c27-hover); --sa-purple-600: var(--c27-primary); --sa-purple-500: var(--c27-primary); --sa-violet-500: var(--c27-primary); --sa-magenta-500: var(--c27-hover); --sa-coral-500: var(--c27-primary); --sa-coral-600: var(--c27-hover); --sa-surface: var(--c27-background); --sa-lavender-50: var(--c27-background); --sa-lavender-100: var(--c27-indigo); --sa-text: var(--c27-navy); --sa-text-muted: var(--c27-secondary); --sa-border: var(--c27-border); --sa-success: var(--c27-navy); --sa-shadow-card: none; font-family: var(--c27-font); color: var(--c27-navy); background: var(--c27-background); }
.c27-legacy :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea) { font-family: var(--c27-font); }
.c27-legacy :is(h1, h2, h3) { letter-spacing: -.035em; }
.c27-legacy .sa-nav { box-shadow: none; border-bottom: 1px solid var(--c27-border); }
.c27-legacy .sa-nav, .c27-legacy .sa-page { font-family: var(--c27-font); }
.c27-legacy .sa-nav__inner { max-width: 1200px; }
.c27-legacy .sa-nav__brand img { max-width: 160px; }
.c27-legacy .sa-nav__link { font-size: 13px; }
.c27-legacy :is(.sa-nav__cta, .sa-button--primary, .btn-brand, .bg-brand) { background: var(--c27-primary); border-color: var(--c27-primary); }
.c27-legacy :is(.sa-nav__cta, .sa-button--primary, .btn-brand):hover { background: var(--c27-hover); border-color: var(--c27-hover); }
.c27-legacy :is(.sa-nav__cta, .sa-button) { border-radius: 6px; }
.c27-legacy :is(.sa-card, .sa-story-card) { box-shadow: none; border-color: var(--c27-border); border-radius: 8px; }
.c27-legacy .sa-section--lavender { background: var(--c27-indigo); }
.c27-legacy :is(a, button, summary):focus-visible { outline: 3px solid var(--c27-primary); outline-offset: 4px; }

@media (min-width: 1001px) {
  .c27-menu-toggle { display: none; }
  .c27-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .c27-nav > .c27-brand { justify-self: start; min-width: 0; max-width: 100%; }
  .c27-nav-menu { display: contents; }
  .c27-nav-links { justify-self: center; }
  .c27-nav-actions { justify-self: end; justify-content: flex-end; flex-wrap: wrap; max-width: 100%; }
}
@media (max-width: 1100px) {
  .c27-container { width: calc(100% - 56px); }
  .c27-nav { gap: 30px; }
  .c27-nav-links { gap: 18px; }
  .c27-nav-actions { gap: 18px; }
  .c27-hero { padding-top: 67px; }
  .c27-app { grid-template-columns: 150px minmax(0, 1fr); }
  .c27-app-content { padding-inline: 22px; }
  .c27-connection-inner { grid-template-columns: 1fr; gap: 28px; }
  .c27-orbit { width: min(100%, 900px); height: min(74vw, 620px); margin-inline: auto; }
  .c27-trust { gap: 28px; }
  .c27-feature-section .c27-section-heading { display: block; }
  .c27-feature-section .c27-section-heading > p { max-width: 520px; margin-top: 22px !important; }
}
@media (max-width: 1000px) {
  .c27-workflow-section { grid-template-columns: 1fr; gap: 34px; }
  .c27-workflow-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c27-workflow-tab { flex-direction: column; gap: 10px; padding: 18px; }
  .c27-hero .c27-actions { grid-template-columns: minmax(0, 580px); }
  .c27-hero .c27-hero-tour { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 8px; }
  .c27-header { max-height: 100svh; overflow-y: auto; overscroll-behavior-y: contain; }
  .c27-nav { flex-wrap: wrap; min-height: 76px; justify-content: space-between; gap: 0; padding-block: 18px; }
  .c27-nav.is-enhanced { position: relative; }
  .c27-nav-menu { flex-basis: 100%; padding-top: 24px; }
  .c27-js .c27-nav-menu:not(.is-open), .c27-nav.is-enhanced .c27-nav-menu:not(.is-open) { display: none; }
  .c27-nav-links { flex-wrap: wrap; }
  .c27-feature-grid { gap: 20px; }
  .c27-feature h3 { font-size: 18px; }
  .c27-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c27-section-heading > p { max-width: 270px; }
  .c27-orbit-app { width: 64px; height: 64px; }
  .c27-orbit-core { width: 124px; height: 124px; }
  .c27-stories-heading { flex-direction: column; align-items: flex-start; gap: 22px; }
  .c27-final-art { right: -280px; }
}
@media (max-width: 760px) {
  .c27-workflow-tabs { gap: 8px; }
  .c27-workflow-tab { padding: 14px; }
  .c27-workflow-tab strong { font-size: 16px; }
  .c27-workflow-description { font-size: 13px; }
  .c27-workflow-progress { inset-inline: 14px; }
  .c27-workflow-panel { min-height: 560px; padding: 62px 18px; gap: 24px; }
  .c27-workflow-routine { padding: 14px; }
  .c27-workflow-apps { padding-inline: 16px; }
  .c27-workflow-apps > span { flex-basis: 60px; height: 60px; }
  .c27-workflow-task { gap: 9px; padding-inline: 9px; }
  .c27-workflow-task strong { font-size: .8125rem; }
  .c27-workflow-rule { padding: 20px; }
  .c27-home .c27-workflow-rule h3 { font-size: 20px; }
  .c27-workflow-segments > div { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1.25fr); gap: 8px; }
  .c27-workflow-chip { padding: 12px 8px; font-size: .75rem; }
  .c27-workflow-destination { padding-left: 9px; padding-right: 23px; }
  .c27-workflow-destination > strong { font-size: .75rem; }
  .c27-workflow-destination > b { right: 7px; }
  .c27-workflow-chip { padding: 10px 8px; font-size: 12px; }
  .c27-workflow-destination > strong { font-size: 12px; }
  .c27-workflow-map-row > span { padding: 10px 8px; font-size: 12px; }
  .c27-workflow-schedule-head { gap: 16px; }
  .c27-workflow-clock { flex-basis: 78px; width: 78px; height: 78px; }
  .c27-home .c27-workflow-schedule-head h3 { font-size: 24px; }
  .c27-workflow-complete { gap: 9px; padding: 16px 12px; }
  .c27-workflow-complete strong { font-size: .8125rem; }
  .c27-container { width: calc(100% - 36px); }
  .c27-nav-menu { flex-direction: column; align-items: stretch; gap: 23px; padding-bottom: 7px; }
  .c27-nav-links { flex-direction: column; align-items: flex-start; gap: 0; }
  .c27-nav-links a { padding-block: 10px; width: 100%; font-size: 14px; }
  .c27-nav-actions { justify-content: space-between; padding-top: 17px; border-top: 1px solid var(--c27-border); }
  .c27-nav-actions > a:first-child { font-size: 14px; }
  .c27-brand img { width: 145px; }
  .c27-hero { padding-top: 56px; padding-bottom: 60px; }
  :root { --c27-hero-title-size: clamp(2.375rem, 12vw, 2.875rem); }
  .c27-hero h1 { letter-spacing: -.04em; }
  .c27-hero .c27-actions { margin-top: 28px; }
  .c27-eyebrow { font-size: 9px; margin-bottom: 18px !important; }
  .c27-lede { font-size: var(--c27-hero-description-size); max-width: 470px; margin-top: 1.5rem !important; }
  .c27-pixels { mask-image: radial-gradient(ellipse 65% 65% at 100% 0%, #000 0%, transparent 100%); opacity: .65; }
  .c27-desktop-break { display: none; }
  .c27-app { display: block; }
  .c27-app-sidebar { display: none; }
  .c27-app-topbar { padding: 12px 16px; }
  .c27-app-content { padding: 20px 17px 12px; }
  .c27-home .c27-app-heading h2 { font-size: 1.375rem; }
  .c27-app-footnote { padding: 12px 17px; }
  .c27-sticky-trust .c27-logo-strip > p { display: none; }
  .c27-trust { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 28px; padding-block: 24px; }
  .c27-logo-group { gap: 32px; padding-right: 32px; }
  .c27-logo-group img { flex-basis: 112px; width: 112px; height: 32px; }
  .c27-section { padding-block: 65px; }
  .c27-home h2 { font-size: clamp(32px, 6vw, 42px); }
  .c27-section-heading { display: block; margin-bottom: 30px; }
  .c27-feature-section h2 { white-space: normal; }
  .c27-section-heading > p { max-width: 100%; margin-top: 20px !important; font-size: 14px; }
  .c27-section-heading > .c27-text-link { margin-top: 20px; }
  .c27-text-link { font-size: .875rem; }
  .c27-feature-grid { grid-template-columns: 1fr; gap: 37px; }
  .c27-feature-surface { padding: 18px 18px 0; }
  .c27-feature-visual { height: 185px; }
  .c27-feature h3 { font-size: 22px; }
  .c27-feature > p { max-width: 100%; font-size: 14px; }
  .c27-connection-section { padding-block: 60px; }
  .c27-connection-inner { grid-template-columns: 1fr; gap: 24px; }
  .c27-orbit { height: min(112vw, 480px); min-height: 370px; }
  .c27-orbit-app { width: 60px; height: 60px; }
  .c27-orbit-tile { padding: 7px; border-radius: 11px; }
  .c27-orbit-core { width: 104px; height: 104px; }
  .c27-stories-section { padding-block: 65px 50px; }
  .c27-stories-actions { margin-top: 22px; }
  .c27-video-play { width: 56px; height: 56px; }
  .c27-video-play svg { width: 23px; height: 23px; }
  .c27-reviews { margin-top: 32px; padding-top: 32px; }
  .c27-quote { padding-inline: 4px; }
  .c27-quote blockquote { font-size: 26px; }
  .c27-faq-heading { margin-bottom: 28px; }
  .c27-faq-heading > p { margin-top: 20px !important; font-size: 16px; }
  .c27-faq-filters { gap: 8px; margin-bottom: 30px; }
  .c27-faq-list summary { min-height: 76px; gap: 16px; padding: 21px 2px; font-size: 16px; }
  .c27-faq-answer { padding: 0 32px 22px 2px; font-size: 14px; }
  .c27-final-section { padding-bottom: 55px; }
  .c27-final { display: block; min-height: 640px; padding: 36px 28px 160px; }
  .c27-home .c27-final h2 { font-size: clamp(2.25rem, 7vw, 3rem); }
  .c27-final-copy > p { margin-top: 24px !important; font-size: 18px; }
  .c27-final .c27-actions { gap: 20px; margin-top: 28px; }
  .c27-final-art { width: 720px; height: 720px; top: auto; bottom: -200px; right: -210px; transform: none; mask-image: linear-gradient(180deg, transparent, #000 30%); }
}
@media (max-width: 380px) {
  .c27-container { width: calc(100% - 32px); }
  .c27-avatar { display: none; }
  .c27-orbit { min-height: 350px; }
  .c27-orbit-app { width: 56px; height: 56px; }
  .c27-orbit-tile { padding: 6px; }
  .c27-orbit-core { width: 96px; height: 96px; }
  .c27-final { padding-inline: 23px; }
}
@media (max-width: 600px) {
  .c27-home .c27-signup { flex-direction: column; align-items: stretch; }
  .c27-signup input { flex: auto; min-height: 52px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .c27-final-art.is-ready .c27-final-particle { opacity: 0; }
  .c27-logo-strip.is-enhanced .c27-logo-window { overflow-x: auto; mask-image: none; }
  .c27-sticky-trust .c27-logo-strip .c27-logo-window { overflow: hidden; mask-image: none; }
  .c27-logo-strip.is-enhanced .c27-logo-group[aria-hidden="true"] { display: none; }
  .c27-home *, .c27-home *::before, .c27-home *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .c27-home :is(.c27-button, .c27-hero-tour, .c27-menu-toggle):active:not(:focus-visible) { transform: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .c27-header { background: var(--c27-surface); backdrop-filter: none; border-bottom-color: var(--c27-border); }
}
@media (prefers-contrast: more), (forced-colors: active) {
  .c27-header { border-bottom-color: currentColor; }
  .c27-hero h1 > span { background: none; color: var(--c27-primary); -webkit-text-fill-color: currentColor; }
  .c27-feature-pixel-title { background: none; color: var(--c27-primary); -webkit-text-fill-color: currentColor; }
  .c27-pixels { display: none !important; }
}