.root {
  --blue:#2468d8;
  --carbon:#18181b;
  --steel:#5e616e;
  --bone:#e4e4e7;
  --frost:#f3f8ff;
  background:#fff;
  color:var(--carbon);
  font-family:var(--v3-sans),Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.01em;
  overflow:clip}

.root * {
  box-sizing:border-box}
.root h1,.root h2,.root h3,.root p {
  margin:0}
.root h2 {
  font-size:clamp(30px,3.5vw,44px);
  font-weight:500;
  line-height:1.13;
  letter-spacing:-.035em;
  text-wrap:balance}
.root h3 {
  font-size:19px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.02em}
.root p {
  color:var(--steel)}
.root a {
  text-underline-offset:4px}
.root a,.root button,.root summary {
  touch-action:manipulation}
.root button {
  cursor:pointer}
.root :focus-visible {
  outline:3px solid #2468d8;
  outline-offset:5px}
.root ::selection {
  background:#cce0ff;
  color:#022c70}
.root [id] {
  scroll-margin-top:30px}
.container {
  max-width:1160px;
  margin:0 auto;
  padding-inline:32px}
.skip {
  position:fixed;
  left:20px;
  top:16px;
  z-index:20;
  transform:translateY(-170%);
  background:#fff;
  color:#18181b;
  padding:12px 18px}
.skip:focus {
  transform:none}

.heroScene {
  position:relative;
  isolation:isolate;
  min-height:875px;
  background:#286298;
  color:#fff}
.landscape {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 64%;
  z-index:-2}
.heroShade {
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(5,36,80,.46),rgba(8,37,78,.2) 48%,rgba(243,248,255,.04) 77%,#fff 100%)}
.header {
  height:92px;
  max-width:1280px;
  padding:0 48px;
  display:flex;
  gap:40px;
  align-items:center;
  margin:auto}
.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:21px;
  font-weight:600;
  letter-spacing:-.04em;
  text-decoration:none;
  white-space:nowrap}
.nav {
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:25px;
  font-size:14px}
.nav a,.headerActions a {
  text-decoration:none}
.nav a:hover,.headerActions>a:first-child:hover {
  text-decoration:underline}
.headerActions {
  display:flex;
  gap:22px;
  align-items:center;
  margin-left:auto;
  font-size:14px}
.navCta {
  padding:9px 16px;
  border:1px solid #ffffff80;
  border-radius:4px;
  min-height:42px;
  display:flex;
  align-items:center}
.navCta:hover {
  background:#ffffff20}
.hero {
  text-align:center;
  max-width:870px;
  padding:50px 24px 250px;
  margin:auto}
.hero h1 {
  font-family:var(--v3-display),Georgia,serif;
  font-weight:500;
  font-size:clamp(48px,6.3vw,80px);
  line-height:1.03;
  letter-spacing:-.012em;
  text-wrap:balance}
.hero>p {
  max-width:570px;
  margin:28px auto 0;
  color:#fff;
  font-size:18px;
  line-height:1.55;
  text-wrap:balance}
.heroActions {
  display:flex;
  justify-content:center;
  gap:25px;
  align-items:center;
  margin-top:30px}
.primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:12px 21px;
  min-height:48px;
  border-radius:4px;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  box-shadow:inset 0 1px 0 #81b6ff,inset 0 -1px 0 #022c70;
  transition:background .18s ease}
.primary:hover {
  background:#1455be}
.heroSecondary {
  font-size:14px;
  color:#fff;
  text-decoration:underline}
.hero>small {
  display:block;
  margin-top:17px;
  color:#fff;
  font-size:12px}
.heroScene :focus-visible {
  outline-color:#fff}

.demoWrap {
  position:relative;
  margin-top:-307px}
.product {
  background:#171b24;
  color:#f3f5fa;
  border-radius:16px;
  box-shadow:0 24px 55px -24px #1b356e60;
  overflow:hidden;
  border:1px solid #ffffff25}
.productBar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 25px;
  border-bottom:1px solid #ffffff15;
  font-size:11px;
  color:#adb8cb}
.productBrand {
  color:#f3f5fa;
  font-size:14px;
  font-weight:500}
.productBrand>span {
  margin-left:8px;
  color:#adb8cb;
  font-size:12px;
  font-weight:400}
.demoControls {
  display:flex;
  padding:18px 25px 0;
  gap:8px}
.demoControls button {
  display:flex;
  align-items:center;
  gap:8px;
  color:#b9c3d5;
  background:transparent;
  border:1px solid transparent;
  border-radius:5px;
  padding:8px 12px;
  min-height:43px;
  font-size:13px;
  transition:background .15s}
.demoControls button>span {
  display:grid;
  place-items:center;
  border:1px solid #697589;
  width:22px;
  height:22px;
  border-radius:50%;
  font-size:11px}
.demoControls button[aria-pressed=true] {
  background:#ffffff10;
  color:#fff;
  border-color:#ffffff15}
.demoControls button[aria-pressed=true]>span {
  background:#9ac3ff;
  color:#102741;
  border-color:#9ac3ff}
.demoControls button:hover {
  background:#ffffff12}
.product :focus-visible {
  outline-color:#8abcff}
.demoBody {
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);
  padding:27px 36px 28px;
  gap:40px;
  min-height:310px}
.demoDocument {
  animation:documentIn .25s ease-out}
.demoDocument h2 {
  font-size:20px;
  letter-spacing:-.025em;
  margin-bottom:24px;
  color:#f4f6fb}
.demoDocument p {
  font-size:16px;
  line-height:1.95;
  color:#d4dceb}
.demoDocument p+p {
  margin-top:14px}
.demoDocument mark {
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  border-radius:3px;
  padding:2px 3px;
  overflow-wrap:anywhere}
.original {
  background:#303e56;
  color:#e6eeff}
.token {
  background:#253d61;
  color:#b3d3ff;
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:.8em}
.demoSidebar {
  padding-left:27px;
  border-left:1px solid #ffffff15}
.demoStatus {
  color:#b7d4ff;
  font-size:12px}
.demoSidebar dl {
  margin:16px 0}
.demoSidebar dl>div {
  margin-bottom:13px}
.demoSidebar dt {
  font-size:11px;
  color:#9daac0}
.demoSidebar dd {
  margin:2px 0 0;
  font-size:12px;
  color:#e4eaf5;
  overflow-wrap:anywhere}
.demoSidebar>p {
  color:#a9b8ce;
  font-size:11px;
  line-height:1.6;
  max-width:30ch}
.demoFoot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:15px 25px;
  background:#1c222e;
  border-top:1px solid #ffffff0e;
  font-size:11px;
  color:#aebbd0}
.demoFoot button {
  padding:9px 13px;
  min-height:42px;
  border:1px solid #6399ef60;
  color:#c4dcff;
  background:#254471;
  border-radius:4px;
  font-size:12px}
.demoFoot button:hover {
  background:#315789}
@keyframes documentIn {
  from {
  opacity:.6;
  transform:translateY(5px)}
to {
  opacity:1;
  transform:translateY(0)}
}

.tools {
  text-align:center;
  padding-top:40px;
  padding-bottom:76px}
.tools p {
  font-size:13px}
.tools>div {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:54px;
  margin:20px 0 12px;
  color:#434857;
  font-size:22px;
  font-weight:500;
  letter-spacing:-.04em}
.tools small {
  font-size:11px;
  color:#666d7a}
.workflow {
  padding-top:56px;
  padding-bottom:85px;
  border-top:1px solid var(--bone)}
.workflow>h2 {
  text-align:center}
.workflow ol {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  list-style:none;
  padding:0;
  margin:48px 0 0}
.stepNumber {
  display:grid;
  place-items:center;
  border:1px solid #c6d9f9;
  background:var(--frost);
  color:#2468d8;
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:14px;
  margin-bottom:20px;
  font-variant-numeric:tabular-nums}
.workflow h3 {
  max-width:25ch;
  margin-bottom:14px}
.workflow p {
  font-size:14px;
  line-height:1.75}
.sectionHeading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:38px}
.sectionHeading>p {
  max-width:340px;
  font-size:15px;
  line-height:1.7}
.dataSection {
  padding-top:30px;
  padding-bottom:90px}
.dataLayout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:start}
.dataVisual {
  background:var(--frost);
  border-radius:16px;
  padding:28px}
.fileTab {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#33465d;
  padding-bottom:18px;
  border-bottom:1px solid #d8e5f7}
.fileTab>span {
  color:#5e6d83;
  font-size:11px}
.codePreview {
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:13px;
  padding:27px 0}
.codePreview>span {
  font-size:11px;
  color:#5d6b80}
.codePreview>p {
  color:#263951;
  margin:14px 0 7px}
.codePreview mark {
  display:inline-block;
  background:#dbeaff;
  color:#1e549e;
  overflow-wrap:anywhere;
  padding:5px 8px;
  border-radius:3px;
  max-width:100%}
.root .visualCaption {
  color:#25354a;
  font-size:14px;
  margin-bottom:25px}
.vendorGrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px 16px;
  border-top:1px solid #d8e5f7;
  padding-top:22px;
  font-size:12px;
  color:#324963}
.root .small {
  font-size:11px;
  margin-top:24px;
  line-height:1.65}
.root details {
  border-bottom:1px solid var(--bone)}
.root summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  list-style:none;
  padding:21px 0;
  font-size:16px;
  line-height:1.4;
  color:#232630}
.root summary::-webkit-details-marker {
  display:none}
.root summary:hover {
  color:var(--blue)}
.root summary small {
  display:block;
  color:#656e7d;
  font-size:11px;
  margin-top:7px}
.plus {
  font-size:22px;
  font-weight:300;
  flex-shrink:0}
.root details[open] .plus {
  transform:rotate(45deg)}
.root details>p {
  font-size:13px;
  margin:0 0 16px;
  line-height:1.75}
.sectionNote {
  font-size:12px;
  line-height:1.8;
  margin-top:28px!important;
  max-width:90ch}
.sectionNote a {
  white-space:normal;
  color:#275aaf}
.filesBand {
  background:#f7f9fc;
  padding:75px 0}
.filesLayout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:65px;
  align-items:center}
.filesLayout h2 {
  max-width:400px}
.filesLayout p {
  font-size:15px;
  margin:21px 0 24px;
  max-width:38ch}
.textLink {
  display:inline-block;
  color:#245cb4;
  font-size:13px;
  font-weight:500;
  text-decoration:none}
.textLink:hover {
  text-decoration:underline}
.fileCards {
  display:flex;
  justify-content:center;
  padding:18px 0 26px}
.fileCards>div {
  width:104px;
  height:147px;
  background:#fff;
  border:1px solid #d6deeb;
  border-radius:7px;
  padding:17px;
  color:#5275a9;
  margin-left:-8px;
  transition:transform .2s}
.fileCards strong {
  font-size:12px;
  display:block;
  margin:9px 0 12px;
  font-weight:500}
.fileCards i {
  display:block;
  height:2px;
  background:#dce4f0;
  margin-top:6px}
.fileCards i:last-child {
  width:60%}
.filesLayout .fileFormats {
  font-size:11px;
  text-align:center;
  max-width:none;
  margin:0}
.fileDetails {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:55px;
  row-gap:24px;
  margin-top:48px}
.fileDetails h3 {
  font-size:16px;
  margin-bottom:12px}
.fileDetails p {
  font-size:13px}
.fileDetails>details {
  grid-column:1/-1}
.fileDetails summary {
  font-size:13px}
.fileDetails summary::after,.retention summary::after {
  content:'+';
  font-size:20px}
.fileDetails details[open] summary::after,.retention details[open] summary::after {
  content:'−'}
.privacy {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  padding-top:100px;
  padding-bottom:95px;
  align-items:center}
.privacy>div>p {
  margin:24px 0;
  font-size:15px;
  max-width:42ch}
.retention {
  background:var(--frost);
  border-radius:16px;
  padding:32px}
.retention>span {
  font-size:12px;
  color:#47617f}
.retention>strong {
  display:block;
  color:#234d87;
  font-size:66px;
  line-height:1.15;
  font-weight:400;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  margin:7px 0 25px}
.timeline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  position:relative;
  padding-top:15px;
  border-top:1px solid #b8cfea}
.timeline span {
  font-size:11px;
  color:#415c7f;
  position:relative}
.timeline span::before {
  content:'';
  width:6px;
  height:6px;
  background:#5089d3;
  border-radius:50%;
  position:absolute;
  top:-19px;
  left:0}
.timeline span:last-child::before {
  left:auto;
  right:0}
.privacy .retention>p {
  font-size:12px;
  line-height:1.8;
  margin:25px 0 0}
.retention summary {
  font-size:12px;
  padding-bottom:12px}
.retention details>p {
  font-size:12px}
.api {
  border-top:1px solid var(--bone);
  padding-top:65px;
  padding-bottom:75px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 80px}
.api h2 {
  font-size:32px;
  max-width:380px}
.api>div>p {
  font-size:14px;
  margin:20px 0}
.apiVisual {
  padding:26px;
  background:#181d27;
  color:#d6e0f1;
  border-radius:12px;
  align-self:center}
.apiVisual>div {
  display:flex;
  gap:20px;
  color:#c2d8ff;
  font-size:12px;
  padding-bottom:23px}
.apiVisual code {
  display:block;
  font-size:12px;
  line-height:2;
  overflow-wrap:anywhere}
.apiVisual em {
  font-style:normal;
  color:#b3cefb}
.api .apiVisual>p {
  font-size:10px;
  color:#aab8cf;
  margin:20px 0 0}
.root .apiNote {
  grid-column:1/-1;
  font-size:12px;
  color:#616977}
.faq {
  padding-top:60px;
  padding-bottom:75px;
  border-top:1px solid var(--bone);
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px}
.faq h2 {
  max-width:300px}
.faq>div>p {
  font-size:14px;
  margin-top:22px;
  max-width:28ch}
.faq summary {
  font-size:14px;
  padding-block:22px}
.closing {
  padding-block:64px 75px;
  text-align:center;
  background:var(--frost);
  border-radius:16px}
.closing h2 {
  max-width:640px;
  margin-inline:auto}
.closing p {
  font-size:15px;
  margin:20px 0 28px}
.footer {
  display:grid;
  grid-template-columns:1.4fr repeat(2,1fr);
  gap:40px;
  padding-top:72px;
  padding-bottom:28px}
.footer>div>p {
  font-size:12px;
  max-width:26ch;
  margin-top:15px}
.footer nav {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:12px}
.footer nav h2 {
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  margin:0 0 6px}
.footer nav a {
  font-size:12px;
  color:#616674;
  text-decoration:none}
.footer nav a:hover {
  text-decoration:underline}
.footer>small {
  grid-column:1/-1;
  border-top:1px solid var(--bone);
  padding-top:24px;
  font-size:10px;
  color:#717683}

@media(min-width:1500px) {
  .heroScene {
  min-height:925px}
.hero {
  padding-top:65px}
.demoWrap {
  margin-top:-340px}
}

@media(max-width:1000px) {
  .header {
  padding-inline:28px;
  gap:20px}
.nav {
  gap:18px;
  margin-left:10px}
.nav a {
  font-size:12px}
.headerActions {
  gap:15px}
.privacy {
  gap:50px}
.dataLayout {
  gap:30px}
.workflow ol {
  gap:28px}
.api {
  gap:24px 40px}
.footer {
  gap:28px}
.demoBody {
  gap:25px;
  padding-inline:27px}
.heroScene {
  min-height:830px}
.demoWrap {
  margin-top:-275px}
.hero {
  padding-top:45px}
}

@media(max-width:760px) {
  .container {
  padding-inline:24px}
.header {
  height:76px;
  padding:0 22px}
.brand {
  font-size:18px}
.brand svg {
  width:23px}
.nav {
  display:none}
.headerActions {
  font-size:12px;
  gap:14px}
.navCta {
  padding:8px 12px;
  min-height:38px}
.heroScene {
  min-height:725px}
.hero {
  padding:40px 24px 200px}
.hero h1 {
  font-size:clamp(44px,7.8vw,60px)}
.hero>p {
  font-size:16px;
  max-width:440px;
  margin-top:24px}
.heroActions {
  gap:20px;
  margin-top:25px}
.hero>small {
  font-size:10px;
  margin-top:18px}
.demoWrap {
  margin-top:-225px}
.demoBody {
  grid-template-columns:1fr;
  gap:0;
  padding:25px;
  min-height:290px}
.demoSidebar {
  display:none}
.demoControls {
  padding:17px 17px 0;
  gap:2px}
.demoControls button {
  padding:7px 8px;
  font-size:11px;
  gap:6px;
  flex:1;
  justify-content:center}
.demoControls button>span {
  width:20px;
  height:20px;
  flex-shrink:0}
.demoDocument h2 {
  font-size:19px}
.demoDocument p {
  font-size:14px}
.demoFoot {
  padding:15px 20px}
.demoFoot>span {
  max-width:23ch;
  font-size:10px}
.demoFoot button {
  font-size:11px;
  max-width:180px}
.productBar {
  padding:17px 20px;
  font-size:10px}
.productBrand {
  font-size:12px}
.productBrand>span {
  display:none}
.tools {
  padding-top:30px;
  padding-bottom:48px}
.tools>div {
  gap:28px;
  font-size:19px}
.tools p {
  font-size:12px}
.tools small {
  font-size:10px}
.workflow {
  padding-top:44px;
  padding-bottom:60px}
.workflow ol {
  grid-template-columns:1fr;
  gap:28px;
  margin-top:35px}
.workflow li {
  display:grid;
  grid-template-columns:34px 1fr;
  column-gap:18px}
.stepNumber {
  grid-row:1/3;
  margin:0}
.workflow h3 {
  max-width:none;
  font-size:17px}
.workflow p {
  font-size:13px}
.sectionHeading {
  display:block;
  margin-bottom:28px}
.sectionHeading>p {
  margin-top:20px;
  max-width:45ch;
  font-size:14px}
.dataLayout {
  grid-template-columns:1fr;
  gap:20px}
.dataVisual {
  padding:25px}
.vendorGrid {
  grid-template-columns:repeat(2,1fr)}
.root summary {
  font-size:15px}
.dataSection {
  padding-top:16px;
  padding-bottom:55px}
.filesBand {
  padding:50px 0}
.filesLayout {
  grid-template-columns:1fr;
  gap:28px}
.filesLayout p {
  font-size:14px;
  max-width:42ch}
.fileCards {
  justify-content:center}
.fileDetails {
  grid-template-columns:1fr;
  margin-top:34px;
  gap:24px}
.privacy {
  grid-template-columns:1fr;
  gap:32px;
  padding-block:60px}
.privacy>div>p {
  font-size:14px;
  margin:20px 0}
.retention {
  padding:26px}
.api {
  grid-template-columns:1fr;
  padding-top:45px;
  padding-bottom:50px;
  gap:28px}
.api h2 {
  font-size:30px;
  max-width:none}
.api>div>p {
  font-size:13px}
.api .apiVisual>p {
  font-size:11px}
.faq {
  grid-template-columns:1fr;
  gap:25px;
  padding-block:45px}
.faq h2 {
  max-width:none}
.faq>div>p {
  max-width:40ch;
  margin-top:16px}
.closing {
  border-radius:0;
  padding-block:50px}
.footer {
  grid-template-columns:1fr 1fr;
  gap:35px;
  padding-top:45px}
.footer>div {
  grid-column:1/-1}
.footer>div>p {
  max-width:none}
.footer nav {
  gap:14px}
.footer nav a {
  font-size:12px}
.root [id] {
  scroll-margin-top:20px}
}

@media(max-width:400px) {
  .container {
  padding-inline:18px}
.header {
  padding-inline:18px}
.brand {
  font-size:17px;
  gap:7px}
.headerActions {
  gap:12px}
.navCta {
  padding-inline:9px}
.hero {
  padding-inline:20px}
.hero h1 {
  font-size:44px}
.heroActions {
  gap:16px}
.primary {
  font-size:13px;
  padding-inline:16px}
.heroSecondary {
  font-size:12px}
.demoControls button {
  font-size:10px;
  padding-inline:5px}
.demoControls button>span {
  display:none}
.demoBody {
  padding:22px;
  min-height:315px}
.demoFoot>span {
  max-width:19ch}
.demoFoot button {
  max-width:150px}
.tools>div {
  gap:20px;
  font-size:17px}
.fileCards>div {
  width:86px;
  height:137px;
  padding:15px}
.fileFormats {
  font-size:10px!important}
.retention {
  padding:24px}
}

@media(prefers-reduced-motion:reduce) {
  .root * {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}


.fileCards>div:nth-child(1){rotate:-7.5deg}
.fileCards>div:nth-child(2){rotate:-2.5deg}
.fileCards>div:nth-child(3){rotate:2.5deg}
.fileCards>div:nth-child(4){rotate:7.5deg}
.demoDocument .demoHint{font-size:11px;color:#acbdd5;margin-top:20px;line-height:1.6}
/* Stable contrast over the landscape, including the pale mountain horizon. */
.heroShade {
  background: linear-gradient(180deg, rgba(5,36,80,.46), rgba(8,37,78,.56) 62%, rgba(243,248,255,.04) 82%, #fff 100%);
}
.hero > small {
  display: table;
  margin: 17px auto 0;
  padding: 5px 10px;
  border-radius: 4px;
  background: #254e79;
  color: #fff;
  font-size: 12px;
}
@media (max-width: 760px) {
  .hero { padding-bottom: 253px; }
  .hero > small { margin-top: 18px; max-width: 310px; }
  .heroShade {
    background: linear-gradient(180deg, rgba(5,36,80,.46), rgba(8,37,78,.64) 65%, rgba(243,248,255,.04) 86%, #fff 100%);
  }
}
/* Measured from Cluely #download-button: luminous blue, not frosted pills. */
.root {
  --button-glow: radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgb(255 255 255 / 60%) 0%, rgb(255 255 255 / 0%) 100%);
  --button-blue: radial-gradient(114.65% 114.65% at 9.73% 17.27%, #1e82e0 0%, #1c38ea 100%);
  --button-depth: 0 3px 8px rgb(148 172 243 / 24%), inset -3px -3px 4px rgb(191 229 251 / 40%), inset 4px 4px 4px rgb(19 26 228 / 10%);
}
.primary,
.navCta,
.demoFoot button {
  --button-hover: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgb(255 255 255 / var(--button-hover)), transparent), var(--button-glow), var(--button-blue);
  background-blend-mode: overlay, overlay, normal;
  color: #fff;
  box-shadow: var(--button-depth);
  transition: transform .16s ease-out;
}
.primary {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 16px;
  letter-spacing: -.13px;
}
.primary::before,
.navCta::before,
.demoFoot button::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  padding: 3px;
  border-radius: 10px;
  background: linear-gradient(176.87deg, rgb(255 255 255 / 50%) 8.56%, transparent 85.04%);
  opacity: .45;
  filter: blur(1px);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.primary::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -20px;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 28%) 49%, transparent 63%);
  transform: translateX(-120%);
  animation: buttonShimmer 6s ease-in-out infinite;
}
.navCta,
.demoFoot button {
  box-shadow: 0 2px 6px rgb(78 108 190 / 18%), inset -3px -3px 4px rgb(191 229 251 / 40%), inset 4px 4px 4px rgb(19 26 228 / 10%);
}
@media (hover: hover) {
  .primary:hover,
  .navCta:hover,
  .demoFoot button:hover {
    --button-hover: .4;
    background: radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgb(255 255 255 / var(--button-hover)), transparent), var(--button-glow), var(--button-blue);
    background-blend-mode: overlay, overlay, normal;
    transform: scale(1.03);
  }
}
.primary:active,
.navCta:active,
.demoFoot button:active { transform: scale(.97); }
@keyframes buttonShimmer {
  0%, 65% { transform: translateX(-120%); }
  90%, 100% { transform: translateX(120%); }
}
@media (max-width: 400px) {
  .primary { font-size: 13px; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .primary, .navCta, .demoFoot button { transform: none; }
  .primary::after { animation: none; display: none; }
}